Angular For Beginners

What is Angular?

Angular is an open-source front-end web framework mainly developed and maintained by Google. It’s a platform for developing client-side mobile and desktop web apps especially, the single page applications (SPAs).

Recently, Google has launched Angular 8 which is based on client-side TypeScript framework. It adopts the TypeScript format for the code which is converted into JavaScript during compilation. Angular 8 is used to create dynamic web applications.

Previous versions that have been developed by Google

The first version developed by the Google community is AngularJS which is the initial version of Angular and it is based on JavaScript. Well, it’s now completely different from other versions. The initial version was released in 2010.
The next version was released as Angular 2 -- that was a complete rewrite of AngularJS and released in 2016.
Coming to the upgrade, the next version that’s been developed by Google on Angular is Angular 4.
Then, Angular 5 and Angular 6 were released eventually in 2017 and 2018 respectively.
Angular 6 was released with the focus on Angular Material, update and add, etc. which we will later discuss on upcoming articles.
The significantly improved performance was seen in Angular 7 in 2018.
The latest version developed by Google community is Angular 8 that was released in 2019 and we will be going through it in this article.

Before learning what is new in Angular 8, I would like to express that AngularJS and Angular are completely different. AngularJS is based on JavaScript and Angular 8 is based on TypeScript. TypeScript is a typed superset of JavaScript that compiles the code to plain JavaScript. TypeScript is pure object-oriented language with classes and interfaces. Angular 2 and later versions were written in TypeScript.

New Features of Angular 8

The new features of Angular 8 are,

Support for TypeScript 3.4
Differential loading
Dynamic imports for lazy routes
CLI workflow improvements
Ivy Rendering engine
Bazel support
Builders API
Router backward compatibility
Opt-in usage sharing
Support for location.

Prerequisites

Now, let us take a look at the requirements to run an Angular application. Before getting started, we need to fulfill the following prerequisites.

NodeJS that can be downloaded from this following link
npm package manager
IDE for Angular coding; I am using Visual Studio Code that can be downloaded from this link

After downloading and installing NodeJS, we need to install Angular CLI by using CMD or we can also use Visual Studio Code terminal, now open the terminal and execute the following code in it.

npm install -g @angular/cli

Are you wondering what npm install -g @angular/cli is?

Here, npm stands for node package manager, -g states the supporting files to be installed globally after we can create a new application using the following command.

Again, open the terminal and execute the following command.

ng new demo

After executing the above command, the terminal will ask whether you want to enable the routing. The topic of routing will be covered in an upcoming article, here, select Y instead of N and select the styles that we are going to use - CSS or SCSS.

After selecting it, the basic files will be loaded and the application will be created.

The created application is to be run in order to view the output, so execute the following command in terminal to see the output of the application.

ng serve -open

The above command will compile and open the browser automatically to view the output of the application.

Remember - if the execution of command ng serve is used, that means we have to enter the localhost:4200 manually to see the output. If the command is executed as ng serve-open, the compilation is done and the browser will automatically hear and open the localhost to show the output of the application.

Finally, a basic Angular application has been compiled and we are viewing the output from the browser. In my next article, I will cover Components which are useful for performing the CRUD operations and sharing the data.

I hope this article is useful to you, especially those who are trying to learn Angular from scratch. If you want to say anything, please comment so that I can improve my articles from the next topics.

4 Comments

Join the conversation! Your thoughts help the community grow.

Aveevan7y ago
In which case using Angular instead of ASP/NET MVC.
- Jothimani Elumalai7y ago
  I am Aveevan sir but your question is little bit confusing could you again ask ? thanks in advance
Vignesh Mani7y ago
Nice article Jothi
- Jothimani Elumalai7y ago
  Thanks anna