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