關于 AngularJS 與 Angular 概念的快速參考
Angular 這個名字專指現(xiàn)在和未來的 Angular 版本，而 AngularJS 專指 Angular 的所有 v1.x 版本。
本章提供了一個快速的參考指南，指出一些常用的 AngularJS 語法及其在 Angular 中的等價物。
參閱 現(xiàn)場演練 / 下載范例 以學習 Angular 語法
模板基礎
模板是 Angular 應用中的門面部分，它是用 HTML 寫的。下表中是一些 AngularJS 中的關鍵模板特性及其在 Angular 中的等價語法。
|
AngularJS
|
Angular
|
綁定/插值
Your favorite hero is: {{vm.favoriteHero}}
在 AngularJS 中，花括號中的表達式代表單向綁定。 它把元素的值綁定到了與模板相關控制器的屬性上。
當使用 controller as 語法時，該綁定需要用控制器的別名(vm)為前綴，這是因為你不得不通過它來指定綁定源。
|
綁定/插值
Your favorite hero is: {{favoriteHero}}
在 Angular 中，花括號中的模板表達式同樣代表單向綁定。 它把元素的值綁定到了組件的屬性上。 它綁定的上下文變量是隱式的，并且總是關聯(lián)到組件。 所以，它不需要一個引用變量。
|
過濾器
<td>{{movie.title | uppercase}}</td>
要在 AngularJS 中過濾輸出，使用管道字符(|)以及一個或多個過濾器。
這個例子中把 title 屬性過濾成了大寫形式。
|
管道
<td>{{movie.title | uppercase}}</td>
在 Angular 中，你使用類似的語法 —— 用管道字符(|)來過濾輸出，但是現(xiàn)在直接把它叫做管道了。 很多(但不是所有)AngularJS 中的內(nèi)置過濾器也成了 Angular 中的內(nèi)置管道。
|
局部變量
<tr ng-repeat="movie in vm.movies">
<td>{{movie.title}}</td>
</tr>
這里的 movie 是一個用戶定義的局部變量
|
輸入變量
<tr *ngFor="let movie of movies">
<td>{{movie.title}}</td>
</tr>
Angular 有了真正的模板輸入變量，它需要使用 let 關鍵字進行明確定義。
|
模板指令
AngularJS 為模板提供了七十多個內(nèi)置指令。 在 Angular 中，它們很多都已經(jīng)不需要了，因為 Angular 有了一個更加強大、快捷的綁定系統(tǒng)。 下面是一些 AngularJS 中的關鍵指令及其在 Angular 中的等價物。
|
AngularJS
|
Angular
|
ng-app
<body ng-app="movieHunter">
應用的啟動過程被稱為引導。
雖然可以從代碼中引導 Angular 應用， 但很多應用都是通過 ng-app 指令進行聲明式引導的，只要給它一個應用模塊的名字(movieHunter)就可以了。
|
引導
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Angular 沒有引導指令。 總是要通過顯式調(diào)用一個 bootstrap 函數(shù)，并傳入應用模塊的名字(AppComponent)來啟動應用。
|
ng-class
<div ng-class="{active: isActive}">
<div ng-class="{active: isActive,
shazam: isImportant}">
在 AngularJS 中，ng-class 指令會基于一個表達式來包含/排除某些 CSS 類。該表達式通常是一個“鍵-值”型的控制對象， 對象中的每一個鍵代表一個 CSS 類名，每一個值定義為一個返回布爾值的模板表達式。
在第一個例子中，如果 isActive 為真，則 active 類被應用到那個元素上。
就像第二個例子中所展示的那樣，可以同時指定多個類。
|
ngClass
<div [ngClass]="{'active': isActive}">
<div [ngClass]="{'active': isActive,
'shazam': isImportant}">
<div [class.active]="isActive">
在 Angular 中，ngClass 指令用類似的方式工作。 它根據(jù)一個表達式包含/排除某些 CSS 類。
在第一個例子中，如果 isActive 為真，則 active 類被應用到那個元素上。
就像第二個例子中所展示的那樣，可以同時指定多個類。
Angular 還有類綁定，它是單獨添加或移除一個類的好辦法 —— 就像第三個例子中展示的。
|
ng-click
<button ng-click="vm.toggleImage()">
<button ng-click="vm.toggleImage($event)">
在 AngularJS 中，ng-click 指令指定當元素被點擊時的自定義行為。
在第一個例子中，如果用戶點擊了這個按鈕，那么控制器的 toggleImage() 方法就會被執(zhí)行，這個控制器是被 controller as 中指定的 vm 別名所引用的。
第二個例子演示了傳入 $event 對象，它提供了事件的詳情，并被傳到控制器。
|
綁定到 click 事件
<button (click)="toggleImage()">
<button (click)="toggleImage($event)">
AngularJS 基于事件的指令在 Angular 中已經(jīng)不存在了。 不過，可以使用事件綁定來定義從模板視圖到組件的單向數(shù)據(jù)綁定。
要使用事件綁定，把目標事件的名字放在圓括號中，并且使用等號右側引號中的模板語句對它賦值。 然后 Angular 為這個目標時間設置事件處理器。當事件被觸發(fā)時，這個處理器就會執(zhí)行模板語句。
在第一個例子中，當用戶點擊此按鈕時，相關組件中的 toggleImage() 方法就被執(zhí)行了。
第二個例子演示了如何傳入 $event 對象，它為組件提供了此事件的詳情。
|
ng-controller
<div ng-controller="MovieListCtrl as vm">
在 AngularJS 中，ng-controller 指令把控制器附加到視圖上。 使用 ng-controller(或把控制器定義為路由的一部分)把視圖及其控制器的代碼聯(lián)系在一起。
|
組件裝飾器
@Component({
selector: 'app-movie-list',
templateUrl: './movie-list.component.html',
styleUrls: [ './movie-list.component.css' ],
})
在 Angular 中，模板不用再指定它相關的控制器。 反過來，組件會在組件類的裝飾器中指定與它相關的模板。
|
ng-hide
在 AngularJS 中，ng-hide 指令會基于一個表達式顯示或隱藏相關的 HTML 元素。
|
綁定到 hidden 屬性
在 Angular 中，并沒有一個內(nèi)置的 hide 指令，可以改用屬性綁定。
|
ng-href
<a ng-href="{{ angularDocsUrl }}">Angular Docs</a>
ng-href 指令允許 AngularJS 對 href 屬性進行預處理，以便它能在瀏覽器獲取那個 URL 之前，使用一個返回適當 URL 的綁定表達式替換它。
在 AngularJS 中，ng-href 通常用來作為導航的一部分，激活一個路由。
<a ng-href="#{{ moviesHash }}">Movies</a>
路由在 Angular 中的處理方式不同。
|
綁定到 href 屬性
<a [href]="angularDocsUrl">Angular Docs</a>
在 Angular 中，并沒有內(nèi)置的 href 指令，改用屬性綁定。 把元素的 href 屬性放在方括號中，并把它設成一個引號中的模板表達式。
在 Angular 中，href 不再用作路由，而是改用第三個例子中所展示的 routerLink 指令。
<a [routerLink]="['/movies']">Movies</a>
|
ng-if
<table ng-if="movies.length">
在 AngularJS 中，ng-if 指令會根據(jù)一個表達式來移除或重建 DOM 中的一部分。如果表達式為假，元素就會被從 DOM 中移除。
在這個例子中，除非 movies 數(shù)組的長度大于 0，否則 <table> 元素就會被從 DOM 中移除。
|
*ngIf
<table *ngIf="movies.length">
Angular 中的 *ngIf 指令與 AngularJS 中的 ng-if 指令一樣， 它根據(jù)表達式的值移除或重建 DOM 中的一部分。
在這個例子中，除非 movies 數(shù)組的長度大于 0，否則 <table> 元素就會被從 DOM 中移除。
在這個例子中 ngIf 前的星號(*)是必須的。
|
ng-model
<input ng-model="vm.favoriteHero"/>
在 AngularJS 中，ng-model 指令把一個表單控件綁定到了模板相關控制器的一個屬性上。 這提供了雙向綁定功能，因此，任何對視圖中值的改動，都會同步到模型中，對模型的改動，也會同步到視圖中。
|
ngModel
<input [(ngModel)]="favoriteHero" />
在 Angular 中，雙向綁定使用[()]標記出來，它被形象的比作“盒子中的香蕉”。 這種語法是一個簡寫形式，用來同時定義一個屬性綁定(從組件到視圖)和一個事件綁定(從視圖到組件)，就成了雙向綁定。
|
ng-repeat
<tr ng-repeat="movie in vm.movies">
在 AngularJS 中，ng-repeat 指令會為指定集合中的每一個條目重復渲染相關的 DOM 元素。
在這個例子中，對 movies 集合中的每一個 movie 對象重復渲染了這個表格行元素(<tr>)。
|
*ngFor
<tr *ngFor="let movie of movies">
Angular 中的 *ngFor 指令類似于 AngularJS 中的 ng-repeat 指令。 它為指定集合中的每一個條目重復渲染了相關的 DOM 元素。 更準確的說，它把被界定出來的元素(這個例子中是 <tr>)及其內(nèi)容轉成了一個模板，并使用那個模板來為列表中的每一個條目實例化一個視圖。
請注意其它語法上的差異： 在 ngFor 前面的星號(*)是必須的；let 關鍵字把 movie 標記成一個輸入變量；列表中使用的介詞是 of，而不再是 in。
|
ng-show
<h3 ng-show="vm.favoriteHero">
Your favorite hero is: {{vm.favoriteHero}}
</h3>
在 AngularJS 中，ng-show 指令根據(jù)一個表達式來顯示或隱藏相關的 DOM 元素。
在這個例子中，如果 favoriteHero 變量為真，<div> 元素就會顯示出來。
|
綁定到 hidden 屬性
<h3 [hidden]="!favoriteHero">
Your favorite hero is: {{favoriteHero}}
</h3>
在 Angular 中，并沒有內(nèi)置的 show 指令，可以改用屬性綁定。 要隱藏或顯示一個元素，綁定到它的 hidden 屬性就可以了。
要想有條件的顯示一個元素，就把該元素的 hidden 屬性放到一個方括號里，并且把它設置為引號中的模板表達式，它的結果應該是與顯示時相反的值。
在這個例子中，如果 favoriteHero 變量不是真值，<div> 元素就會被隱藏。
|
ng-src
<img ng-src="{{movie.imageurl}}">
ng-src 指令允許 AngularJS 對 src 屬性進行預處理，以便它能夠在瀏覽器獲取此 URL 之前，用一個返回適當 URL 的綁定表達式替換它。
|
綁定到 src 屬性
<img [src]="movie.imageurl">
在 Angular 中，并沒有一個內(nèi)置的 src 指令，可以使用屬性綁定。 把 src 屬性放到方括號中，并且把它設為一個引號中的綁定表達式。
|
ng-style
<div ng-style="{color: colorPreference}">
在 AngularJS 中，ng-style 指令根據(jù)一個綁定表達式設置一個 HTML 元素的 CSS 樣式。 該表達式通常是一個“鍵-值”形式的控制對象，對象的每個鍵都是一個 CSS 屬性，每個值都是一個能計算為此樣式的合適值的表達式。
在這個例子中，color 樣式被設置為 colorPreference 變量的當前值。
|
ngStyle
<div [ngStyle]="{'color': colorPreference}">
<div [style.color]="colorPreference">
在 Angular 中，ngStyle 指令的工作方式與此類似。它根據(jù)一個表達式設置 HTML 元素上的 CSS 樣式。
在第一個例子中，color 樣式被設置成了 colorPreference 變量的當前值。
Angular 還有樣式綁定語法，它是單獨設置一個樣式的好方法。它展示在第二個例子中。
|
ng-switch
<div ng-switch="vm.favoriteHero &&
vm.checkMovieHero(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>
在 AngularJS 中，ng-switch 指令根據(jù)一個表達式的當前值把元素的內(nèi)容替換成幾個模板之一。
在這個例子中，如果 favoriteHero 沒有設置，則模板顯示“Please enter ...”。 如果 favoriteHero 設置過，它就會通過調(diào)用一個控制其方法來檢查它是否電影里的英雄。 如果該方法返回 true，模板就會顯示“Excellent choice!”。 如果該方法返回 false，該模板就會顯示“No movie,
sorry!”。
|
ngSwitch
<span [ngSwitch]="favoriteHero &&
checkMovieHero(favoriteHero)">
<p *ngSwitchCase="true">
Excellent choice!
</p>
<p *ngSwitchCase="false">
No movie, sorry!
</p>
<p *ngSwitchDefault>
Please enter your favorite hero.
</p>
</span>
在 Angular 中，ngSwitch 指令的工作方式與此類似。 它會顯示那個與 ngSwitch 表達式的當前值匹配的那個 *ngSwitchCase 所在的元素。
在這個例子中，如果 favoriteHero 沒有設置，則 ngSwitch 的值是 null， *ngSwitchDefault 中會顯示 “Please enter ...”。 如果設置了 favoriteHero，應用就會通過調(diào)用一個組件方法來檢查電影英雄。 如果該方法返回 true，就會顯示
“Excellent choice!”。 如果該方法返回 false，就會顯示 “No movie, sorry!”。
在這個例子中，ngSwitchCase 和 ngSwitchDefault 前面的星號(*)是必須的。
|
過濾器/管道
Angular 中的管道為模板提供了格式化和數(shù)據(jù)轉換功能，類似于 AngularJS 中的過濾器。 AngularJS 中的很多內(nèi)置過濾器在 Angular 中都有對應的管道。
|
AngularJS
|
Angular
|
currency
<td>{{movie.price | currency}}</td>
把一個數(shù)字格式化成貨幣。
|
currency
<td>{{movie.price | currency:'USD':true}}</td>
Angular 的 currency 管道和 1 中很相似，只是有些參數(shù)變化了。
|
date
<td>{{movie.releaseDate | date}}</td>
基于要求的格式把日期格式化成字符串。
|
date
<td>{{movie.releaseDate | date}}</td>
Angular 的 date 管道和它很相似。
|
filter
<tr ng-repeat="movie in movieList | filter: {title:listFilter}">
根據(jù)過濾條件從指定的集合中選取出一個子集。
|
沒了
在 Angular 中，出于性能的考慮，并沒有一個類似的管道。 過濾邏輯應該在組件中用代碼實現(xiàn)。 如果它將被復用在幾個模板中，可以考慮構建一個自定義管道。
|
json
<pre>{{movie | json}}</pre>
把一個 JavaScript 對象轉換成一個 JSON 字符串。這對調(diào)試很有用。
|
json
<pre>{{movie | json}}</pre>
Angular 的 ?json ?管道做完全相同的事。
|
limitTo
<tr ng-repeat="movie in movieList | limitTo:2:0">
從集合中選擇從(第二參數(shù)指定的)起始索引號(0)開始的最多(第一參數(shù)指定的)條目數(shù)(2)個條目。
|
slice
<tr *ngFor="let movie of movies | slice:0:2">
SlicePipe 做同樣的事，但是兩個參數(shù)的順序是相反的，以便于 JavaScript 中的 slice 方法保持一致。 第一個參數(shù)是起始索引號，第二個參數(shù)是限制的數(shù)量。 和 AngularJS 中一樣，如果們改用組件中的代碼實現(xiàn)此操作，性能將會提升。
|
lowercase
<td>{{movie.title | lowercase}}</td>
把該字符串轉成小寫形式。
|
lowercase
<td>{{movie.title | lowercase}}</td>
Angular 的 lowercase 管道和 1 中的功能完全相同。
|
number
<td>{{movie.starRating | number}}</td>
把數(shù)字格式化為文本。
|
number
<td>{{movie.starRating | number}}</td>
<td>{{movie.starRating | number:'1.1-2'}}</td>
<td>{{movie.approvalRating | percent: '1.0-2'}}</td>
Angular 的 ?number ?管道很相似。 但在指定小數(shù)點位置時，它提供了更多的功能，如第二個范例所示。
Angular 還有一個 percent 管道，它把一個數(shù)組格式化為本地化的(local)百分比格式，如第三個范例所示。
|
orderBy
<tr ng-repeat="movie in movieList | orderBy : 'title'">
使用表達式中所指定的方式對集合進行排序。 在這個例子中，movieList 被根據(jù) movie 的 title 排序了。
|
沒了
在 Angular 中，出于性能的考慮，并沒有一個類似的管道。 排序邏輯應該在組件中用代碼實現(xiàn)。 如果它將被復用在幾個模板中，可以考慮構建一個自定義管道。
|
模塊/控制器/組件
無論在 AngularJS 還是 Angular 中，“模塊”都會幫你把應用拆分成一些內(nèi)聚的功能塊。
在 AngularJS 中，你要在控制器中寫代碼，來為視圖提供模型和方法。 在 Angular 中，你要創(chuàng)建組件。
因為很多 AngularJS 的代碼是用 JavaScript 寫的，所以在 AngularJS 列顯示的是 JavaScript 代碼，而 Angular 列顯示的是 TypeScript 代碼。
|
AngularJS
|
Angular
|
IIFE
(function () {
...
}());
在 AngularJS 中，用立即調(diào)用的函數(shù)表達式(IIFE)來包裹控制器代碼可以讓控制器代碼不會污染全局命名空間。
|
沒了
在 Angular 中不用擔心這個問題，因為使用 ES 2015 的模塊，模塊會替你處理命名空間問題。
|
Angular 模塊
angular.module("movieHunter", ["ngRoute"]);
在 AngularJS 中，Angular 模塊用來對控制器、服務和其它代碼進行跟蹤。第二個參數(shù)定義該模塊依賴的其它模塊列表。
|
NgModules
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Angular 的模塊用 NgModule 裝飾器進行定義，有如下用途：
|
控制器注冊
angular
.module("movieHunter")
.controller("MovieListCtrl",
["movieService",
MovieListCtrl]);
在 AngularJS 中，在每個控制器中都有一些代碼，用于找到合適的 Angular 模塊并把該控制器注冊進去。
第一個參數(shù)是控制器的名稱，第二個參數(shù)定義了所有將注入到該控制器的依賴的字符串名稱，以及一個到控制器函數(shù)的引用。
|
組件裝飾器
@Component({
selector: 'app-movie-list',
templateUrl: './movie-list.component.html',
styleUrls: [ './movie-list.component.css' ],
})
Angular 會往組件類上添加了一個裝飾器，以提供所需的任何元數(shù)據(jù)。 @Component 裝飾器把該類聲明為組件，并提供了關于該組件的元數(shù)據(jù)，比如它的選擇器(或標簽)和模板。
這就是把模板關聯(lián)到代碼的方式，它定義在組件類中。
|
控制器函數(shù)
function MovieListCtrl(movieService) {
}
在 AngularJS 中，你在控制器函數(shù)中編寫模型和方法的代碼。
|
組件類
export class MovieListComponent {
}
在 Angular 中，你將創(chuàng)建一個組件類來容納數(shù)據(jù)模型和控制方法。使用 TypeScript 的 export 關鍵字導出該類，以便可以將此功能導入 NgModules 中。
|
依賴注入
MovieListCtrl.$inject = ['MovieService'];
function MovieListCtrl(movieService) {
}
在 AngularJS 中，你把所有依賴都作為控制器函數(shù)的參數(shù)。 這個例子注入了一個 MovieService。
為了防止在最小化時出現(xiàn)問題，第一個參數(shù)明確告訴 Angular 它應該注入一個 MovieService 的實例。
|
依賴注入
constructor(movieService: MovieService) {
}
在 Angular 中，你要把依賴作為組件構造函數(shù)的參數(shù)傳入。 這個例子注入了一個 MovieService。 即使在最小化之后，第一個參數(shù)的 TypeScript 類型也會告訴 Angular 它該注入什么。
|
樣式表
樣式表讓你的應用程序看起來更漂亮。 在 AngularJS 中，你要為整個應用程序指定樣式表。 隨著應用程序的不斷成長，為各個部分指定的樣式會被合并，導致無法預計的后果。 在 Angular 中，你仍然要為整個應用程序定義樣式，不過現(xiàn)在也可以把樣式表封裝在特定的組件中。
|
AngularJS
|
Angular
|
Link 標簽
<link href="styles.css" rel="stylesheet" />
AngularJS 在 index.html 的 head 區(qū)使用 link 標簽來為應用程序定義樣式。
|
樣式配置
"styles": [
"styles.css"
],
使用 Angular CLI，你可以在 angular.json 文件中配置全局樣式。 也可以把擴展名改為 .scss 來使用 sass。
StyleUrls
在 Angular 中，你可以在 @Component 的元數(shù)據(jù)中使用 styles 或 styleUrls 屬性來為一個特定的組件定義樣式表。
styleUrls: [ './movie-list.component.css' ],
這讓你可以為各個組件設置合適的樣式，而不用擔心它泄漏到程序中的其它部分。
|
更多建議：