In AngularJS, the ng-model
directive binds a form control to a property in the controller associated with the template. This provides two-way binding, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view.
在 Angular1 中,ng-model
指令把一个表单控件绑定到了模板相关控制器的一个属性上。 这提供了双向绑定功能,因此,任何对视图中值的改动,都会同步到模型中,对模型的改动,也会同步到视图中。
In Angular, two-way binding is denoted by [()]
, descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view) and event binding (from the view to the component), thereby providing two-way binding.
在 Angular 中,双向绑定使用[()]标记出来,它被形象的比作“盒子中的香蕉”。 这种语法是一个简写形式,用来同时定义一个属性绑定(从组件到视图)和一个事件绑定(从视图到组件),就成了双向绑定。
For more information on two-way binding with ngModel
, see the NgModel—Two-way binding to form elements with [(ngModel)]
section of the Template Syntax page.
要了解使用 ngModel 进行双向绑定的更多知识,参见模板语法中的NgModel—使用 [(ngModel)]
进行双向绑定部分。
In AngularJS, the ng-repeat
directive repeats the associated DOM element for each item in the specified collection.
在 Angular1 中,ng-repeat
指令会为指定集合中的每一个条目重复渲染相关的 DOM 元素。
In this example, the table row (<tr>
) element repeats for each movie object in the collection of movies.
在这个例子中,对 movies
集合中的每一个 movie
对象重复渲染了这个表格行元素(<tr>
)。
The *ngFor
directive in Angular is similar to the ng-repeat
directive in AngularJS. It repeats the associated DOM element for each item in the specified collection. More accurately, it turns the defined element (<tr>
in this example) and its contents into a template and uses that template to instantiate a view for each item in the list.
Angular 中的 *ngFor
指令类似于 AngularJS 中的 ng-repeat
指令。 它为指定集合中的每一个条目重复渲染了相关的 DOM 元素。 更准确的说,它把被界定出来的元素(这个例子中是 <tr>
)及其内容转成了一个模板,并使用那个模板来为列表中的每一个条目实例化一个视图。
Notice the other syntax differences: The (*) before ngFor
is required; the let
keyword identifies movie
as an input variable; the list preposition is of
, not in
.
请注意其它语法上的差异: 在 ngFor
前面的星号(*)是必须的;let
关键字把 movie
标记成一个输入变量;列表中使用的介词是 of
,而不再是 in
。
For more information, see Structural Directives.
要了解更多信息,参见结构性指令。
In AngularJS, the ng-show
directive shows or hides the associated DOM element, based on an expression.
在 AngularJS 中,ng-show
指令根据一个表达式来显示或隐藏相关的 DOM 元素。
In this example, the <div>
element is shown if the favoriteHero
variable is truthy.
在这个例子中,如果 favoriteHero
变量为真,<div>
元素就会显示出来。
hidden
propertylinkhidden
属性linkAngular uses property binding; there is no built-in show directive. For hiding and showing elements, bind to the HTML hidden
property.
在 Angular 中,并没有内置的 show 指令,可以改用属性绑定。 要隐藏或显示一个元素,绑定到它的 hidden
属性就可以了。
To conditionally display an element, place the element's hidden
property in square brackets and set it to a quoted template expression that evaluates to the opposite of show.
要想有条件的显示一个元素,就把该元素的 hidden
属性放到一个方括号里,并且把它设置为引号中的模板表达式,它的结果应该是与显示时相反的值。
In this example, the <div>
element is hidden if the favoriteHero
variable is not truthy.
在这个例子中,如果 favoriteHero
变量不是真值,<div>
元素就会被隐藏。
For more information on property binding, see the Property binding section of the Template Syntax page.
The ng-src
directive allows AngularJS to preprocess the src
property so that it can replace the binding expression with the appropriate URL before the browser fetches from that URL.
ng-src
指令允许 AngularJS 对 src
属性进行预处理,以便它能够在浏览器获取此 URL 之前,用一个返回适当 URL 的绑定表达式替换它。
src
propertylinksrc
属性linkAngular uses property binding; there is no built-in src directive. Place the src
property in square brackets and set it to a quoted template expression.
在 Angular 中,并没有一个内置的 src 指令,可以使用属性绑定。 把 src
属性放到方括号中,并且把它设为一个引号中的绑定表达式。
For more information on property binding, see the Property binding section of the Template Syntax page.
In AngularJS, the ng-style
directive sets a CSS style on an HTML element based on an expression. That expression is often a key-value control object with each key of the object defined as a CSS property, and each value defined as an expression that evaluates to a value appropriate for the style.
在 AngularJS 中,ng-style
指令根据一个绑定表达式设置一个 HTML 元素的 CSS 样式。 该表达式通常是一个“键-值”形式的控制对象,对象的每个键都是一个 CSS 属性,每个值都是一个能计算为此样式的合适值的表达式。
In the example, the color
style is set to the current value of the colorPreference
variable.
在这个例子中,color
样式被设置为 colorPreference
变量的当前值。
In Angular, the ngStyle
directive works similarly. It sets a CSS style on an HTML element based on an expression.
在 Angular 中,ngStyle
指令的工作方式与此类似。它根据一个表达式设置 HTML 元素上的 CSS 样式。
In the first example, the color
style is set to the current value of the colorPreference
variable.
在第一个例子中,color
样式被设置成了 colorPreference
变量的当前值。
Angular also has style binding, which is good way to set a single style. This is shown in the second example.
Angular 还有样式绑定语法,它是单独设置一个样式的好方法。它展示在第二个例子中。
For more information on style binding, see the Style binding section of the Template Syntax page.
For more information on the ngStyle
directive, see NgStyle section of the Template Syntax page.
In AngularJS, the ng-switch
directive swaps the contents of an element by selecting one of the templates based on the current value of an expression.
在 Angular1 中,ng-switch
指令根据一个表达式的当前值把元素的内容替换成几个模板之一。
In this example, if favoriteHero
is not set, the template displays "Please enter ...". If favoriteHero
is set, it checks the movie hero by calling a controller method. If that method returns true
, the template displays "Excellent choice!". If that methods returns false
, the template displays "No movie, sorry!".
在这个例子中,如果 favoriteHero
没有设置,则模板显示“Please enter ...”。 如果 favoriteHero
设置过,它就会通过调用一个控制其方法来检查它是否电影里的英雄。 如果该方法返回 true
,模板就会显示“Excellent choice!”。 如果该方法返回 false
,该模板就会显示“No movie, sorry!”。
In Angular, the ngSwitch
directive works similarly. It displays an element whose *ngSwitchCase
matches the current ngSwitch
expression value.
在 Angular 中,ngSwitch
指令的工作方式与此类似。 它会显示那个与 ngSwitch
表达式的当前值匹配的那个 *ngSwitchCase
所在的元素。
In this example, if favoriteHero
is not set, the ngSwitch
value is null
and *ngSwitchDefault
displays, "Please enter ...". If favoriteHero
is set, the app checks the movie hero by calling a component method. If that method returns true
, the app selects *ngSwitchCase="true"
and displays: "Excellent choice!" If that methods returns false
, the app selects *ngSwitchCase="false"
and displays: "No movie, sorry!"
在这个例子中,如果 favoriteHero
没有设置,则 ngSwitch
的值是 null
, *ngSwitchDefault
中会显示 “Please enter ...”。 如果设置了 favoriteHero
,应用就会通过调用一个组件方法来检查电影英雄。 如果该方法返回 true
,就会显示 “Excellent choice!”。 如果该方法返回 false
,就会显示 “No movie, sorry!”。
The (*) before ngSwitchCase
and ngSwitchDefault
is required in this example.
在这个例子中,ngSwitchCase
和 ngSwitchDefault
前面的星号(*)是必须的。
For more information, see The NgSwitch directives section of the Template Syntax page.
要了解更多信息,参见模板语法中的NgSwitch 指令部分。
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.
Angular 中的管道为模板提供了格式化和数据转换功能,类似于 AngularJS 中的过滤器。 AngularJS 中的很多内置过滤器在 Angular 中都有对应的管道。 要了解管道的更多信息,参见Pipes。
AngularJS | Angular |
---|---|
currencyFormats a number as currency. 把一个数字格式化成货币。 | currencyThe Angular Angular 的 |
dateFormats a date to a string based on the requested format. 基于要求的格式把日期格式化成字符串。 | dateThe Angular Angular 的 |
filterSelects a subset of items from the defined collection, based on the filter criteria. 基于过滤条件从指定的集合中选取出一个子集。 | none没了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. 在 Angular 中,出于性能的考虑,并没有一个类似的管道。 过滤逻辑应该在组件中用代码实现。 如果它将被复用在几个模板中,可以考虑构建一个自定义管道。 |
jsonConverts a JavaScript object into a JSON string. This is useful for debugging. 把一个 JavaScript 对象转换成一个 JSON 字符串。这对调试很有用。 | jsonThe Angular Angular 的 |
limitToSelects up to the first parameter (2) number of items from the collection starting (optionally) at the beginning index (0). 从集合中选择从(第二参数指定的)起始索引号(0)开始的最多(第一参数指定的)条目数(2)个条目。 | sliceThe |
lowercaseConverts the string to lowercase. 把该字符串转成小写形式。 | lowercaseThe Angular Angular 的 |
numberFormats a number as text. 把数字格式化为文本。 | numberThe Angular Angular 的 Angular also has a Angular 还有一个 |
orderByDisplays the collection in the order specified by the expression. In this example, the movie title orders the 使用表达式中所指定的方式对集合进行排序。 在这个例子中, | none没了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. 在 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 中,你要在控制器中写代码,来为视图提供模型和方法。 在 Angular 中,你要创建组件。
Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column. The Angular code is shown using TypeScript.
因为很多 AngularJS 的代码是用 JavaScript 写的,所以在 AngularJS 列显示的是 JavaScript 代码,而 Angular 列显示的是 TypeScript 代码。
AngularJS | Angular |
---|---|
IIFEIn AngularJS, an immediately invoked function expression (or IIFE) around controller code keeps it out of the global namespace. 在 AngularJS 中,用立即调用的函数表达式(IIFE)来包裹控制器代码可以让控制器代码不会污染全局命名空间。 | none没了This is a nonissue in Angular because ES 2015 modules handle the namespacing for you. 在 Angular 中不用担心这个问题,因为使用 ES 2015 的模块,模块会替你处理命名空间问题。 For more information on modules, see the Modules section of the Architecture Overview. |
Angular modulesAngular 模块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. 在 AngularJS 中,Angular 模块用来对控制器、服务和其它代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。 | NgModulesNgModules, defined with the Angular 的模块用 * * For more information on modules, see NgModules. 要了解关于模块的更多知识,参见NgModules。 |
Controller registration控制器注册AngularJS has code in each controller that looks up an appropriate Angular module and registers the controller with that module. 在 AngularJS 中,在每个控制器中都有一些代码,用于找到合适的 Angular 模块并把该控制器注册进去。 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 adds a decorator to the component class to provide any required metadata. The Angular 会往组件类上添加了一个装饰器,以提供所需的任何元数据。 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控制器函数In AngularJS, you write the code for the model and methods in a controller function. 在 Angular1 中,你在控制器函数中编写模型和方法的代码。 | Component class组件类In Angular, you create a component class. 在 Angular 中,你要创建组件类。 NOTE: If you are using TypeScript with AngularJS, you must use the 注意:如果你正在用 TypeScript 写 AngularJS,那么必须用 For more information, see the Components section of the Architecture Overview page. |
Dependency injection依赖注入In AngularJS, you pass in any dependencies as controller function arguments. This example injects a 在 AngularJS 中,你把所有依赖都作为控制器函数的参数。 这个例子注入了一个 To guard against minification problems, tell Angular explicitly that it should inject an instance of the 为了防止在最小化时出现问题,第一个参数明确告诉 Angular 它应该注入一个 | Dependency injection依赖注入In Angular, you pass in dependencies as arguments to the component class constructor. This example injects a 在 Angular 中,你要把依赖作为组件构造函数的参数传入。 这个例子注入了一个 For more information, see the Dependency injection section of the Architecture Overview. |
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 中,你仍然要为整个应用程序定义样式,不过现在也可以把样式表封装在特定的组件中。
AngularJS | Angular |
---|---|
Link tagLink 标签AngularJS, uses a AngularJS 在 | Styles configuration样式配置With the Angular CLI, you can configure your global styles in the 使用 Angular CLI,你可以在 StyleUrlsIn Angular, you can use the 在 Angular 中,你可以在 This allows you to set appropriate styles for individual components that won’t leak into other parts of the application. 这让你可以为各个组件设置合适的样式,而不用担心它被泄漏到程序中的其它部分。 |