Intro to Angular and VS Code

This is an intro to Angular and VS Code. So in the last article we learned how to use Angular CLI to auto generate starter code for our angular app and how to run it. In this article we will focus on how Angular structures its files, what they do and how we can get about to get started coding using VS Code as our IDE.

ngular and VS Code. So in the last article we learned how to use Angular CLI to auto generate starter code for our angular app and how to run it. In this article we will focus on how Angular structures its files, what they do and how we can get about to get started coding using VS Code as our IDE.

First, lets open VS Code and open our project folder we created.

Intro to Angular and VS Code
VS Code. Click on open folder
Select the previously created folder via Angular CLI
VS Code is now loaded with our folder

Now this is our coding environment. Lets not go through auto-generated files and don’t worry if you don’t understand because this will be useful later rather than not now.

Lets go directly to src/app/app.component.html

This is the root file from which the auto-generated views were being rendered. Now just get rid of all that and lets just add a simple tag as follows:

<h1>Hello From Angular</h1>

And save it and go to the browser to address localhost:4200/
The changes will be reflected instantly.

Cool right?

Now lets look at other files. Particularly, src/app/app.component.ts
This is a .ts file, it contains all the logic to manipulate the HTML file as per action. ‘ts’ stands for ‘type script’ which is a superscript of java script. If you know ‘java script’ then congratulations! This article will feel like a child’s play to you.

If you don’t congratulations! this is a good place to start. Its easy, do not worry. Lets get some basics out of the way.

Here is our auto-generated ts file.
The first line imports necessary components from angular’s core module so that we can write in ts.

@Component defines this file is a part of a component in which selector defines the tag this component uses so that this component can be directly included. Ill explain more in next article.

‘templateUrl’ defines the HTML file it is associated with.
‘styleUrls’ defines the CSS file used for styling in the HTML.

export class AppComponent is the class file that contains all the logic.

Lets try defining a variable and lets use interpolation feature of Angular to wrap this up.

TS file
HTML file

The double curly brackets with variable name inside is known as interpolation. Whatever the variable is storing. This is called interpolation.

Save and checkout the browser.