在Angular 1和Angular 2之间,有很多不同的概念和语法。 本章提供了一个快速的参考指南,指出一些常用的Angular 1语法及其在Angular 2中的等价物。
可到在线例子中查看Angular 2语法。
内容
本页内容覆盖了:
-
模板基础 - 绑定变量与局部变量。
-
模板指令 - 内置指令ngIf
和ngClass
。
-
过滤器/管道 - 内置过滤器(filter),在Angular 2中叫管道(pipe)。
-
Filters/pipes - built-in filters, known as pipes in Angular 2.
-
模块/控制器/组件 - Angular 2中的模块和Angular 1中的略有不同;而控制器在Angular 2中叫组件。
-
样式表 - 在Angular 2中关于CSS的更多选项。
模板基础
模板是Angular应用中的门面部分,它是用HTML写的。下表中是一些Angular 1中的关键模板特性及其在Angular 2中的等价语法。
Angular 1 | Angular 2 |
---|
绑定/插值表达式
Your favorite hero is: {{vm.favoriteHero}}
在Angular 1中,花括号中的表达式代表单向绑定。 它把元素的值绑定到了与模板相关控制器的属性上。 当使用controller as 语法时,该绑定需要用控制器的别名(vm )为前缀,这是因为我们不得不通过它来指定绑定源。 | 绑定/插值表达式
Your favorite hero is: {{favoriteHero}}
在angular 2中,花括号中的模板表达式同样代表单向绑定。 它把元素的值绑定到了组件的属性上。 它绑定的上下文变量是隐式的,并且总是关联到组件。 所以,它不需要一个引用变量。 要了解更多,请参见模板语法中的插值表达式部分。 |
过滤器
<td>{{movie.title | uppercase}}</td>
要在Angular 1中过滤输出,使用管道字符(|)以及一个或多个过滤器。 在这个例子中,我们把title 属性过滤成了大写形式。 | 管道
<td>{{movie.title | uppercase}}</td>
在Angular 2中,我们使用相似的语法 —— 用管道字符(|)来过滤输出,但是现在直接把它叫做管道了。 很多(但不是所有)Angular 1中的内置过滤器也成了Angular 2中的内置管道。 请参见下面过滤器/管道了解更多信息。 |
局部变量
<tr ng-repeat="movie in vm.movies">
<td>{{movie.title}}</td>
</tr>
这里的movie 是一个用户定义的局部变量 | 输入变量
<tr *ngFor="let movie of movies">
<td>{{movie.title}}</td>
</tr>
在Angular 2中,我们有了真正的模板输入变量,它需要使用let 关键字进行明确定义。 要了解更多信息,请参见模板语法中的ngFor微语法部分。 |
返回顶部
模板指令
Angular 1为模板提供了七十多个内置指令。 在Angular 2中,它们很多都已经不需要了,因为Angular 2有了一个更加强大、快捷的绑定系统。 下面是一些Angular 1中的关键指令及其在Angular 2中的等价物。
Angular 1 | Angular 2 |
---|
ng-app
<body ng-app="movieHunter">
应用的启动过程被称为引导。 虽然可以从代码中引导Angular 1应用, 但很多应用都是通过ng-app 指令进行声明式引导的,只要给它一个应用模块的名字(movieHunter )就可以了。 | 引导
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app.module.ts
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 2没有引导指令。 我们总是通过显式调用一个bootstrap 函数,并传入应用模块的名字(AppComponent )来启动应用。 要了解更多,参见搭建本地开发环境。 |
ng-class
<div ng-class="{active: isActive}">
<div ng-class="{active: isActive,
shazam: isImportant}">
在Angular 1中,ng-class 指令会基于一个表达式来包含/排除某些CSS类。该表达式通常是一个“键-值”型的控制对象, 对象中的每一个键代表一个CSS类名,每一个值定义为一个返回布尔值的模板表达式。 在第一个例子中,当isActive 为真时,active 类会被应用到元素上。 就像第二个例子中展示的,可以指定多个CSS类。 | ngClass
<div [ngClass]="{active: isActive}">
<div [ngClass]="{active: isActive,
shazam: isImportant}">
<div [class.active]="isActive">
在Angular 2中,ngClass 指令用类似的方式工作。 它根据一个表达式包含/排除某些CSS类。 在第一个例子中,如果isActive 为真,则active 类被应用到那个元素上。 就像第二个例子中所展示的那样,可以同时指定多个类。 Angular 2还有类绑定,它是单独添加或移除一个类的好办法 —— 就像第三个例子中展示的。 要了解更多信息,参见模板语法中的属性、CSS类和样式绑定部分。 |
ng-click
<button ng-click="vm.toggleImage()">
<button ng-click="vm.toggleImage($event)">
在Angular 1中,ng-click 指令指定当元素被点击时的自定义行为。 在第一个例子中,如果用户点击了这个按钮,那么控制器的toggleImage() 方法就会被执行,这个控制器是被controller as 中指定的vm 别名所引用的。 第二个例子演示了传入$event 对象,它提供了事件的详情,并被传到控制器。 | 绑定到click 事件
<button (click)="toggleImage()">
<button (click)="toggleImage($event)">
Angular 1基于事件的指令在Angular 2中已经不存在了。 不过,可以使用事件绑定来定义从模板视图到组件的单向数据绑定。 要使用事件绑定,把目标事件的名字放在圆括号中,并且使用等号右侧引号中的模板语句对它赋值。 然后Angular 2为这个目标时间设置事件处理器。当事件被触发时,这个处理器就会执行模板语句。 在第一个例子中,当用户点击此按钮时,相关组件中的toggleImage() 方法就被执行了。 第二个例子演示了如何传入$event 对象,它为组件提供了此事件的详情。 要查看DOM事件的列表,请参见网络事件。 要了解更多,请参见模板语法中的事件绑定部分。 |
ng-controller
<div ng-controller="MovieListCtrl as vm">
在Angular 1中,ng-controller 指令把控制器附加到视图上。 使用ng-controller (或把控制器定义为路由的一部分)把视图及其控制器的代码联系在一起。 | Component装饰器
@Component({
moduleId: module.id,
selector: 'movie-list',
templateUrl: 'movie-list.component.html',
styleUrls: [ 'movie-list.component.css' ],
})
在Angular 2中,模板不用再指定它相关的控制器。 反过来,组件会在组件类的装饰器中指定与它相关的模板。 要了解更多,请参见架构概览。 |
ng-hide 在Angular 1中,ng-hide 指令会基于一个表达式显示或隐藏相关的HTML元素。 参见ng-show了解更多。 | 绑定hidden 属性 在Angular 2中,并没有一个内置的hide指令,可以改用属性绑定。 参见ng-show了解更多。 |
ng-href
<a ng-href="angularDocsUrl">Angular Docs</a>
ng-href 指令允许Angular 1对href 属性进行预处理,以便它能在浏览器获取那个URL之前,使用一个返回适当URL的绑定表达式替换它。 在Angular 1中,ng-href 通常用来作为导航的一部分,激活一个路由。
<a ng-href="#movies">Movies</a>
路由在Angular 2中的处理方式不同。 | 绑定到href 属性
<a [href]="angularDocsUrl">Angular Docs</a>
在Angular 2中,并没有内置的href指令,改用属性绑定。 我们把元素的href 属性放在方括号中,并把它设成一个引号中的模板表达式。 要了解属性绑定的更多知识,参见模板语法。 在Angular 2中,href 不再用作路由,而是改用第三个例子中所展示的routerLink 指令。
<a [routerLink]="['/movies']">Movies</a>
要了解关于路由的更多信息,请参见路由与导航。 |
ng-if
<table ng-if="movies.length">
在Angular 1中,ng-if 指令会根据一个表达式来移除或重建DOM中的一部分。如果表达式为假,元素就会被从DOM中移除。 在这个例子中,除非movies 数组的长度大于0,否则table 元素就会被从DOM中移除。 | *ngIf
<table *ngIf="movies.length">
Angular 2中的*ngIf 指令与Angular 1中的ng-if 指令一样, 它根据表达式的值移除或重建DOM中的一部分。 在这个例子中,除非movies 数组的长度大于0,否则table 元素就会被从DOM中移除。 在这个例子中ngIf 前的星号(*)是必须的。 要了解更多信息,参见结构型指令。 |
ng-model
<input ng-model="vm.favoriteHero"/>
在Angular1中,ng-model 指令把一个表单控件绑定到了模板相关控制器的一个属性上。 这提供了双向绑定功能,因此,任何对视图中值的改动,都会同步到模型中,对模型的改动,也会同步到视图中。 | ngModel
<input [(ngModel)]="favoriteHero" />
在Angular 2中,双向绑定使用[()]标记出来,它被形象的比作“盒子中的香蕉”。 这种语法是一个简写形式,用来同时定义一个属性绑定(从组件到视图)和一个事件绑定(从视图到组件),因此,我们得到了双向绑定。 要了解使用ngModel进行双向绑定的更多知识,参见模板语法。 |
ng-repeat
<tr ng-repeat="movie in vm.movies">
在Angular1中,ng-repeat 指令会为指定集合中的每一个条目重复渲染相关的DOM元素。 在这个例子中,对movies 集合中的每一个movie 对象重复渲染了这个表格行元素(tr )。 | *ngFor
<tr *ngFor="let movie of movies">
Angular 2中的*ngFor 指令类似于Angular 1中的ng-repeat 指令。 它为指定集合中的每一个条目重复渲染了相关的DOM元素。 更准确的说,它把被界定出来的元素(这个例子中是tr )及其内容转成了一个模板,并使用那个模板来为列表中的每一个条目实例化一个视图。 请注意其它语法上的差异: 在ngFor 前面的星号(*)是必须的;let 关键字把movie 标记成一个输入变量;列表中使用的介词是of ,而不再是in 。 要了解更多信息,参见结构性指令。 |
ng-show
<h3 ng-show="vm.favoriteHero">
Your favorite hero is: {{vm.favoriteHero}}
</h3>
在Angular 1中,ng-show 指令根据一个表达式来显示或隐藏相关的DOM元素。 在这个例子中,如果favoriteHero 变量为真,div 元素就会显示出来。 | 绑定到hidden 属性
<h3 [hidden]="!favoriteHero">
Your favorite hero is: {{favoriteHero}}
</h3>
在Angular 2中,并没有内置的show指令,可以改用属性绑定。 要隐藏或显示一个元素,绑定到它的hidden 属性就可以了。 要想有条件的显示一个元素,就把该元素的hidden 属性放到一个方括号里,并且把它设置为引号中的模板表达式,它的结果应该是与显示时相反的值。 在这个例子中,如果favoriteHero 变量不是真值,div 元素就会被隐藏。 要了解关于属性绑定的更多信息,参见模板表达式。 |
ng-src
<img ng-src="{{movie.imageurl}}">
ng-src 指令允许Angular 1对src 属性进行预处理,以便它能够在浏览器获取此URL之前,用一个返回适当URL的绑定表达式替换它。 | 绑定到src 属性
<img [src]="movie.imageurl">
在Angular 2中,并没有一个内置的src指令,可以使用属性绑定。 把src 属性放到方括号中,并且把它设为一个引号中的绑定表达式。 要了解属性绑定的更多知识,参见模板语法。 |
ng-style
<div ng-style="{color: colorPreference}">
在Angular 1中,ng-style 指令根据一个绑定表达式设置一个HTML元素的CSS样式。 该表达式通常是一个“键-值”形式的控制对象,对象的每个键都是一个CSS的样式名,每个值都是一个能计算为此样式的合适值的表达式。 在这个例子中,color 样式被设置为colorPreference 变量的当前值。 | ngStyle
<div [ngStyle]="{color: colorPreference}">
<div [style.color]="colorPreference">
在Angular 2中,ngStyle 指令的工作方式与此类似。它根据一个表达式设置HTML元素上的CSS样式。 在第一个例子中,color 样式被设置成了colorPreference 变量的当前值。 Angular 2还有样式绑定语法,它是单独设置一个样式的好方法。它展示在第二个例子中。 要了解样式绑定的更多知识,参见模板语法。 要了解关于ngStyle指令的更多知识,参见模板语法。 |
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>
在Angular1中,ng-switch 指令根据一个表达式的当前值把元素的内容替换成几个模板之一。 在这个例子中,如果favoriteHero 没有设置,则模板显示“Please enter ...”。 如果favoriteHero 设置过,它就会通过调用一个控制其方法来检查它是否电影里的英雄。 如果该方法返回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 2中,ngSwitch 指令的工作方式与此类似。 它会显示那个与ngSwitch 表达式的当前值匹配的那个*ngSwitchCase 所在的元素。 在这个例子中,如果favoriteHero 没有设置,则ngSwitch 的值是null ,我们会看到 *ngSwitchDefault 中的段落“Please enter ...”。 如果favoriteHero 被设置了,它就会通过调用一个组件方法来检查电影英雄。 如果该方法返回true ,我们就会看到“Excellent choice!”。 如果该方法返回false ,我们就会看到“No movie, sorry!”。 在这个例子中,ngSwitchCase 和ngSwitchDefault 前面的星号(*)是必须的。 要了解关于ngswitch指令的更多信息,参见模板语法。 |
回到顶部
过滤器/管道
Angular 2中的管道为模板提供了格式化和数据转换功能,类似于Angular 1中的过滤器。 Angular 1中的很多内置过滤器在Angular 2中都有对应的管道。 要了解管道的更多信息,参见Pipes。
Angular 1 | Angular 2 |
---|
currency
<td>{{movie.price | currency}}</td>
把一个数字格式化成货币。 | currency
<td>{{movie.price | currency:'USD':true}}</td>
Angular 2的currency 管道和1中很相似,只是有些参数变化了。 |
date
<td>{{movie.releaseDate | date}}</td>
基于要求的格式把日期格式化成字符串。 | date
<td>{{movie.releaseDate | date}}</td>
Angular 2的date 管道和·中很相似。参见备注来了解字符串日期值。 |
filter
<tr ng-repeat="movie in movieList | filter: {title:listFilter}">
基于过滤条件从指定的集合中选取出一个子集。 | 没了 在Angular 2中,出于性能的考虑,并没有一个类似的管道。 过滤逻辑应该在组件中用代码实现。 如果它将被复用在几个模板中,可以考虑构建一个自定义管道。 |
json
<pre>{{movie | json}}</pre>
把一个JavaScript对象转换成一个JSON字符串。这对调试很有用。 | json
<pre>{{movie | json}}</pre>
Angular 2的json 管道做完全相同的事。 |
limitTo
<tr ng-repeat="movie in movieList | limitTo:2:0">
从集合中选择从(第二参数指定的)起始索引号(0)开始的最多(第一参数指定的)条目数(2)个条目。 | slice
<tr *ngFor="let movie of movies | slice:0:2">
SlicePipe 做同样的事,但是两个参数的顺序是相反的,以便于JavaScript中的slice 方法保持一致。 第一个参数是起始索引号,第二个参数是限制的数量。 和Angular 1中一样,如果们改用组件中的代码实现此操作,性能将会提升。 |
lowercase
<div>{{movie.title | lowercase}}</div>
把该字符串转成小写形式。 | lowercase
<td>{{movie.title | lowercase}}</td>
Angular 2的lowercase 管道和1中的功能完全相同。 |
number
<td>{{movie.starRating | number}}</td>
把数字格式化为文本。 | number
<td>{{movie.starRating | number}}</td>
<td>{{movie.starRating | number:'1.1-2'}}</td>
<td>{{movie.approvalRating | percent: '1.0-2'}}</td>
Angular 2的number 管道很相似。 但在指定小数点位置时,它提供了更多的功能,如第二个范例所示。 Angular 2还有一个percent 管道,它把一个数组格式化为本地化的(local)百分比格式,如第三个范例所示。 |
orderBy
<tr ng-repeat="movie in movieList | orderBy : 'title'">
使用表达式中所指定的方式对集合进行排序。 在这个例子中,movieList被根据movie的title排序了。 | 没了 在Angular 2中,出于性能的考虑,并没有一个类似的管道。 排序逻辑应该在组件中用代码实现。 如果它将被复用在几个模板中,可以考虑构建一个自定义管道。 |
回到顶部
模块/控制器/组件
无论在Angular 1还是Angular 2中,我们都要借助“模块”来把应用拆分成一些紧密相关的功能块。
在Angular 1中,我们在控制器中写代码,来为视图提供模型和方法。 在Angular 2中,我们创建组件。
因为很多Angular 1的代码是用JavaScript写的,所以在Angular 1列显示的是JavaScript代码,而Angular 2列显示的是TypeScript代码。
Angular 1 | Angular 2 |
---|
IIFE
(function () {
...
}());
在Angular 1中,我们通常会定义一个立即调用的函数表达式(IIFE)来包裹控制器代码。 这样让控制器代码不会污染全局命名空间。 | 没了 在Angular 2中我们不用担心这个问题,因为使用ES 2015的模块,模块会替我们处理命名空间问题。 要了解关于模块的更多信息,参见架构概览。 |
Angular模块
angular.module("movieHunter", ["ngRoute"]);
在Angular 1中,Angular模块用来对控制器、服务和其它代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。 | Angular modules
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 2的模块用NgModule 装饰器进行定义,有如下用途:
要了解关于模块的更多知识,参见Angular Modules。 |
控制器注册
angular
.module("movieHunter")
.controller("MovieListCtrl",
["movieService",
MovieListCtrl]);
在Angular 1中,在每个控制器中都有一些代码,用于找到合适的Angular模块并把该控制器注册进去。 第一个参数是控制器的名称,第二个参数定义了所有将注入到该控制器的依赖的字符串名称,以及一个到控制器函数的引用。 | 组件装饰器
@Component({
moduleId: module.id,
selector: 'movie-list',
templateUrl: 'movie-list.component.html',
styleUrls: [ 'movie-list.component.css' ],
})
在Angular 2中,我们往组件类上添加了一个装饰器,以提供任何需要的元数据。 组件装饰器把该类声明为组件,并提供了关于该组件的元数据,比如它的选择器(或标签)和模板。 这就是把模板关联到代码的方式,它定义在组件类中。 要了解关于模板的更多信息,参见架构概览中的组件部分。 |
控制器函数
function MovieListCtrl(movieService) {
}
在Angular1中,我们在控制器函数中写模型和方法的代码。 | 组件类
export class MovieListComponent {
}
在Angular 2中,我们写组件类。 注意:如果你正在用TypeScript写Angular 1,那么必须用export 关键字来导出组件类。 要了解关于组件的更多信息,参见架构概览中的组件部分。 |
依赖注入
MovieListCtrl.$inject = ['MovieService'];
function MovieListCtrl(movieService) {
}
在Angular 1中,我们把所有依赖都作为控制器函数的参数。 在这个例子中,我们注入了一个MovieService 。 我们还通过在第一个参数明确告诉Angular它应该注入一个MovieService 的实例,以防止在最小化时出现问题。 | 依赖注入
constructor(movieService: MovieService) {
}
在Angular 2中,我们把依赖作为组件构造函数的参数传入。 在这个例子中,我们注入了一个MovieService 。 即使在最小化之后,第一个参数的TypeScript类型也会告诉Angular它该注入什么。 要了解关于依赖注入的更多信息,参见架构概览中的依赖注入部分。 |
回到顶部
样式表
样式表美化我们的应用程序。 在Angular 1中,我们为整个应用程序指定样式表。 当应用程序成长一段时间之后,应用程序中很多部分的样式会被合并,导致无法预计的后果。 在Angular 2中,我们仍然会为整个应用程序定义样式,不过现在也可以把样式表封装在特定的组件中。
Angular 1 | Angular 2 |
---|
Link tag
<link href="styles.css" rel="stylesheet" />
在Angular 1中,我们在index.html 的head 区使用link 标签来为应用程序定义样式。 | Link标签
<link rel="stylesheet" href="styles.css">
在Angular2中,我们可以继续在index.html 中使用link标签来为应用程序定义样式。 但是也能在组件中封装样式。 StyleUrls 在Angular 2中,我们可以在@Component 的元数据中使用styles 或styleUrls 属性来为一个特定的组件定义样式表。
styleUrls: [ 'movie-list.component.css' ],
这让我们可以为各个组件设置合适的样式,而不用担心它被泄漏到程序中的其它部分。 |