AngularJS
|
Angular
|
ng-app
<body ng-app="movieHunter">
應(yīng)用的啟動過程被稱為引導(dǎo)。
雖然可以從代碼中引導(dǎo) Angular 應(yīng)用, 但很多應(yīng)用都是通過 ng-app 指令進行聲明式引導(dǎo)的,只要給它一個應(yīng)用模塊的名字(movieHunter )就可以了。
|
引導(dǎo)
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 沒有引導(dǎo)指令。 總是要通過顯式調(diào)用一個 bootstrap 函數(shù),并傳入應(yīng)用模塊的名字(AppComponent )來啟動應(yīng)用。
|
ng-class
<div ng-class="{active: isActive}">
<div ng-class="{active: isActive,
shazam: isImportant}">
在 AngularJS 中,ng-class 指令會基于一個表達(dá)式來包含/排除某些 CSS 類。該表達(dá)式通常是一個“鍵-值”型的控制對象, 對象中的每一個鍵代表一個 CSS 類名,每一個值定義為一個返回布爾值的模板表達(dá)式。
在第一個例子中,如果 isActive 為真,則 active 類被應(yīng)用到那個元素上。
就像第二個例子中所展示的那樣,可以同時指定多個類。
|
ngClass
<div [ngClass]="{'active': isActive}"> <div [ngClass]="{'active': isActive, 'shazam': isImportant}">
<div [class.active]="isActive">
在 Angular 中,ngClass 指令用類似的方式工作。 它根據(jù)一個表達(dá)式包含/排除某些 CSS 類。
在第一個例子中,如果 isActive 為真,則 active 類被應(yīng)用到那個元素上。
就像第二個例子中所展示的那樣,可以同時指定多個類。
Angular 還有類綁定,它是單獨添加或移除一個類的好辦法 —— 就像第三個例子中展示的。
|
ng-click
<button ng-click="vm.toggleImage()">
<button ng-click="vm.toggleImage($event)">
在 AngularJS 中,ng-click 指令指定當(dāng)元素被點擊時的自定義行為。
在第一個例子中,如果用戶點擊了這個按鈕,那么控制器的 toggleImage() 方法就會被執(zhí)行,這個控制器是被 controller as 中指定的 vm 別名所引用的。
第二個例子演示了傳入 $event 對象,它提供了事件的詳情,并被傳到控制器。
|
綁定到 click 事件
<button (click)="toggleImage()">
<button (click)="toggleImage($event)">
AngularJS 基于事件的指令在 Angular 中已經(jīng)不存在了。 不過,可以使用事件綁定來定義從模板視圖到組件的單向數(shù)據(jù)綁定。
要使用事件綁定,把目標(biāo)事件的名字放在圓括號中,并且使用等號右側(cè)引號中的模板語句對它賦值。 然后 Angular 為這個目標(biāo)時間設(shè)置事件處理器。當(dāng)事件被觸發(fā)時,這個處理器就會執(zhí)行模板語句。
在第一個例子中,當(dāng)用戶點擊此按鈕時,相關(guān)組件中的 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 中,模板不用再指定它相關(guān)的控制器。 反過來,組件會在組件類的裝飾器中指定與它相關(guān)的模板。
|
ng-hide
在 AngularJS 中,ng-hide 指令會基于一個表達(dá)式顯示或隱藏相關(guān)的 HTML 元素。
|
綁定到 hidden 屬性
在 Angular 中,并沒有一個內(nèi)置的 hide 指令,可以改用屬性綁定。
|
ng-href
<a ng-href="{{ angularDocsUrl }}">Angular Docs</a>
ng-href 指令允許 AngularJS 對 href 屬性進行預(yù)處理,以便它能在瀏覽器獲取那個 URL 之前,使用一個返回適當(dāng) URL 的綁定表達(dá)式替換它。
在 AngularJS 中,ng-href 通常用來作為導(dǎo)航的一部分,激活一個路由。
<a ng-href="#{{ moviesHash }}">Movies</a>
路由在 Angular 中的處理方式不同。
|
綁定到 href 屬性
<a [href]="angularDocsUrl">Angular Docs</a>
在 Angular 中,并沒有內(nèi)置的 href 指令,改用屬性綁定。 把元素的 href 屬性放在方括號中,并把它設(shè)成一個引號中的模板表達(dá)式。
在 Angular 中,href 不再用作路由,而是改用第三個例子中所展示的 routerLink 指令。
<a [routerLink]="['/movies']">Movies</a>
|
ng-if
<table ng-if="movies.length">
在 AngularJS 中,ng-if 指令會根據(jù)一個表達(dá)式來移除或重建 DOM 中的一部分。如果表達(dá)式為假,元素就會被從 DOM 中移除。
在這個例子中,除非 movies 數(shù)組的長度大于 0,否則 <table> 元素就會被從 DOM 中移除。
|
*ngIf
<table *ngIf="movies.length">
Angular 中的 *ngIf 指令與 AngularJS 中的 ng-if 指令一樣, 它根據(jù)表達(dá)式的值移除或重建 DOM 中的一部分。
在這個例子中,除非 movies 數(shù)組的長度大于 0,否則 <table> 元素就會被從 DOM 中移除。
在這個例子中 ngIf 前的星號(*)是必須的。
|
ng-model
<input ng-model="vm.favoriteHero"/>
在 AngularJS 中,ng-model 指令把一個表單控件綁定到了模板相關(guān)控制器的一個屬性上。 這提供了雙向綁定功能,因此,任何對視圖中值的改動,都會同步到模型中,對模型的改動,也會同步到視圖中。
|
ngModel
<input [(ngModel)]="favoriteHero" />
在 Angular 中,雙向綁定使用[()]標(biāo)記出來,它被形象的比作“盒子中的香蕉”。 這種語法是一個簡寫形式,用來同時定義一個屬性綁定(從組件到視圖)和一個事件綁定(從視圖到組件),就成了雙向綁定。
|
ng-repeat
<tr ng-repeat="movie in vm.movies">
在 AngularJS 中,ng-repeat 指令會為指定集合中的每一個條目重復(fù)渲染相關(guān)的 DOM 元素。
在這個例子中,對 movies 集合中的每一個 movie 對象重復(fù)渲染了這個表格行元素(<tr> )。
|
*ngFor
<tr *ngFor="let movie of movies">
Angular 中的 *ngFor 指令類似于 AngularJS 中的 ng-repeat 指令。 它為指定集合中的每一個條目重復(fù)渲染了相關(guān)的 DOM 元素。 更準(zhǔn)確的說,它把被界定出來的元素(這個例子中是 <tr> )及其內(nèi)容轉(zhuǎn)成了一個模板,并使用那個模板來為列表中的每一個條目實例化一個視圖。
請注意其它語法上的差異: 在 ngFor 前面的星號(*)是必須的;let 關(guān)鍵字把 movie 標(biāo)記成一個輸入變量;列表中使用的介詞是 of ,而不再是 in 。
|
ng-show
<h3 ng-show="vm.favoriteHero">
Your favorite hero is: {{vm.favoriteHero}}
</h3>
在 AngularJS 中,ng-show 指令根據(jù)一個表達(dá)式來顯示或隱藏相關(guān)的 DOM 元素。
在這個例子中,如果 favoriteHero 變量為真,<div> 元素就會顯示出來。
|
綁定到 hidden 屬性
<h3 [hidden]="!favoriteHero">
Your favorite hero is: {{favoriteHero}}
</h3>
在 Angular 中,并沒有內(nèi)置的 show 指令,可以改用屬性綁定。 要隱藏或顯示一個元素,綁定到它的 hidden 屬性就可以了。
要想有條件的顯示一個元素,就把該元素的 hidden 屬性放到一個方括號里,并且把它設(shè)置為引號中的模板表達(dá)式,它的結(jié)果應(yīng)該是與顯示時相反的值。
在這個例子中,如果 favoriteHero 變量不是真值,<div> 元素就會被隱藏。
|
ng-src
<img ng-src="{{movie.imageurl}}">
ng-src 指令允許 AngularJS 對 src 屬性進行預(yù)處理,以便它能夠在瀏覽器獲取此 URL 之前,用一個返回適當(dāng) URL 的綁定表達(dá)式替換它。
|
綁定到 src 屬性
<img [src]="movie.imageurl">
在 Angular 中,并沒有一個內(nèi)置的 src 指令,可以使用屬性綁定。 把 src 屬性放到方括號中,并且把它設(shè)為一個引號中的綁定表達(dá)式。
|
ng-style
<div ng-style="{color: colorPreference}">
在 AngularJS 中,ng-style 指令根據(jù)一個綁定表達(dá)式設(shè)置一個 HTML 元素的 CSS 樣式。 該表達(dá)式通常是一個“鍵-值”形式的控制對象,對象的每個鍵都是一個 CSS 屬性,每個值都是一個能計算為此樣式的合適值的表達(dá)式。
在這個例子中,color 樣式被設(shè)置為 colorPreference 變量的當(dāng)前值。
|
ngStyle
<div [ngStyle]="{'color': colorPreference}"> <div [style.color]="colorPreference">
在 Angular 中,ngStyle 指令的工作方式與此類似。它根據(jù)一個表達(dá)式設(shè)置 HTML 元素上的 CSS 樣式。
在第一個例子中,color 樣式被設(shè)置成了 colorPreference 變量的當(dāng)前值。
Angular 還有樣式綁定語法,它是單獨設(shè)置一個樣式的好方法。它展示在第二個例子中。
|
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ù)一個表達(dá)式的當(dāng)前值把元素的內(nèi)容替換成幾個模板之一。
在這個例子中,如果 favoriteHero 沒有設(shè)置,則模板顯示“Please enter ...”。 如果 favoriteHero 設(shè)置過,它就會通過調(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 表達(dá)式的當(dāng)前值匹配的那個 *ngSwitchCase 所在的元素。
在這個例子中,如果 favoriteHero 沒有設(shè)置,則 ngSwitch 的值是 null , *ngSwitchDefault 中會顯示 “Please enter ...”。 如果設(shè)置了 favoriteHero ,應(yīng)用就會通過調(diào)用一個組件方法來檢查電影英雄。 如果該方法返回 true ,就會顯示
“Excellent choice!”。 如果該方法返回 false ,就會顯示 “No movie, sorry!”。
在這個例子中,ngSwitchCase 和 ngSwitchDefault 前面的星號(*)是必須的。
|
更多建議: