关于 AngularJS 与 Angular 概念的快速参考
Angular 这个名字专指现在和未来的 Angular 版本,而 AngularJS 专指 Angular 的所有 v1.x 版本。
本章提供了一个快速的参考指南,指出一些常用的 AngularJS 语法及其在 Angular 中的等价物。
参阅 现场演练 / 下载范例 以学习 Angular 语法
模板基础
模板是 Angular 应用中的门面部分,它是用 HTML 写的。下表中是一些 AngularJS 中的关键模板特性及其在 Angular 中的等价语法。
AngularJS | Angular |
---|---|
绑定/插值
在 AngularJS 中,花括号中的表达式代表单向绑定。 它把元素的值绑定到了与模板相关控制器的属性上。 当使用 | 绑定/插值
在 Angular 中,花括号中的模板表达式同样代表单向绑定。 它把元素的值绑定到了组件的属性上。 它绑定的上下文变量是隐式的,并且总是关联到组件。 所以,它不需要一个引用变量。 |
过滤器
要在 AngularJS 中过滤输出,使用管道字符(|)以及一个或多个过滤器。 这个例子中把 | 管道
在 Angular 中,你使用类似的语法 —— 用管道字符(|)来过滤输出,但是现在直接把它叫做管道了。 很多(但不是所有)AngularJS 中的内置过滤器也成了 Angular 中的内置管道。 |
局部变量
这里的 | 输入变量
Angular 有了真正的模板输入变量,它需要使用 |
模板指令
AngularJS 为模板提供了七十多个内置指令。 在 Angular 中,它们很多都已经不需要了,因为 Angular 有了一个更加强大、快捷的绑定系统。 下面是一些 AngularJS 中的关键指令及其在 Angular 中的等价物。
AngularJS | Angular |
---|---|
ng-app
应用的启动过程被称为引导。 虽然可以从代码中引导 Angular 应用, 但很多应用都是通过 | 引导
Angular 没有引导指令。 总是要通过显式调用一个 |
ng-class
在 AngularJS 中, 在第一个例子中,如果 就像第二个例子中所展示的那样,可以同时指定多个类。 | ngClass
在 Angular 中, 在第一个例子中,如果 就像第二个例子中所展示的那样,可以同时指定多个类。 Angular 还有类绑定,它是单独添加或移除一个类的好办法 —— 就像第三个例子中展示的。 |
ng-click
在 AngularJS 中, 在第一个例子中,如果用户点击了这个按钮,那么控制器的 第二个例子演示了传入 | 绑定到 |
ng-controller
在 AngularJS 中, | 组件装饰器
在 Angular 中,模板不用再指定它相关的控制器。 反过来,组件会在组件类的装饰器中指定与它相关的模板。 |
ng-hide在 AngularJS 中, | 绑定到 |
ng-href
在 AngularJS 中,
路由在 Angular 中的处理方式不同。 | 绑定到 |
ng-if
在 AngularJS 中, 在这个例子中,除非 | *ngIf
Angular 中的 在这个例子中,除非 在这个例子中 |
ng-model
在 AngularJS 中, | ngModel
在 Angular 中,双向绑定使用[()]标记出来,它被形象的比作“盒子中的香蕉”。 这种语法是一个简写形式,用来同时定义一个属性绑定(从组件到视图)和一个事件绑定(从视图到组件),就成了双向绑定。 |
ng-repeat
在 AngularJS 中, 在这个例子中,对 | *ngFor
Angular 中的 请注意其它语法上的差异: 在 |
ng-show
在 AngularJS 中, 在这个例子中,如果 | 绑定到 |
ng-src
| 绑定到 |
ng-style
在 AngularJS 中, 在这个例子中, | ngStyle
在 Angular 中, 在第一个例子中, Angular 还有样式绑定语法,它是单独设置一个样式的好方法。它展示在第二个例子中。 |
ng-switch
在 AngularJS 中, 在这个例子中,如果 | ngSwitch
在 Angular 中, 在这个例子中,如果 在这个例子中, |
过滤器/管道
Angular 中的管道为模板提供了格式化和数据转换功能,类似于 AngularJS 中的过滤器。 AngularJS 中的很多内置过滤器在 Angular 中都有对应的管道。
AngularJS | Angular |
---|---|
currency
把一个数字格式化成货币。 | currency
Angular 的 |
date
基于要求的格式把日期格式化成字符串。 | date
Angular 的 |
filter
根据过滤条件从指定的集合中选取出一个子集。 | 没了在 Angular 中,出于性能的考虑,并没有一个类似的管道。 过滤逻辑应该在组件中用代码实现。 如果它将被复用在几个模板中,可以考虑构建一个自定义管道。 |
json
把一个 JavaScript 对象转换成一个 JSON 字符串。这对调试很有用。 | json
Angular 的 |
limitTo
从集合中选择从(第二参数指定的)起始索引号(0)开始的最多(第一参数指定的)条目数(2)个条目。 | slice
|
lowercase
把该字符串转成小写形式。 | lowercase
Angular 的 |
number
把数字格式化为文本。 | number
Angular 的 Angular 还有一个 |
orderBy
使用表达式中所指定的方式对集合进行排序。 在这个例子中, | 没了在 Angular 中,出于性能的考虑,并没有一个类似的管道。 排序逻辑应该在组件中用代码实现。 如果它将被复用在几个模板中,可以考虑构建一个自定义管道。 |
模块/控制器/组件
无论在 AngularJS 还是 Angular 中,“模块”都会帮你把应用拆分成一些内聚的功能块。
在 AngularJS 中,你要在控制器中写代码,来为视图提供模型和方法。 在 Angular 中,你要创建组件。
因为很多 AngularJS 的代码是用 JavaScript 写的,所以在 AngularJS 列显示的是 JavaScript 代码,而 Angular 列显示的是 TypeScript 代码。
AngularJS | Angular |
---|---|
IIFE
在 AngularJS 中,用立即调用的函数表达式(IIFE)来包裹控制器代码可以让控制器代码不会污染全局命名空间。 | 没了在 Angular 中不用担心这个问题,因为使用 ES 2015 的模块,模块会替你处理命名空间问题。 |
Angular 模块
在 AngularJS 中,Angular 模块用来对控制器、服务和其它代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。 | NgModules
Angular 的模块用
|
控制器注册
在 AngularJS 中,在每个控制器中都有一些代码,用于找到合适的 Angular 模块并把该控制器注册进去。 第一个参数是控制器的名称,第二个参数定义了所有将注入到该控制器的依赖的字符串名称,以及一个到控制器函数的引用。 | 组件装饰器
Angular 会往组件类上添加了一个装饰器,以提供所需的任何元数据。 这就是把模板关联到代码的方式,它定义在组件类中。 |
控制器函数
在 AngularJS 中,你在控制器函数中编写模型和方法的代码。 | 组件类
在 Angular 中,你将创建一个组件类来容纳数据模型和控制方法。使用 TypeScript 的 |
依赖注入
在 AngularJS 中,你把所有依赖都作为控制器函数的参数。 这个例子注入了一个 为了防止在最小化时出现问题,第一个参数明确告诉 Angular 它应该注入一个 | 依赖注入
在 Angular 中,你要把依赖作为组件构造函数的参数传入。 这个例子注入了一个 |
样式表
样式表让你的应用程序看起来更漂亮。 在 AngularJS 中,你要为整个应用程序指定样式表。 随着应用程序的不断成长,为各个部分指定的样式会被合并,导致无法预计的后果。 在 Angular 中,你仍然要为整个应用程序定义样式,不过现在也可以把样式表封装在特定的组件中。
AngularJS | Angular |
---|---|
Link 标签
AngularJS 在 | 样式配置
使用 Angular CLI,你可以在 StyleUrls在 Angular 中,你可以在
这让你可以为各个组件设置合适的样式,而不用担心它泄漏到程序中的其它部分。 |