what is Angular 2?
“Angular 2 is releted of an open source js framework to build web software and web applications in HTML css and JavaScript and has been mostly conceived as a mobile first approach.”
Angular 2 is just to completely revived framework.
Motivations for Angular 2 / More Angular 2
Performance,The Changing Web,Mobile and Ease of Use.
Features & Benefits Angular 2
Cross Platform
Progressive web apps
Native
Desktop
Native
Desktop
Speed and Performance
Code generation
Universal
Code splitting
Universal
Code splitting
Productivity
Templates
Angular CLI
IDEs
Angular CLI
IDEs
Full Development Story
Testing
Animation
Accessibility
Animation
Accessibility
Difference between Angular 1 VS Angular 2
Angular 2 is mobile oriented & better in performance.
Angular 2 provides more choice for languages.
Angular 2 implements web standards like components.
AngularJS 2.0 is not easy to setup as AngularJS 1.x.
Angular 1.x controllers and $scope are gone.
Different ways to define local variables.
Structural directives syntax is changed.
Angular 2 uses camelCase syntax for built-in directives.
Angular 2, directly uses the valid HTML DOM element properties and events.
One-way data binding directive replaced with [property].
Two-way data binding: ng-model replaced with [(ngModel)]
Way of Bootstrapping Angular Application is changed:
Ways of Dependency Injection is Changed- syntax changed.
Way of routing is Changed- syntax changed.
Angular 2 provides more choice for languages.
Angular 2 implements web standards like components.
AngularJS 2.0 is not easy to setup as AngularJS 1.x.
Angular 1.x controllers and $scope are gone.
Different ways to define local variables.
Structural directives syntax is changed.
Angular 2 uses camelCase syntax for built-in directives.
Angular 2, directly uses the valid HTML DOM element properties and events.
One-way data binding directive replaced with [property].
Two-way data binding: ng-model replaced with [(ngModel)]
Way of Bootstrapping Angular Application is changed:
Ways of Dependency Injection is Changed- syntax changed.
Way of routing is Changed- syntax changed.
AngularJsController
1
2
3
4
5
6
| var myApp = angular .module( "mymodulename" , []) .controller( "productController" , function ( $scope ) { var prods = { postname: "Angularjs 1" , price: 9586250 }; $scope .products = prods; }); |
Angular 2 Components using TypeScript
1
2
3
4
5
6
7
8
9
10
11
| import { Component } from 'angular2/core' ; @Component({ selector: 'prodsdata' , template: ` <h4>{{prods.postname}}</h4> ` }) export class ProductComponent { prods = { postname: 'Angularjs 2' , price: 785268 }; } |
0 comments: