關於 AngularJS 與 Angular 概念的快速參考
AngularJS to Angular concepts: Quick reference
Angular 這個名字專指現在和未來的 Angular 版本,而 AngularJS 專指 Angular 的所有 v1.x 版本。
Angular is the name for the Angular of today and tomorrow. AngularJS is the name for all v1.x versions of Angular.
本章提供了一個快速的參考指南,指出一些常用的 AngularJS 語法及其在 Angular 中的等價物。
This guide helps you transition from AngularJS to Angular by mapping AngularJS syntax to the equivalent Angular syntax.
See the Angular syntax in this
範本基礎
Template basics
範本是 Angular 應用中的門面部分,它是用 HTML 寫的。下表中是一些 AngularJS 中的關鍵範本特性及其在 Angular 中的等價語法。
Templates are the user-facing part of an Angular application and are written in HTML. The following table lists some of the key AngularJS template features with their equivalent Angular template syntax.
AngularJS | Angular |
---|---|
繫結/插值Bindings/interpolation
在 AngularJS 中,花括號中的表示式代表單向繫結。 它把元素的值繫結到了與範本相關控制器的屬性上。 In AngularJS, an expression in curly braces denotes one-way binding. This binds the value of the element to a property in the controller associated with this template. 當使用 When using the | 繫結/插值Bindings/interpolation
在 Angular 中,花括號中的範本表示式同樣代表單向繫結。 它把元素的值繫結到了元件的屬性上。 它繫結的上下文變數是隱式的,並且總是關聯到元件。 所以,它不需要一個參考變數。 In Angular, a template expression in curly braces still denotes one-way binding. This binds the value of the element to a property of the component. The context of the binding is implied and is always the associated component, so it needs no reference variable. 要了解更多,請參閱插值部分。 For more information, see the Interpolation guide. |
過濾器Filters
要在 AngularJS 中過濾輸出,使用管道字元(|)以及一個或多個過濾器。 To filter output in AngularJS templates, use the pipe character (|) and one or more filters. 這個例子中把 This example filters the | 管道Pipes
在 Angular 中,你使用類似的語法 —— 用管道字元(|)來過濾輸出,但是現在直接把它叫做管道了。 很多(但不是所有)AngularJS 中的內建過濾器也成了 Angular 中的內建管道。 In Angular you use similar syntax with the pipe (|) character to filter output, but now you call them pipes. Many (but not all) of the built-in filters from AngularJS are built-in pipes in Angular. 請參閱下面過濾器/管道瞭解更多資訊。 For more information, see Filters/pipes below. |
區域性變數Local variables
這裡的 Here, | 輸入變數Input variables
Angular 有了真正的範本輸入變數,它需要使用 Angular has true template input variables that are explicitly defined using the For more information, see the ngFor micro-syntax section of the Built-in Directives page. |
範本指令
Template directives
AngularJS 為範本提供了七十多個內建指令。 在 Angular 中,它們很多都已經不需要了,因為 Angular 有了一個更加強大、快捷的繫結系統。 下面是一些 AngularJS 中的關鍵指令及其在 Angular 中的等價物。
AngularJS provides more than seventy built-in directives for templates. Many of them aren't needed in Angular because of its more capable and expressive binding system. The following are some of the key AngularJS built-in directives and their equivalents in Angular.
AngularJS | Angular |
---|---|
ng-app
應用的啟動過程被稱為引導。 The application startup process is called bootstrapping. 雖然可以從程式碼中引導 Angular 應用, 但很多應用都是透過 Although you can bootstrap an AngularJS app in code, many applications bootstrap declaratively with the | 引導Bootstrapping
Angular 沒有引導指令。 總是要透過顯式呼叫一個 Angular doesn't have a bootstrap directive. To launch the app in code, explicitly bootstrap the application's root module ( |
ng-class
在 AngularJS 中, In AngularJS, the 在第一個例子中,如果 In the first example, the 就像第二個例子中所展示的那樣,可以同時指定多個類別。 You can specify multiple classes, as shown in the second example. | ngClass
在 Angular 中, In Angular, the 在第一個例子中,如果 In the first example, the 就像第二個例子中所展示的那樣,可以同時指定多個類別。 You can specify multiple classes, as shown in the second example. Angular 還有類別繫結,它是單獨新增或移除一個類別的好辦法 —— 就像第三個例子中展示的。 Angular also has class binding, which is a good way to add or remove a single class, as shown in the third example. 要了解更多資訊,參閱屬性(Attribute)繫結、類別繫結和樣式繫結部分。 For more information see Attribute, class, and style bindings page. |
ng-click
在 AngularJS 中, In AngularJS, the 在第一個例子中,如果使用者點選了這個按鈕,那麼控制器的 In the first example, when the user clicks the button, the 第二個例子示範了傳入 The second example demonstrates passing in the | 繫結到 |
ng-controller
在 AngularJS 中, In AngularJS, the | 元件裝飾器Component decorator
在 Angular 中,範本不用再指定它相關的控制器。 反過來,元件會在元件類別的裝飾器中指定與它相關的範本。 In Angular, the template no longer specifies its associated controller. Rather, the component specifies its associated template as part of the component class decorator. 要了解更多,請參閱架構概覽。 For more information, see Architecture Overview. |
ng-hide在 AngularJS 中, In AngularJS, the | 繫結到 |
ng-href
The 在 AngularJS 中, In AngularJS, the
路由在 Angular 中的處理方式不同。 Routing is handled differently in Angular. | 繫結到 |
ng-if
在 AngularJS 中, In AngularJS, the 在這個例子中,除非 In this example, the | *ngIf
Angular 中的 The 在這個例子中,除非 In this example, the 在這個例子中 The (*) before |
ng-model
在 AngularJS 中, In AngularJS, the | ngModel
在 Angular 中,雙向繫結使用[()]標記出來,它被形象的比作“盒子中的香蕉”。 這種語法是一個簡寫形式,用來同時定義一個屬性繫結(從元件到檢視)和一個事件繫結(從檢視到元件),就成了雙向繫結。 In Angular, two-way binding is denoted by 要了解使用 ngModel 進行雙向繫結的更多知識,參閱內建指令中的 For more information on two-way binding with |
ng-repeat
在 AngularJS 中, In AngularJS, the 在這個例子中,對 In this example, the table row ( | *ngFor
Angular 中的 The 請注意其它語法上的差異: 在 Notice the other syntax differences: The (*) before 要了解更多資訊,參閱結構性指令。 For more information, see Structural Directives. |
ng-show
在 AngularJS 中, In AngularJS, the 在這個例子中,如果 In this example, the | 繫結到 |
ng-src
The | 繫結到 |
ng-style
在 AngularJS 中, In AngularJS, the 在這個例子中, In the example, the | ngStyle
在 Angular 中, In Angular, the 在第一個例子中, In the first example, the Angular 還有樣式繫結語法,它是單獨設定一個樣式的好方法。它展示在第二個例子中。 Angular also has style binding, which is good way to set a single style. This is shown in the second example. 要了解關於樣式繫結的更多知識,參閱屬性繫結中的樣式繫結部分。 For more information on style binding, see the Style binding section of the Attribute binding page. 要了解關於 For more information on the |
ng-switch
在 AngularJS 中, In AngularJS, the 在這個例子中,如果 In this example, if | ngSwitch
在 Angular 中, In Angular, the 在這個例子中,如果 In this example, if 在這個例子中, The (*) before 要了解更多資訊,參閱內建指令中的NgSwitch 指令部分。 For more information, see The NgSwitch directives section of the Built-in directives page. |
過濾器/管道
Filters/pipes
Angular 中的管道為範本提供了格式化和資料轉換功能,類似於 AngularJS 中的過濾器。 AngularJS 中的很多內建過濾器在 Angular 中都有對應的管道。 要了解管道的更多資訊,參閱Pipes。
Angular pipes provide formatting and transformation for data in the template, similar to AngularJS filters. Many of the built-in filters in AngularJS have corresponding pipes in Angular. For more information on pipes, see Pipes.
AngularJS | Angular |
---|---|
currency
把一個數字格式化成貨幣。 Formats a number as currency. | currency
Angular 的 The Angular |
date
基於要求的格式把日期格式化成字串。 Formats a date to a string based on the requested format. | date
Angular 的 The Angular |
filter
根據過濾條件從指定的集合中選取出一個子集。 Selects a subset of items from the defined collection, based on the filter criteria. | 沒了none在 Angular 中,出於效能的考慮,並沒有一個類似的管道。 過濾邏輯應該在元件中用程式碼實現。 如果它將被複用在幾個範本中,可以考慮建構一個自訂管道。 For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe. |
json
把一個 JavaScript 物件轉換成一個 JSON 字串。這對除錯很有用。 Converts a JavaScript object into a JSON string. This is useful for debugging. | json
Angular 的 The Angular |
limitTo
從集合中選擇從(第二引數指定的)起始索引號(0)開始的最多(第一引數指定的)條目數(2)個條目。 Selects up to the first parameter (2) number of items from the collection starting (optionally) at the beginning index (0). | slice
The |
lowercase
把該字串轉成小寫形式。 Converts the string to lowercase. | lowercase
Angular 的 The Angular |
number
把數字格式化為文字。 Formats a number as text. | number
Angular 的 The Angular Angular 還有一個 Angular also has a |
orderBy
使用表示式中所指定的方式對集合進行排序。 在這個例子中, Displays the collection in the order specified by the expression. In this example, the movie title orders the | 沒了none在 Angular 中,出於效能的考慮,並沒有一個類似的管道。 排序邏輯應該在元件中用程式碼實現。 如果它將被複用在幾個範本中,可以考慮建構一個自訂管道。 For performance reasons, no comparable pipe exists in Angular. Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe. |
模組/控制器/元件
Modules/controllers/components
無論在 AngularJS 還是 Angular 中,“模組”都會幫你把應用拆分成一些內聚的功能塊。
In both AngularJS and Angular, modules help you organize your application into cohesive blocks of functionality.
在 AngularJS 中,你要在控制器中寫程式碼,來為檢視提供模型和方法。 在 Angular 中,你要建立元件。
In AngularJS, you write the code that provides the model and the methods for the view in a controller. In Angular, you build a component.
因為很多 AngularJS 的程式碼是用 JavaScript 寫的,所以在 AngularJS 列顯示的是 JavaScript 程式碼,而 Angular 列顯示的是 TypeScript 程式碼。
Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column. The Angular code is shown using TypeScript.
AngularJS | Angular |
---|---|
IIFE
在 AngularJS 中,用立即呼叫的函式表示式(IIFE)來包裹控制器程式碼可以讓控制器程式碼不會汙染全域性名稱空間。 In AngularJS, an immediately invoked function expression (or IIFE) around controller code keeps it out of the global namespace. | 沒了none在 Angular 中不用擔心這個問題,因為使用 ES 2015 的模組,模組會替你處理名稱空間問題。 This is a nonissue in Angular because ES 2015 modules handle the namespacing for you. For more information on modules, see the Modules section of the Architecture Overview. |
Angular 模組Angular modules
在 AngularJS 中,Angular 模組用來對控制器、服務和其它程式碼進行追蹤。第二個引數定義該模組依賴的其它模組列表。 In AngularJS, an Angular module keeps track of controllers, services, and other code. The second argument defines the list of other modules that this module depends upon. | NgModules
Angular 的模組用 NgModules, defined with the * * 要了解關於模組的更多知識,參閱NgModules。 For more information on modules, see NgModules. |
控制器註冊Controller registration
在 AngularJS 中,在每個控制器中都有一些程式碼,用於找到合適的 Angular 模組並把該控制器註冊進去。 AngularJS has code in each controller that looks up an appropriate Angular module and registers the controller with that module. 第一個引數是控制器的名稱,第二個引數定義了所有將注入到該控制器的依賴的字串名稱,以及一個到控制器函式的參考。 The first argument is the controller name. The second argument defines the string names of all dependencies injected into this controller, and a reference to the controller function. | 元件裝飾器Component decorator
Angular 會往元件類別上添加了一個裝飾器,以提供所需的任何元資料。 Angular adds a decorator to the component class to provide any required metadata. The 這就是把範本關聯到程式碼的方式,它定義在元件類別中。 This is how you associate a template with logic, which is defined in the component class. For more information, see the Components section of the Architecture Overview page. |
控制器函式Controller function
在 AngularJS 中,你在控制器函式中編寫模型和方法的程式碼。 In AngularJS, you write the code for the model and methods in a controller function. | 元件類別Component class
在 Angular 中,你將建立一個元件類別來容納資料模型和控制方法。使用 TypeScript 的 In Angular, you create a component class to contain the data model and control methods. Use the TypeScript For more information, see the Components section of the Architecture Overview page. |
依賴注入Dependency injection
在 AngularJS 中,你把所有依賴都作為控制器函式的引數。 這個例子注入了一個 In AngularJS, you pass in any dependencies as controller function arguments. This example injects a 為了防止在最小化時出現問題,第一個引數明確告訴 Angular 它應該注入一個 To guard against minification problems, tell Angular explicitly that it should inject an instance of the | 依賴注入Dependency injection
在 Angular 中,你要把依賴作為元件建構函式的引數傳入。 這個例子注入了一個 In Angular, you pass in dependencies as arguments to the component class constructor. This example injects a 要了解關於依賴注入的更多資訊,參閱架構概覽中的依賴注入部分。 For more information, see the Dependency injection section of the Architecture Overview. |
樣式表
Style sheets
樣式表讓你的應用程式看起來更漂亮。 在 AngularJS 中,你要為整個應用程式指定樣式表。 隨著應用程式的不斷成長,為各個部分指定的樣式會被合併,導致無法預計的後果。 在 Angular 中,你仍然要為整個應用程式定義樣式,不過現在也可以把樣式表封裝在特定的元件中。
Style sheets give your application a nice look. In AngularJS, you specify the style sheets for your entire application. As the application grows over time, the styles for the many parts of the application merge, which can cause unexpected results. In Angular, you can still define style sheets for your entire application. But now you can also encapsulate a style sheet within a specific component.
AngularJS | Angular |
---|---|
Link 標籤Link tag
AngularJS 在 AngularJS, uses a | 樣式配置Styles configuration
使用 Angular CLI,你可以在 With the Angular CLI, you can configure your global styles in the StyleUrls在 Angular 中,你可以在 In Angular, you can use the
這讓你可以為各個元件設定合適的樣式,而不用擔心它洩漏到程式中的其它部分。 This allows you to set appropriate styles for individual components that won’t leak into other parts of the application. |