Before we jump to coding section let me point out some differences between AngularJS and Angular2 which everyone should know.
- First thing, Angular 2 is not the upgrade of angular 1. Angular 2 is completely rewritten
- Angular 1.x was not built with mobile support in mind, where Angular 2 is mobile oriented
- Angular 1 core concept was $scope, and you will not find $scope in angular 2.0. Angular 2 is using zone.js to detect changes.
- Angular 1.x controllers are gone. We can say that controllers are replaced with “Components” in Angular 2
- In Angular 2, Structural directives syntax is changed.
ng-repeatis replaced with
- In Angular 2, local variables are defined using hash(#) prefix
- Two-way data binding: ng-model replaced with [(ngModel)]
- Angular 2 is using Hierarchical Dependency Injection system which is major performance booster. Angular 2 implements unidirectional tree based change detection which again increases performance . As per ng-conf meetup, angular 2 is 5 times faster as compared to angular 1
- If you compare the file size, angular 2 is 20kb less than angular 1 which helps in decreasing the load time for apps
Now that you’ve got basic information about What’s difference between both versions we’ll start basic coding in Angular2.
Open your command prompt and install angular-cli using following command:
npm install -g angular-cli
This will install Angular2 command line interface so now you can use ng command directly.
Once this is done create new angular2 application using:
ng new basic
It’ll create new directory basic and install dependecies into that folder. Once this is done you’re almost done.
Now, just cd into that directory and run one last command to start ng server:
That’s it! Your app will be served on 4200 port. Open localhost:4200 and you can see your app up & running! 🙂
Next time we’ll be creating sample Angular2 component Your first Angular2 Component and after that we’ll play with events and refs in Angular2.
Till then try understanding structure and code!!!