This is the first part of the Angular Beginners series. In this article, we will cover the basics and how to get started with Angular.
What is Angular?
Angular is a framework that is based on TypeScript. It is an open-source framework from Google. It is quite different from its predecessor AngularJS. Angular is a SPA or Single Page Application because, as the name suggests, it has a single page and part of that page gets refreshed to provide the users 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 are installed correctly, 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 on the command prompt.
npm install -g @angular/cli
If you are working behind a proxy, you will need to set the proxy as below before running the command to install Angular CLI.
npm config set proxy http://username:[email protected]:xxxx/
npm config set https-proxy http://username:[email protected]: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 commands to install the Angular CLI.
Once the 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’ and press Enter. It will begin the installation. You will see a lot of files installing as below.
A new app is being created in the command prompt. Sit back and relax. This will take some time.
Once the installation is done, use the following command to navigate 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. Let’s 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 contains 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, Angular CLI will again install all the packages mentioned in the package.json file.
Now, let’s run the code. Go to 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, let’s 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 see 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 an error, your browser will turn blank. In such case, pressing on F12 will open the developer console and you can find your errors here.
The console tab here will help you debug.
In the next part of this series, we will discuss the basic tenets of Angular: Modules, Components, and Directives.
Happy Learning!
PDF and printable versions of the articleare available here for download.