a blog for those who code

Sunday, 9 April 2017

Create your first Angular 4 Application using Angular CLI

In this post we will be discussing about creating your first Angular 4 application. Angular.JS is one of the most popular JavaScript framework to create web apps. There is not much change between Angular 2 and Angular 4 and also Angular 4 comes with the backward compatibility with 2.x.x.

Before creating our first Angular 4 application we should know what are the major changes happened from the last versions. The changes are :

1. Email is added as a Validator : Email has been added as a Validator along with required, minlength, maxlength which helps you to validate that the input is a valid email.

2. ngIf with else : You might have used a lot of ngIf to do conditional statement and everytime you thought that there should have been else as well. Now with Angular 4 ngIf has been extended to support the else statement.

3. ng-template : Template has been changed to ng-template.

4. as keyword : Addition of as keyword to store a result in a variable of a template and you can use it in the element.

The above changes are not big enough but it will help you to build a better and manageable software with Angular. Now lets create our first Angular 4 application :

At first install the latest version of angular-cli using the below command :

npm install -g angular-cli

Then we need to create our first project using the below command :

ng new angular4-example

Ignore the warnings. Now if you see closely the project is being installed using ng2, that means the cli is not upgraded to Angular 4. We can also run ng-v inside the project folder to know what is the current version of my Angular project as shown below :

Now next thing is to update the Angular JS from version 2 to version 4. And it can be done using the below command.

After running the above command if you run the command ng -v again you will see the Updated version of Angular JS.

Now you have successfully created your first Angular 4 applications. Just run it using ng serve which will run the application on http://localhost:4200/. Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment