Angular is the name for the Angular of today and tomorrow. AngularJS is the name for all v1.x versions of Angular.
This guide helps you transition from AngularJS to Angular by mapping AngularJS syntax to the equivalent Angular syntax.
在AngularJS和Angular之间,有很多不同的概念和语法。 本章提供了一个快速的参考指南,指出一些常用的AngularJS语法及其在Angular中的等价物。
See the Angular syntax in this
可到
Contents
内容
Template basics—binding and local variables.
模板基础 - 绑定变量与局部变量。
Template directives—built-in directives
ngIf
andngClass
.模板指令 - 内置指令
ngIf
和ngClass
。Filters/pipes—built-in filters, known as pipes in Angular.
过滤器/管道 - 内置过滤器(filter),在Angular中叫管道(pipe)。
Modules/controllers/components—modules in Angular are slightly different from modules in AngularJS, and controllers are components in Angular.
模块/控制器/组件 - Angular 中的模块和AngularJS 中的略有不同;而控制器在Angular 中叫组件。
Style sheets—more options for CSS than in AngularJS.
样式表 - Angular 相对AngularJS 在 CSS 方面有了更多选项。
Template basics
模板基础
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.
模板是Angular应用中的门面部分,它是用HTML写的。下表中是一些AngularJS中的关键模板特性及其在Angular中的等价语法。
AngularJS | Angular |
---|---|
Bindings/interpolation绑定/插值表达式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. 在AngularJS中,花括号中的表达式代表单向绑定。 它把元素的值绑定到了与模板相关控制器的属性上。 When using the 当使用 | Bindings/interpolation绑定/插值表达式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. 在Angular中,花括号中的模板表达式同样代表单向绑定。 它把元素的值绑定到了组件的属性上。 它绑定的上下文变量是隐式的,并且总是关联到组件。 所以,它不需要一个引用变量。 For more information, see the Interpolation section of the Template Syntax page. |
Filters过滤器To filter output in AngularJS templates, use the pipe character (|) and one or more filters. 要在AngularJS中过滤输出,使用管道字符(|)以及一个或多个过滤器。 This example filters the 在这个例子中,我们把 | Pipes管道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. 在Angular中,我们使用相似的语法 —— 用管道字符(|)来过滤输出,但是现在直接把它叫做管道了。 很多(但不是所有)AngularJS中的内置过滤器也成了Angular中的内置管道。 For more information, see Filters/pipes below. 请参见下面过滤器/管道了解更多信息。 |
Local variables局部变量Here, 这里的 | Input variables输入变量Angular has true template input variables that are explicitly defined using the 在Angular中,我们有了真正的模板输入变量,它需要使用 For more information, see the ngFor micro-syntax section of the Template Syntax page. |
Template directives
模板指令
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 中,它们很多都已经不需要了,因为 Angular 有了一个更加强大、快捷的绑定系统。 下面是一些AngularJS 中的关键指令及其在 Angular 中的等价物。
AngularJS | Angular |
---|---|
ng-appThe application startup process is called bootstrapping. 应用的启动过程被称为引导。 Although you can bootstrap an AngularJS app in code,
many applications bootstrap declaratively with the 虽然可以从代码中引导Angular应用,
但很多应用都是通过 | Bootstrapping引导main.tsapp.module.tsAngular doesn't have a bootstrap directive.
To launch the app in code, explicitly bootstrap the application's root module ( Angular 没有引导指令。
我们总是通过显式调用一个 For more information see the Setup page. 要了解更多,参见搭建本地开发环境。 |
ng-classIn AngularJS, the 在AngularJS中, In the first example, the 在第一个例子中,当 You can specify multiple classes, as shown in the second example. 就像第二个例子中展示的,可以指定多个CSS类。 | ngClassIn Angular, the 在Angular中, In the first example, the 在第一个例子中,如果 You can specify multiple classes, as shown in the second example. 就像第二个例子中所展示的那样,可以同时指定多个类。 Angular also has class binding, which is a good way to add or remove a single class, as shown in the third example. Angular还有类绑定,它是单独添加或移除一个类的好办法 —— 就像第三个例子中展示的。 For more information see the Attribute, class, and style bindings section of the Template Syntax page. 要了解更多信息,参见模板语法中的属性、CSS类和样式绑定部分。 |
ng-clickIn AngularJS, the 在AngularJS中, In the first example, when the user clicks the button, the 在第一个例子中,如果用户点击了这个按钮,那么控制器的 The second example demonstrates passing in the 第二个例子演示了传入 | Bind to the
|
ng-controllerIn AngularJS, the 在AngularJS中, | Component decoratorComponent装饰器In Angular, the template no longer specifies its associated controller. Rather, the component specifies its associated template as part of the component class decorator. 在Angular中,模板不用再指定它相关的控制器。 反过来,组件会在组件类的装饰器中指定与它相关的模板。 For more information, see Architecture Overview. 要了解更多,请参见架构概览。 |
ng-hideIn AngularJS, the 在AngularJS中, | Bind to the
|
ng-hrefThe
In AngularJS, the 在AngularJS 中, Routing is handled differently in Angular. 路由在Angular中的处理方式不同。 | Bind to the
|
ng-ifIn AngularJS, the 在AngularJS中, In this example, the 在这个例子中,除非 | *ngIfThe Angular中的 In this example, the 在这个例子中,除非 The (*) before 在这个例子中 |
ng-modelIn AngularJS, the 在Angular1中, | ngModelIn Angular, two-way binding is denoted by 在Angular中,双向绑定使用[()]标记出来,它被形象的比作“盒子中的香蕉”。 这种语法是一个简写形式,用来同时定义一个属性绑定(从组件到视图)和一个事件绑定(从视图到组件),因此,我们得到了双向绑定。 For more information on two-way binding with 要了解使用ngModel进行双向绑定的更多知识,参见模板语法中的NgModel—使用 |
ng-repeatIn AngularJS, the 在Angular1中, In this example, the table row ( 在这个例子中,对 | *ngForThe Angular中的 Notice the other syntax differences:
The (*) before 请注意其它语法上的差异:
在 For more information, see Structural Directives. 要了解更多信息,参见结构性指令。 |
ng-showIn AngularJS, the 在AngularJS中, In this example, the 在这个例子中,如果 | Bind to the
|
ng-srcThe
| Bind to the
|
ng-styleIn AngularJS, the 在AngularJS中, In the example, the 在这个例子中, | ngStyleIn Angular, the 在Angular中, In the first example, the 在第一个例子中, 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 |
ng-switchIn AngularJS, the 在Angular1中, In this example, if 在这个例子中,如果 | ngSwitchIn Angular, the 在Angular中, In this example, if 在这个例子中,如果 The (*) before 在这个例子中, For more information, see The NgSwitch directives section of the Template Syntax page. 要了解更多信息,参见模板语法中的NgSwitch指令部分。 |
Filters/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.
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中,出于性能的考虑,并没有一个类似的管道。 排序逻辑应该在组件中用代码实现。 如果它将被复用在几个模板中,可以考虑构建一个自定义管道。 |
Modules/controllers/components
模块/控制器/组件
In both AngularJS and Angular, 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模块用来对控制器、服务和其它代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。 | Angular modulesAngular modules, defined with the Angular的模块用
For more information on modules, see Angular Modules. 要了解关于模块的更多知识,参见Angular Modules。 |
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
样式表
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 tagAngularJS, uses a 在AngularJS中,我们在 | Link tagLink标签In Angular, you can continue to use the link tag to define the styles for your application in the 在Angular2中,我们可以继续在 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. 这让我们可以为各个组件设置合适的样式,而不用担心它被泄漏到程序中的其它部分。 |