angular2相比angular1做了革命性的改變。對于開發(fā)者來說，我們知道它框架的實現(xiàn)上改變極大。我們看到代碼也能發(fā)現(xiàn)它寫法上變化很大，似乎完全是另一個東西。
但是當(dāng)我們真正去寫下去的時候，又會發(fā)現(xiàn)，處處都有angular1的影子，處處都是angular1的概念。對，沒錯。angular始終是angular，換件“衣服”，還是angular。
最開始我第一眼看到angular2的代碼的時候，是有點排斥的，怎么感覺就像是react的寫法...而后，我自己親手，寫它的demo時候發(fā)現(xiàn)，這貨還是原本的angular，一切都那么熟悉。
所以有angular1基礎(chǔ)的同僚，完全不用排斥。下面來對比一部分兩個版本的寫法。
angular1 | angular2 |
ng-app | Bootstrapping |
<body ng-app="myapp"> | import { bootstrap } from '@angular/platform-browser-dynamic';import { AppComponent } from './app.component';bootstrap(AppComponent); |
ng-class | ngClass |
<div ng-class="{active: isActive}"><div ng-class="{active: isActive,shazam: isImportant}"><div ng-class="{true: 'active',false: 'isImportant'}[isActive] | <div [ngClass]="{active: isActive}"><div [ngClass]="{active: isActive,shazam: isImportant}"><div [class.active]="isActive"> |
ng-click | click event |
<button ng-click="vm.toggleImage()"><button ng-click="vm.toggleImage($event)"> | <button (click)="toggleImage()"><button (click)="toggleImage($event)"> |
ng-controller | Component decorator |
<div ng-controller="MovieListCtrl as vm"> |  @Component({ selector: 'movie-list', templateUrl:'app/movie-list.component.html', styleUrls: ['app/movie-list.component.CSS'], pipes: [StringSafeDatePipe]}) |
ng-show or ng-hide | [hidden] |
<h3 ng-show="vm.favoriteHero"> Your favorite hero is: {{vm.favoriteHero}}</h3> | <h3 [hidden]="!favoriteHero"> Your favorite hero is: {{favoriteHero}}</h3> |
ng-href | [href] |
<a ng-href="angularDocsUrl">Angular Docs</a> | @RouteConfig([ { path: '/movies', name: 'Movies', component: HeroesComponent }]) |
ng-if | *ngIf |
<table ng-if="movies.length"> | <table *ngIf="movies.length"> |
ng-model | ngModel |
<input ng-model="vm.favoriteHero"/> | <input [(ngModel)]="favoriteHero" /> |
ng-repeat | *ngFor |
<tr ng-repeat="movie in vm.movies"> | <tr *ngFor="let movie of vm.movies"> |
ng-src | [src] |
<img ng-src="{{movie.imageurl}}"> | <img [src]="movie.imageurl"> |
ng-style | ngStyle |
<div ng-style="{color: colorPReference}"> | <div [ngStyle]="{color: colorPreference}"><div [style.color]="colorPreference"> |
ng-switch | ngSwitch |
<div ng-switch="vm.favoriteHero"> <div ng-switch-when="true"> Excellent choice! </div> <div ng-switch-when="false"> No movie, sorry! </div> <div ng-switch-default> Please enter your favorite hero. </div></div> | <span [ngSwitch]="favoriteHero"> <p *ngSwitchWhen="true"> Excellent choice! </p> <p *ngSwitchWhen="false"> No movie, sorry! </p> <p *ngSwitchDefault> Please enter your favorite hero. </p></span> |
angular1 | angular2 |
currency | currency |
<td>{{movie.price | currency}}</td>
| <td>{{133567 | currency:'USD':true}}</td> //$133,567 <td>{{133567 | currency:'RMB':true}}</td> //RMB133,567 屬性值不支持￥，$等符號，必須按照USD，RMB這樣寫，否則不顯示
|
date | date |
<td>{{movie.releaseDate | date}}</td> | <td>{{movie.releaseDate | date}}</td> |
filter | none |
<tr ng-repeat="movie in movieList | filter: {title:listFilter}"> |
由于性能原因，ng2沒有filter指令，需要在component用戶自己定義過濾 |
json | json |
<pre>{{movie | json}}</pre> | <pre>{{movie | json}}</pre> |
limitTo | slice |
<tr ng-repeat="movie in movieList | limitTo:2:0"> | <tr *ngFor="let movie of movies | slice:0:2"> |
lowercase | lowercase |
<div>{{movie.title | lowercase}}</div> | <td>{{movie.title | lowercase}}</td> |
number | number |
<td>{{movie.starRating | number}}</td> | <td>{{movie.starRating | number}}</td><td>{{movie.starRating | number:'1.1-2'}}</td><td>{{movie.approvalRating | percent: '1.0-2'}}</td><td>{{movie.approvalRating | percent:'4.3-5'}}</td> |
orderBy | none |
<tr ng-repeat="movie in movieList | orderBy : 'title'"> |
也是由于性能問題，ng2不再提供此指令 |
angular1 視圖的模型和方法都在控制器（Controllers）里，angular2中建立這些在組件（Components）里。
angular1 | angular2 |
currency | currency |
<td>{{movie.price | currency}}</td>
| <td>{{133567 | currency:'USD':true}}</td> //$133,567 <td>{{133567 | currency:'RMB':true}}</td> //RMB133,567 屬性值不支持￥，$等符號，必須按照USD，RMB這樣寫，否則不顯示
|
IIFE(函數(shù)表達式) | none |
在angular1中,我們經(jīng)常定義一個立即調(diào)用函數(shù)表達式(或IIFE)在我們的控制器代碼。 這讓我們的控制器代碼全局命名空間。 |
angular2中我們不需要擔(dān)心這個問題, 因為我們使用ES 2015模塊和模塊處理我們的命名空間 |
Angular modules | import |
angular.module("movieHunter", ["ngRoute"]); | import { Component } from '@angular/core';import { ROUTER_DIRECTIVES } from '@angular/router-deprecated'; |
Controller registration | Component Decorator |
angular .module("movieHunter") .controller("MovieListCtrl", ["movieService", MovieListCtrl]); | @Component({ selector: 'movie-list', templateUrl:'app/movie-list.component.html', styleUrls: ['app/movie-list.component.css'], pipes: [StringSafeDatePipe]}) |
Controller function | Component class |
function MovieListCtrl(movieService) {} | export class MovieListComponent {} |
Dependency Injection | Dependency Injection |
MovieListCtrl.$inject = ['MovieService'];function MovieListCtrl(movieService) {} | constructor(movieService: MovieService) {} |
angular1 | angular2 |
link tag | link tag |
<link href="styles.css" rel="stylesheet" /> | <link href="styles.css" rel="stylesheet" /> 屬性值不支持￥，$等符號，必須按照USD，RMB這樣寫，否則不顯示
StyleUrlsangular2 中 我們可以在@Component 中引入css， 此css默認會在當(dāng)前組件形成一個獨立的css作用域。 詳情可以看此系列第三篇博客。“英雄之旅”見聞和小結(jié)----angular2系列（三) styleUrls: ['app/movie-list.component.css'], |
新聞熱點
疑難解答
