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.
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 controller as syntax,
the binding is prefixed with the controller alias (vm or $ctrl) because you
have to be specific about the source of the binding.
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.
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.
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
<bodyng-app="movieHunter">
应用的启动过程被称为引导。
The application startup process is called bootstrapping.
Although you can bootstrap an AngularJS app in code,
many applications bootstrap declaratively with the ng-app directive,
giving it the name of the application's module (movieHunter).
Angular doesn't have a bootstrap directive.
To launch the app in code, explicitly bootstrap the application's root module (AppModule)
in main.ts
and the application's root component (AppComponent) in app.module.ts.
In AngularJS, the ng-class directive includes/excludes CSS classes
based on an expression. That expression is often a key-value control object with each
key of the object defined as a CSS class name, and each value defined as a template expression
that evaluates to a Boolean value.
在第一个例子中，当isActive为真时，active类会被应用到元素上。
In the first example, the active class is applied to the element if isActive is true.
就像第二个例子中展示的，可以指定多个CSS类。
You can specify multiple classes, as shown in the second example.
For event binding, define the name of the target event within parenthesis and
specify a template statement, in quotes, to the right of the equals. Angular then
sets up an event handler for the target event. When the event is raised, the handler
executes the template statement.
在第一个例子中，当用户点击此按钮时，相关组件中的toggleImage()方法就被执行了。
In the first example, when a user clicks the button, the toggleImage() method in the associated component is executed.
第二个例子演示了如何传入$event对象，它为组件提供了此事件的详情。
The second example demonstrates passing in the $event object, which provides details about the event
to the component.
In AngularJS, the ng-controller directive attaches a controller to the view.
Using the ng-controller (or defining the controller as part of the routing) ties the
view to the controller code associated with that view.
In Angular, the template no longer specifies its associated controller.
Rather, the component specifies its associated template as part of the component class decorator.
The ng-href directive allows AngularJS to preprocess the href property so that it
can replace the binding expression with the appropriate URL before the browser
fetches from that URL.
在AngularJS 中，ng-href通常用来作为导航的一部分，激活一个路由。
In AngularJS, the ng-href is often used to activate a route as part of navigation.
Angular uses property binding; there is no built-in href directive.
Place the element's href property in square brackets and set it to a quoted template expression.
In AngularJS, the ng-if directive removes or recreates a portion of the DOM,
based on an expression. If the expression is false, the element is removed from the DOM.
在这个例子中，除非movies数组的长度大于0，否则<table>元素就会被从DOM中移除。
In this example, the <table> element is removed from the DOM unless the movies array has a length greater than zero.
The *ngIf directive in Angular works the same as the ng-if directive in AngularJS. It removes
or recreates a portion of the DOM based on an expression.
在这个例子中，除非movies数组的长度大于0，否则<table>元素就会被从DOM中移除。
In this example, the <table> element is removed from the DOM unless the movies array has a length.
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.
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.
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.
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.
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.
在这个例子中，如果favoriteHero变量不是真值，<div>元素就会被隐藏。
In this example, the <div> element is hidden if the favoriteHero variable is not truthy.
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.
Angular 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.
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.
在这个例子中，color样式被设置为colorPreference变量的当前值。
In the example, the color style is set to the current value of the colorPreference variable.
For more information on the ngStyle directive, see NgStyle
section of the Template Syntax page.
ng-switch
<divng-switch="vm.favoriteHero &&
vm.checkMovieHero(vm.favoriteHero)"><divng-switch-when="true">
Excellent choice!
</div><divng-switch-when="false">
No movie, sorry!
</div><divng-switch-default>
Please enter your favorite hero.
</div></div>
在Angular1中，ng-switch指令根据一个表达式的当前值把元素的内容替换成几个模板之一。
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.
在这个例子中，如果favoriteHero没有设置，则模板显示“Please enter ...”。
如果favoriteHero设置过，它就会通过调用一个控制其方法来检查它是否电影里的英雄。
如果该方法返回true，模板就会显示“Excellent choice!”。
如果该方法返回false，该模板就会显示“No movie, sorry!”。
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!".
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>
In Angular, the ngSwitch directive works similarly.
It displays an element whose *ngSwitchCase matches the current ngSwitch expression value.
在这个例子中，如果favoriteHero没有设置，则ngSwitch的值是null，我们会看到
*ngSwitchDefault中的段落“Please enter ...”。
如果favoriteHero被设置了，它就会通过调用一个组件方法来检查电影英雄。
如果该方法返回true，我们就会看到“Excellent choice!”。
如果该方法返回false，我们就会看到“No movie, sorry!”。
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!"
在这个例子中，ngSwitchCase和ngSwitchDefault前面的星号(*)是必须的。
The (*) before ngSwitchCase and ngSwitchDefault is required in this example.
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
<td>{{movie.price | currency}}</td>
把一个数字格式化成货币。
Formats a number as currency.
currency
<td>{{movie.price | currency:'USD':true}}</td>
Angular的currency管道和1中很相似，只是有些参数变化了。
The Angular currency pipe is similar although some of the parameters have changed.
date
<td>{{movie.releaseDate | date}}</td>
基于要求的格式把日期格式化成字符串。
Formats a date to a string based on the requested format.
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
<pre>{{movie | json}}</pre>
把一个JavaScript对象转换成一个JSON字符串。这对调试很有用。
Converts a JavaScript object into a JSON string. This is useful for debugging.
json
<pre>{{movie | json}}</pre>
Angular的json管道做完全相同的事。
The Angular json pipe does the same thing.
limitTo
<trng-repeat="movie in movieList | limitTo:2:0">
从集合中选择从(第二参数指定的)起始索引号(0)开始的最多(第一参数指定的)条目数(2)个条目。
Selects up to the first parameter (2) number of items from the collection
starting (optionally) at the beginning index (0).
The SlicePipe does the same thing but the order of the parameters is reversed, in keeping
with the JavaScript Slice method.
The first parameter is the starting index; the second is the limit.
As in AngularJS, coding this operation within the component instead could improve performance.
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.
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.
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.
Angular adds a decorator to the component class to provide any required metadata.
The @Component decorator declares that the class is a component and provides metadata about
that component such as its selector (or tag) and its template.
这就是把模板关联到代码的方式，它定义在组件类中。
This is how you associate a template with logic, which is defined in the component class.
In Angular, you pass in dependencies as arguments to the component class constructor.
This example injects a MovieService.
The first parameter's TypeScript type tells Angular what to inject, even after minification.
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.
In Angular, you can continue to use the link tag to define the styles for your application in the index.html file.
But now you can also encapsulate styles for your components.