前言：
angular2相比angular1做了革命性的改變。對於開發者來說，我們知道它框架的實現上改變極大。我們看到代碼也能發現它寫法上變化很大，似乎完全是另一個東西。
但是當我們真正去寫下去的時候，又會發現，處處都有angular1的影子，處處都是angular1的概念。對，沒錯。angular始終是angular，換件“衣服”，還是angular。
最開始我第一眼看到angular2的代碼的時候，是有點排斥的，怎么感覺就像是react的寫法...而后，我自己親手，寫它的demo時候發現，這貨還是原本的angular，一切都那么熟悉。
所以有angular1基礎的同僚，完全不用排斥。下面來對比一部分兩個版本的寫法。
directive：
angular1 |
angular2 |
ng-app |
Bootstrapping |
<body ng-app="myapp"> ng1中初始化引導應用，通過ngApp屬性定義應用，並通過定義ng-view屬性渲染到相應dom |
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component'; bootstrap(AppComponent);
ng2引導應用通過bootstrap類實例化，AppComponent的@Component的selector屬性選擇dom進行渲染
|
ng-class |
ngClass |
<div ng-class="{active: isActive}">
<div ng-class="{active: isActive,shazam: isImportant}">
|
<div [ngClass]="{active: isActive}">
<div [ngClass]="{active: isActive,shazam: isImportant}">
<div [class.active]="isActive">
[class.active]指代的就是active類，最開始我一看到還以為是偽類的寫法 |
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>
只是用[hidden]屬性，沒有[show]屬性 |
ng-href |
[href] |
<a ng-href="angularDocsUrl">Angular Docs</a>
|
@RouteConfig([ { path: '/movies', name: 'Movies', component: HeroesComponent } ]) <a [href]="movies">Angular Docs</a> <a [routerLink]="['Movies']">Movies</a> [href] 對應的是路由配置里path鏈接， [routerLink] 對應的是路由name 。 |
ng-if |
*ngIf |
<table ng-if="movies.length">
|
<table *ngIf="movies.length">
|
ng-model |
ngModel |
<input ng-model="vm.favoriteHero"/> ng-model在angular1中是雙向綁定指令 |
<input [(ngModel)]="favoriteHero" /> [()]在angular2中代表雙向綁定, 也可以使用bindon-ngModel，推薦前者寫法 |
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>
|
Filters / Pipes:
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>
和 JSON.stringify 功能相同 ，和 angular1 的 json 一樣 |
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>
number 和 percent 屬性值控制小數點后面的位數，只是寫法讓人看不懂，有誰知道為什么是這樣? |
orderBy |
none |
<tr ng-repeat="movie in movieList | orderBy : 'title'">
|
也是由於性能問題，ng2不再提供此指令 |
Controllers / Components：
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(函數表達式) |
none |
|
在angular1中,我們經常定義一個立即調用函數表達式(或IIFE)在我們的控制器代碼。 這讓我們的控制器代碼全局命名空間。 |
angular2中我們不需要擔心這個問題, 因為我們使用ES 2015模塊和模塊處理我們的命名空間 |
Angular modules |
import |
angular.module("movieHunter", ["ngRoute"]);
|
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
angular2 使用es2015 modules ，每個代碼文件都是模塊，可以直接導入文件模塊使用 |
Controller registration |
Component Decorator |
angular .module("movieHunter") .controller("MovieListCtrl", ["movieService", MovieListCtrl]); 在angular1中，注冊模塊下的控制器，通過以上方法。 第一個參數是控制器命名，第二個參數用字符串定義所有依賴，和一個控制器引用函數 |
@Component({ selector: 'movie-list', templateUrl:'app/movie-list.component.html', styleUrls: ['app/movie-list.component.css'], pipes: [StringSafeDatePipe] }) angular2中，我們通過@Component提供元數據，如模板和樣式 |
Controller function |
Component class |
function MovieListCtrl(movieService) { } 在angular1中，我們編寫模型和方法在控制器函數里。 |
export class MovieListComponent {
}
在angular2中，我們創建一個組件類編寫模型和方法 |
Dependency Injection |
Dependency Injection |
MovieListCtrl.$inject = ['MovieService']; function MovieListCtrl(movieService) { } ng1中，必須要對每個依賴進行注入 |
constructor(movieService: MovieService) {
}
在ng2中，constructor注入依賴，但是需要模塊被當前組件或者當前組件的父組件引入依賴。 比如，當前組件引入依賴服務， import { MovieService } from './MovieService'; |
Style Sheets：
angular1 |
angular2 |
link tag |
link tag |
|
<link href="styles.css" rel="stylesheet" /> |
<link href="styles.css" rel="stylesheet" /> 屬性值不支持￥，$等符號，必須按照USD，RMB這樣寫，否則不顯示
StyleUrlsangular2 中 我們可以在@Component 中引入css， 此css默認會在當前組件形成一個獨立的css作用域。 詳情可以看此系列第三篇博客。“英雄之旅”見聞和小結----angular2系列（三) styleUrls: ['app/movie-list.component.css'],
|
小結：
哎呀媽呀，寫完累死寶寶了... 回顧了angular1和angular2，並進行了對比，還對遺漏過的知識點進行了補充學習。收獲滿滿~