Angular Tutorial for Beginners: Part 1 - Getting started

Author
Recent Posts

Tuba Mansoor

She works with an IT major. Normally she doesn't speak much but when she speaks, I bet she can make you speechless. Total nerd and travel buff Tuba can be seen passionately doing gyms, Netflix or sharing experiences through excellent blogs. If not then you can find her learning something new. Yes, She knows 4 languages – English, Hindi, Marathi, and German.

What is Angular?

Angular is a framework that is based on Typescript. It is an open-source framework from Google. It is a quite different from its predecessor AngularJS. Angular is a SPA or Single Page Application because, it as the name suggests, it has a single page and part of this refreshed to provide user with different views.

Getting started

There are many editors you can use for working with Angular. But I prefer ‘Visual Studio Code’. If you are planning to code along with me, better to install it.

Next we need to install node.js. Installing node.js will install npm too. To check if they have installed alright type in the following commands in your command prompt. This should show you the version

Go to the command prompt and type:

node -v

npm -v

Now we will be installing the angular CLI so that we can start using angular commands. Type in the following command at the command prompt.

npm install -g @angular/cli

If you are working behind a proxy, you will need to set the proxy as follows before running the command to install angular cli.

npm config set proxy http://username:password@proxy.thing.com:xxxx/

npm config set https-proxy http://username:password@proxy.thing.com:xxxx/

Run the above commands in the command prompt. Substitute your proxy in place of ‘proxy.thing.com:xxxx’. Your username and password should also be encoded before using it in the above statements. You can get it encoded here. Once you have set the proxy you can run the command to install the angular CLI.

Once installation is done, we are set to create our angular project.

Navigate to the path, where you want to create your app in your Node.js command prompt. Type in the following command to create your new app.

ng new AngularBeginner

Here AngularBeginner is the name of our app. It will ask you whether you need routing in angular. Select Yes. Next it will ask for stylesheets. Select ‘CSS’. Press Enter. It will begin installation. You will see a lot of files installing as below:

Sit back and relax. This will take some time.

Once the installation is done. Use the command prompt command to navigate to inside the folder where your angular app is created.

Next type in the command to open your visual studio code.

code .

Our angular code will open in Visual Studio code.

Here we can find a couple of files that angular creates. Lets discuss the important ones.

The src folder is the one that you will be using to write most of your code.

The node_modules folder contain all the packages that are needed to run your application. The packages that need to be installed will be mentioned in the package.json file. This folder contains a lot of files. When you deploy or move your code, you don’t need this folder. When you again run the command npm install, the angular CLI will again install all the packages mentioned in the package.json file.

Now let’s run the code. Goto the ‘Terminal’ window in Visual Studio Code and select ‘New Terminal’ as below:

This will open a terminal window.

Go and type in the following command:

This will open your code in a new browser as below:

Now lets go back to our code in Visual Studio Code.

Change the title in the app.component.ts file as above. Change the app.component.html file as below:

Save the files. Go back to your browser. You will find that the title has changed.

Check the below AutoSave option to automatically save your code.

You will that whatever changes you make to your code are automatically updated in your browser.

Instead of opening a new terminal in visual studio code, you can also navigate to your angular project folder in command prompt and type in the command ‘ng serve –o’.

Debugging

Once you proceed with Angular, the ‘F12’ key will be your friend while debugging. If there is any error, your browser will turn blank. If such case pressing on F12 will open developer console and you can find your errors here.