angularJS
- Angular 2 is not the upgrade (不是一个简单的版本的升级) of angular 1
- Angular 2 is using Typescript which is super set of javascript
- Angular 1 core concept was $scope, you will not find $scope in auglar 2.0. Angular 2 is using zone.js (使用 zone 而非 $scope 来检测改变) to detect changes.
- Angular 1.x controllers are gone. We can say that controllers are replaced with "Components" (controllers 被 components 所替代) in Angular 2.
////Angular 1.x using Controller and $scope.........
var myApp = angular
.module("myModule", [])
.controller("productController", function($scope) {
var prods = { name: "Prod1", quantity: 1 };
$scope.products = prods;
});
///Angular 2 Components using TypeScript........
import { Component } from ‘angular2/core’;
@Component({
selector: ‘prodsdata’,
template: `
<h3>{{techncalDiary}}</h3> `
})
export class ProductComponent {
prods = { name: ‘Prod1’, quantity: 1 };
}
- In Angular 2, Structural directives syntax is changed. ng-repeat is replaced with *ngFor
///Angular 1.x structural directives:........
<ul>
<li ng-repeat="item in items">
{{item.name}}
</li>
</ul>
///Angular 2 structural directives:.............
<ul>
<li *ngFor="#item of items">
{{item.name}}
</li>
</ul>
- In Angular 2, local varables are defined using hash(#) prefix.
<div *ngFor="#technicalDiary of technicalDiries">
- Two-way data binding: ng-model replaced with [(ngModel)]
///Angular 1.x, two-way data binding using 'ng-model'..........
<input ng-model="technology.name"></input>
/////In Angular 2,two-way data binding using '[(ngModel)]'..........
<input [(ngModel)]="http://technology.name"></input>
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.
Mobile Support: Angular 2.0 is made keeping in mind mobile oriented architecture (面向手机移动端).
