Introduction of Angular 10 | Installation of Angular | Angular 10 Tutorial
Introduction of Angular 10 | Installation of Angular | Angular 10 Tutorial
Hi Welcome All,this is Pingjava. From today we are going to start Angular 6
tutorials.In these tutorials,we will completely learn about Angular 6 with examples in
every articles in a simple communicating language.These article will tell you what is Angular and why we should use Angular.Also we will how to install Angular and how to use that.
Let's Begin...!!!
Firstly we are going to see history of Angular.When it has launched and it's version.
Then What is Angular and Why we should Angular.After that Features of Angular followed by Installation of Angular and How to use it.
History of Angular:
1. In 2010,first version of Angular was launched called AngularJS which is based
upon JavaScript
2.In 2016, Angular 2 was launched which is completely different from
first version AngularJS because second version depends on Typescript.Typescript
is a superset of Javascript. That means whatever features Javascript has that all features are present in Typescript but whatever Typescript has the features,may or
may not be the feature of Javascript. You can say that Typescript is the advanced
version of Javascript.
3. In the end of the 2016 year,Angular 4 was launched by skipping Angular 3 version.
The reason behind the skipping is the conflict between router packages version and core packages version present in Angular framework.Find below packages and version:
@Angular/Core V2.3.0
@Angular/Compiler V2.3.0
@Angular/Compiler CLI V2.3.0
@Angular/HTTP V2.3.0
@Angular/Router V3.3.0
Here you can clearly watch the difference between Core package and router package
version which was obstacle for Angular Team while developing next version.So
Angular Developer Team has skipped Angular 3 to solve these conflict issue and
launched Angular 4 version at the end of 2016 year.
4. Angular 5 was launched in 2017
5. Immediately in the next year 2018, Angular 6 was launched.
Now let's see what is Angular and why we should use it?
What is Angular?
Angular is a framework based upon Javascript that allows us to build reactive
Single Page Applications(SPAS).Single page Application means whatever we have work
to display on front end that everything is rendered in that single page.
If we want to change any part of the page then the page does not get refresh but that change part is rendered on that same page.Also if we want to change complete page,then the url and components of page gets change but page remains same and it is not reloaded because Javascript renders all component and url on that single page at runtime.So because of these feature of Angular,it is fast process.Summary is that Components get rendered on a single page without refresh/reload of that page.
Features of Angular 6:
1. Consistency
2. Maintainability
3. Code Reusability
4. Catch Errors Early
5. Command Line Interface
6. Productivity
Let's see these one by one in a short
1. Consistency:
Suppose we have a page where there are 10 sections present in it.So to display
each section,we have single component for single section.That means for 10
sections there are 10 components.So whenever we generate these component in
Angular then same file structure is followed for every component generation.
I said file structure is same but names of different component must be different.
2. Maintainability:
Whenever we keep same file structure then it is easy to maintain the code.So
Angular has these feature.
3. Code Reusability:
Angular is component based framework that means for every section we create
components.One component is a group of many files like html,css,typescript file
and module.So these component can be used one or more times in our page according
to the requirement.Suppose there is a requirement where we need to display
Employee Detail form two times on a single page.So here you have to generate only
one single component of Employee Detail form and you have to code only once and
use these component two times wherever we required in our page.Also these component can be reused in another page of same application.Hence code reusability is crucial feature of Angular.
4. Catch Errors Early:
Angular 6 is based upon Typescript language.Typescript has a feature of catch Errors Early in which errors can be detected at the time of development of code.It shows red highlight for errors.
5. Command Line Interface(CLI):
Angular has a Command Line Interface.It saves our development time.For example,
if we want to generate a component then we can generate with simple command in
command line interface(CLI).
6. Productivity:
Whenever we are using these all above features,then automatically productivity
of the project increases.
Further we will see step by step installation of Angular.
Installation of Angular:
1. To install Angular in our system, we need to install Node.js from official website.
Visit following link to download Node.js:
2. Download Node.js according to the compatiblity of your Operating system.As of now,
latest version of Node.js is 14.8.0 Current. May be later on these version can be changed and newer can come up.As of now, download 14.8.0 Current version.
3. Installed the downloaded Node.js file which has ".msi" extension by accepting policies and give a path for that file to install.After few minutes it will get installed.
4. To check whether Node.js is installed or not and the version of Node.js, go to cmd
and type command node -v and you will find that v14.8.0 is displayed.Also with these check the version of npm(node package manager) by typing command npm -v.
Here npm comes with Node.js. So both can be seen as installed.
5. Now we have to install Angular in our system.For that just continue using cmd.
Type command npm install -g @angular/cli. Wait for some time and the angular will
be installed.
6. Now create a folder with name AngularProject in any drive. You can give any name to your folder.
7. Now go to cmd again.We have to enter in AngularProject folder through cmd.So type
following command:
cd AngularProject
8. Here in AngularProject folder,we need to create our own Angular Project.I am going
to create a project with name AlienPro. So for that type command ng new AlienPro.
9. After few minutes you will find AlienPro project is created in your AngularProject
folder.Go and check in AngularProject folder,you will find a folder is created with
name AlienPro which has many files created automatically in it.
10. Now we have to start the server and see the how the project is running.To start
the server type the command ng serve on cmd.
7. You will see a message on cmd "Compiled Successfully".That means your server has been started.To check these,go to browser and paste http://localhost:4200/ and Press Enter.Yow will see our AlienPro is running.
8. To edit the code of Angular,we need to have a good editor.I personally use
Visual Studio code.So you can download Visual Studio Code from official website.
Visit link for download: https://code.visualstudio.com/download
9. After download, just open new cmd window. Type following commands:
1. cd AngularProject
2. cd AlienPro
3. code .
After code . command, visual studio code will be open with AlienPro files
10.Now whatever we can see on our browser by hitting http://localhost:4200/,that everything comes from index.html file whuch consist of <app-root> </app-root> tags.
11. These <app-root> </app-root> tags comes from app.component.ts file.
To find app.component.ts file in our Visual studio code, just open Visual studio code and Press Ctrl+P and search for app.component.ts.
In next article we will see Structure of Project Files.Till then Stay Tuned!!!
An Inspirational quote:
"Great things are done by a series of small things brought together"
Steps to Subscribe my blog in 15 secs:
1. Enter your mail id in "Subscribe" box.
2. Enter Captcha for verification.
3. A mail will be received with link in your mail id.Just Click on link and then Done .Thank you for subscribing :)
Happy Reading.Happy Learning!!! See you in next post :)
Post a Comment