把Angular 2替换为Angular

把Angular 1替换为AngularJS
This commit is contained in:
Zhicheng Wang 2017-02-26 17:12:55 +08:00
parent 89adb52815
commit cb17c8afe3
18 changed files with 414 additions and 413 deletions

View File

@ -17,7 +17,7 @@
},
"resources": {
"title": "资源库",
"subtitle": "Angular 2的资源库"
"subtitle": "Angular的资源库"
},
"news": {
"title": "新闻"

View File

@ -2,27 +2,27 @@
.l-main-section
h2 Blog Posts by thoughtram
ul
li: a(href="http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html") Angular 2 Change Detection Explained
li <a href="http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html">Even ES5 code for Angular 2</a>
li <a href="http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html">Shadow DOM Strategies in Angular 2</a>
li <a href="http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html">Styling Angular 2 components</a>
li <a href="http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html">Routing in Angular 2</a>
li <a href="http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html">Dependency Injection in Angular 2</a>
li <a href="http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html">Writing Angular 2 code in ES5</a>
li: a(href="http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html") Angular Change Detection Explained
li <a href="http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html">Even ES5 code for Angular</a>
li <a href="http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html">Shadow DOM Strategies in Angular</a>
li <a href="http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html">Styling Angular components</a>
li <a href="http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html">Routing in Angular</a>
li <a href="http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html">Dependency Injection in Angular</a>
li <a href="http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html">Writing Angular code in ES5</a>
li <a href="http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html">The difference between annotations and decorators</a>
li <a href="http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html">Developing a Tabs component in Angular 2</a>
li <a href="http://blog.thoughtram.io/angular/2015/03/27/building-a-zippy-component-in-angular-2.html">Developing a Zippy component in Angular 2</a>
li <a href="http://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html">Angular 2 Template Syntax Demystified - Part 1</a>
li <a href="http://blog.thoughtram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html">Host and Visibility in Angular 2's DI</a>
li <a href="http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html">Upgrading apps to Angular 2 using ngUpgrade</a>
li <a href="http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html">Resolving Service Dependencies in Angular 2</a>
li <a href="http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html">Forward References in Angular 2</a>
li <a href="http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html">Developing a Tabs component in Angular</a>
li <a href="http://blog.thoughtram.io/angular/2015/03/27/building-a-zippy-component-in-angular-2.html">Developing a Zippy component in Angular</a>
li <a href="http://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html">Angular Template Syntax Demystified - Part 1</a>
li <a href="http://blog.thoughtram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html">Host and Visibility in Angular's DI</a>
li <a href="http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html">Upgrading apps to Angular using ngUpgrade</a>
li <a href="http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html">Resolving Service Dependencies in Angular</a>
li <a href="http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html">Forward References in Angular</a>
.l-main-section
h2 Victor Savkin's Blog Posts
ul
li: a(href="http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications") Managing State in Angular 2 Applications
li <a href="http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications">Two Phases of Angular 2 Applications</a>
li <a href="http://angularjs.blogspot.com/2015/03/forms-in-angular-2.html">Forms in Angular 2</a>
li: a(href="http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications") Managing State in Angular Applications
li <a href="http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications">Two Phases of Angular Applications</a>
li <a href="http://angularjs.blogspot.com/2015/03/forms-in-angular-2.html">Forms in Angular</a>
li <a href="http://victorsavkin.com/post/110170125256/change-detection-in-angular-2">Change detection</a>
li <a href="http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in">Functional programming </a>
li <a href="http://victorsavkin.com/post/102965317996/angular-2-bits-unified-dependency-injection">Dependency injection</a>
@ -33,19 +33,19 @@
h4 Intro Videos
ul
li <a href="https://www.youtube.com/watch?v=uD6Okha_Yj0">Building a Todo App</a> by David East
li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular 2 Forms</a> by David East
li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular Forms</a> by David East
h4 ng-conf
ul
li Playlist <a href="https://www.youtube.com/watch?v=QHulaj5ZxbI&index=1&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">of ng-conf 2015 videos</a>.
li <a href="https://www.youtube.com/watch?v=QHulaj5ZxbI&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Day 1 Keynote</a>: a broad overview of Angular 2, migration, and where we are headed.
li <a href="https://www.youtube.com/watch?v=-dMBcqwvYA0&index=21&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Day 2 Keynote</a>: Misko and Rado do a deep-dive on Angular 2 details.
li <a href="https://www.youtube.com/watch?v=QHulaj5ZxbI&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Day 1 Keynote</a>: a broad overview of Angular, migration, and where we are headed.
li <a href="https://www.youtube.com/watch?v=-dMBcqwvYA0&index=21&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Day 2 Keynote</a>: Misko and Rado do a deep-dive on Angular details.
li <a href="https://www.youtube.com/watch?v=AbunztfV5vU&index=6&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Creating Container Components with Web Components in Angular</a>: Kara Erickson &amp; Rachael L Moore.
li <a href="https://www.youtube.com/watch?v=jvKGQSFQf10&index=31&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Change Detection Reinvented</a>: Why Angular 2 change detection is fast out of the box and options for developers to make it even faster.
li <a href="https://www.youtube.com/watch?v=jvKGQSFQf10&index=31&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Change Detection Reinvented</a>: Why Angular change detection is fast out of the box and options for developers to make it even faster.
h4 ng-europe
ul
li Oct 2014 <a href="https://www.youtube.com/watch?v=lGdnh8QSPPk&list=PLhc_bKwZngxW_ZlY0NkaGkvKpiA_pzcZ-">playlist of ng-europe videos on Angular 2</a> and the future of Angular.
li Oct 2014 <a href="https://www.youtube.com/watch?v=lGdnh8QSPPk&list=PLhc_bKwZngxW_ZlY0NkaGkvKpiA_pzcZ-">playlist of ng-europe videos on Angular</a> and the future of Angular.
.l-main-section

View File

@ -7,13 +7,13 @@ a(id="top")
This guide helps you transition from AngularJS to Angular
by mapping AngularJS syntax to the equivalent Angular syntax.
在Angular 1和Angular 2之间,有很多不同的概念和语法。
本章提供了一个快速的参考指南指出一些常用的Angular 1语法及其在Angular 2中的等价物。
在AngularJS和Angular之间,有很多不同的概念和语法。
本章提供了一个快速的参考指南指出一些常用的AngularJS语法及其在Angular中的等价物。
:marked
**See the Angular syntax in this <live-example name="cb-ajs-quick-reference"></live-example>**.
**可到<live-example name="cb-a1-a2-quick-reference">在线例子</live-example>中查看Angular 2语法**。
**可到<live-example name="cb-a1-a2-quick-reference">在线例子</live-example>中查看Angular语法**。
## Contents
@ -52,7 +52,7 @@ a(id="top")
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写的。下表中是一些Angular 1中的关键模板特性及其在Angular 2中的等价语法。
模板是Angular应用中的门面部分它是用HTML写的。下表中是一些AngularJS中的关键模板特性及其在Angular中的等价语法。
- var top="vertical-align:top"
table(width="100%")
@ -75,7 +75,7 @@ table(width="100%")
This binds the value of the element to a property in the controller
associated with this template.
在Angular 1中,花括号中的表达式代表单向绑定。
在AngularJS中,花括号中的表达式代表单向绑定。
它把元素的值绑定到了与模板相关控制器的属性上。
When using the `controller as` syntax,
@ -97,7 +97,7 @@ table(width="100%")
The context of the binding is implied and is always the
associated component, so it needs no reference variable.
angular 2中,花括号中的模板表达式同样代表单向绑定。
Angular中,花括号中的模板表达式同样代表单向绑定。
它把元素的值绑定到了组件的属性上。
它绑定的上下文变量是隐式的,并且总是关联到组件。
所以,它不需要一个引用变量。
@ -118,7 +118,7 @@ table(width="100%")
:marked
To filter output in AngularJS templates, use the pipe character (|) and one or more filters.
要在Angular 1中过滤输出,使用管道字符(|)以及一个或多个过滤器。
要在AngularJS中过滤输出,使用管道字符(|)以及一个或多个过滤器。
This example filters the `title` property to uppercase.
@ -136,8 +136,8 @@ table(width="100%")
Many (but not all) of the built-in filters from AngularJS are
built-in pipes in Angular.
在Angular 2中,我们使用相似的语法 —— 用管道字符(|)来过滤输出,但是现在直接把它叫做**管道**了。
很多(但不是所有)Angular 1中的内置过滤器也成了Angular 2中的内置管道。
在Angular中我们使用相似的语法 —— 用管道字符(|)来过滤输出,但是现在直接把它叫做**管道**了。
很多(但不是所有)AngularJS中的内置过滤器也成了Angular中的内置管道。
For more information, see the heading [Filters/pipes](#filters-pipes) below.
@ -168,7 +168,7 @@ table(width="100%")
:marked
Angular has true template input variables that are explicitly defined using the `let` keyword.
在Angular 2中,我们有了真正的模板输入变量,它需要使用`let`关键字进行明确定义。
在Angular中我们有了真正的模板输入变量它需要使用`let`关键字进行明确定义。
For more information, see the [ngFor micro-syntax](../guide/template-syntax.html#ngForMicrosyntax) section of the Template Syntax page.
@ -252,7 +252,7 @@ table(width="100%")
key of the object defined as a CSS class name, and each value defined as a template expression
that evaluates to a Boolean value.
在Angular 1中,`ng-class`指令会基于一个表达式来包含/排除某些CSS类。该表达式通常是一个“键-值”型的控制对象,
在AngularJS中,`ng-class`指令会基于一个表达式来包含/排除某些CSS类。该表达式通常是一个“键-值”型的控制对象,
对象中的每一个键代表一个CSS类名每一个值定义为一个返回布尔值的模板表达式。
In the first example, the `active` class is applied to the element if `isActive` is true.
@ -271,7 +271,7 @@ table(width="100%")
In Angular, the `ngClass` directive works similarly.
It includes/excludes CSS classes based on an expression.
在Angular 2中,`ngClass`指令用类似的方式工作。
在Angular中`ngClass`指令用类似的方式工作。
它根据一个表达式包含/排除某些CSS类。
In the first example, the `active` class is applied to the element if `isActive` is true.
@ -301,7 +301,7 @@ table(width="100%")
:marked
In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked.
在Angular 1中,`ng-click`指令指定当元素被点击时的自定义行为。
在AngularJS中,`ng-click`指令指定当元素被点击时的自定义行为。
In the first example, when the user clicks the button, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed.
@ -323,7 +323,7 @@ table(width="100%")
AngularJS event-based directives do not exist in Angular.
Rather, define one-way binding from the template view to the component using **event binding**.
Angular 1基于事件的指令在Angular 2中已经不存在了。
AngularJS基于事件的指令在Angular中已经不存在了。
不过,可以使用**事件绑定**来定义从模板视图到组件的单向数据绑定。
For event binding, define the name of the target event within parenthesis and
@ -332,7 +332,7 @@ table(width="100%")
executes the template statement.
要使用事件绑定,把目标事件的名字放在圆括号中,并且使用等号右侧引号中的模板语句对它赋值。
然后Angular 2为这个目标时间设置事件处理器。当事件被触发时,这个处理器就会执行模板语句。
然后Angular为这个目标时间设置事件处理器。当事件被触发时这个处理器就会执行模板语句。
In the first example, when a user clicks the button, the `toggleImage()` method in the associated component is executed.
@ -362,7 +362,7 @@ table(width="100%")
Using the `ng-controller` (or defining the controller as part of the routing) ties the
view to the controller code associated with that view.
在Angular 1中,`ng-controller`指令把控制器附加到视图上。
在AngularJS中,`ng-controller`指令把控制器附加到视图上。
使用`ng-controller`(或把控制器定义为路由的一部分)把视图及其控制器的代码联系在一起。
td
@ -376,7 +376,7 @@ table(width="100%")
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 2中,模板不用再指定它相关的控制器。
在Angular中模板不用再指定它相关的控制器。
反过来,组件会在组件类的装饰器中指定与它相关的模板。
For more information, see [Architecture Overview](../guide/architecture.html#component).
@ -390,7 +390,7 @@ table(width="100%")
In AngularJS, the `ng-hide` directive shows or hides the associated HTML element based on
an expression. For more information, see [ng-show](#ng-show).
在Angular 1中,`ng-hide`指令会基于一个表达式显示或隐藏相关的HTML元素。
在AngularJS中,`ng-hide`指令会基于一个表达式显示或隐藏相关的HTML元素。
参见[ng-show](#ng-show)了解更多。
td
@ -438,7 +438,7 @@ table(width="100%")
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.
在Angular 2中,并没有内置的*href*指令,改用属性绑定。
在Angular中并没有内置的*href*指令,改用属性绑定。
我们把元素的`href`属性放在方括号中,并把它设成一个引号中的模板表达式。
For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).
@ -447,7 +447,7 @@ table(width="100%")
In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the third example.
在Angular 2中,`href`不再用作路由,而是改用第三个例子中所展示的`routerLink`指令。
在Angular中`href`不再用作路由,而是改用第三个例子中所展示的`routerLink`指令。
+makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'router-link')(format="." )
:marked
@ -465,7 +465,7 @@ table(width="100%")
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.
在Angular 1中,`ng-if`指令会根据一个表达式来移除或重建DOM中的一部分。如果表达式为假元素就会被从DOM中移除。
在AngularJS中,`ng-if`指令会根据一个表达式来移除或重建DOM中的一部分。如果表达式为假元素就会被从DOM中移除。
In this example, the `table` element is removed from the DOM unless the `movies` array has a length greater than zero.
@ -477,7 +477,7 @@ table(width="100%")
:marked
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.
Angular 2中的`*ngIf`指令与Angular 1中的`ng-if`指令一样,
Angular中的`*ngIf`指令与AngularJS中的`ng-if`指令一样,
它根据表达式的值移除或重建DOM中的一部分。
In this example, the `table` element is removed from the DOM unless the `movies` array has a length.
@ -511,7 +511,7 @@ table(width="100%")
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 2中,**双向绑定**使用[()]标记出来,它被形象的比作“盒子中的香蕉”。
在Angular中**双向绑定**使用[()]标记出来,它被形象的比作“盒子中的香蕉”。
这种语法是一个简写形式,用来同时定义一个属性绑定(从组件到视图)和一个事件绑定(从视图到组件),因此,我们得到了双向绑定。
For more information on two-way binding with ngModel, see [Template Syntax](../guide/template-syntax.html#ngModel).
@ -542,7 +542,7 @@ table(width="100%")
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 2中的`*ngFor`指令类似于Angular 1中的`ng-repeat`指令。
Angular中的`*ngFor`指令类似于AngularJS中的`ng-repeat`指令。
它为指定集合中的每一个条目重复渲染了相关的DOM元素。
更准确的说,它把被界定出来的元素(这个例子中是`tr`)及其内容转成了一个模板,并使用那个模板来为列表中的每一个条目实例化一个视图。
@ -569,7 +569,7 @@ table(width="100%")
In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on
an expression.
在Angular 1中,`ng-show`指令根据一个表达式来显示或隐藏相关的DOM元素。
在AngularJS中,`ng-show`指令根据一个表达式来显示或隐藏相关的DOM元素。
In this example, the `div` element is shown if the `favoriteHero` variable is truthy.
@ -586,7 +586,7 @@ table(width="100%")
Angular, uses property binding; there is no built-in *show* directive.
For hiding and showing elements, bind to the HTML `hidden` property.
在Angular 2中,并没有内置的*show*指令,可以改用属性绑定。
在Angular中并没有内置的*show*指令,可以改用属性绑定。
要隐藏或显示一个元素,绑定到它的`hidden`属性就可以了。
To conditionally display an element, place the element's `hidden` property in square brackets and
@ -613,7 +613,7 @@ table(width="100%")
can replace the binding expression with the appropriate URL before the browser
fetches from that URL.
`ng-src`指令允许Angular 1对`src`属性进行预处理以便它能够在浏览器获取此URL之前用一个返回适当URL的绑定表达式替换它。
`ng-src`指令允许AngularJS对`src`属性进行预处理以便它能够在浏览器获取此URL之前用一个返回适当URL的绑定表达式替换它。
td
:marked
@ -626,7 +626,7 @@ table(width="100%")
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.
在Angular 2中,并没有一个内置的*src*指令,可以使用属性绑定。
在Angular中并没有一个内置的*src*指令,可以使用属性绑定。
把`src`属性放到方括号中,并且把它设为一个引号中的绑定表达式。
For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).
@ -645,7 +645,7 @@ table(width="100%")
key of the object defined as a CSS style name, and each value defined as an expression
that evaluates to a value appropriate for the style.
在Angular 1中,`ng-style`指令根据一个绑定表达式设置一个HTML元素的CSS样式。
在AngularJS中,`ng-style`指令根据一个绑定表达式设置一个HTML元素的CSS样式。
该表达式通常是一个“键-值”形式的控制对象对象的每个键都是一个CSS的样式名每个值都是一个能计算为此样式的合适值的表达式。
In the example, the `color` style is set to the current value of the `colorPreference` variable.
@ -659,7 +659,7 @@ table(width="100%")
:marked
In Angular, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression.
在Angular 2中,`ngStyle`指令的工作方式与此类似。它根据一个表达式设置HTML元素上的CSS样式。
在Angular中`ngStyle`指令的工作方式与此类似。它根据一个表达式设置HTML元素上的CSS样式。
In the first example, the `color` style is set to the current value of the `colorPreference` variable.
@ -667,7 +667,7 @@ table(width="100%")
Angular also has **style binding**, which is good way to set a single style. This is shown in the second example.
Angular 2还有**样式绑定**语法,它是单独设置一个样式的好方法。它展示在第二个例子中。
Angular还有**样式绑定**语法,它是单独设置一个样式的好方法。它展示在第二个例子中。
For more information on style binding, see [Template Syntax](../guide/template-syntax.html#style-binding).
@ -717,7 +717,7 @@ table(width="100%")
In Angular, the `ngSwitch` directive works similarly.
It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value.
在Angular 2中,`ngSwitch`指令的工作方式与此类似。
在Angular中`ngSwitch`指令的工作方式与此类似。
它会显示那个与`ngSwitch`表达式的当前值匹配的那个`*ngSwitchCase`所在的元素。
In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null`
@ -756,8 +756,8 @@ a(id="filters-pipes")
Many of the built-in filters in AngularJS have corresponding pipes in Angular.
For more information on pipes, see [Pipes](../guide/pipes.html).
Angular 2中的**管道**为模板提供了格式化和数据转换功能类似于Angular 1中的**过滤器**。
Angular 1中的很多内置过滤器在Angular 2中都有对应的管道。
Angular中的**管道**为模板提供了格式化和数据转换功能类似于AngularJS中的**过滤器**。
AngularJS中的很多内置过滤器在Angular中都有对应的管道。
要了解管道的更多信息,参见[Pipes](../guide/pipes.html)。
table(width="100%")
@ -784,7 +784,7 @@ table(width="100%")
:marked
The Angular `currency` pipe is similar although some of the parameters have changed.
Angular 2的`currency`管道和1中很相似只是有些参数变化了。
Angular的`currency`管道和1中很相似只是有些参数变化了。
tr(style=top)
td
:marked
@ -803,7 +803,7 @@ table(width="100%")
:marked
The Angular `date` pipe is similar.
Angular 2的`date`管道和·中很相似。参见[备注](#string-dates)来了解字符串日期值。
Angular的`date`管道和·中很相似。参见[备注](#string-dates)来了解字符串日期值。
tr(style=top)
td
@ -822,7 +822,7 @@ table(width="100%")
### 没了
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 2中,出于性能的考虑,并没有一个类似的管道。
在Angular中出于性能的考虑并没有一个类似的管道。
过滤逻辑应该在组件中用代码实现。
如果它将被复用在几个模板中,可以考虑构建一个自定义管道。
@ -844,7 +844,7 @@ table(width="100%")
:marked
The Angular `json` pipe does the same thing.
Angular 2的`json`管道做完全相同的事。
Angular的`json`管道做完全相同的事。
tr(style=top)
td
:marked
@ -868,7 +868,7 @@ table(width="100%")
`SlicePipe`做同样的事,但是*两个参数的顺序是相反的*以便于JavaScript中的`slice`方法保持一致。
第一个参数是起始索引号,第二个参数是限制的数量。
和Angular 1中一样,如果们改用组件中的代码实现此操作,性能将会提升。
和AngularJS中一样,如果们改用组件中的代码实现此操作,性能将会提升。
tr(style=top)
td
:marked
@ -887,7 +887,7 @@ table(width="100%")
:marked
The Angular `lowercase` pipe does the same thing.
Angular 2的`lowercase`管道和1中的功能完全相同。
Angular的`lowercase`管道和1中的功能完全相同。
tr(style=top)
td
:marked
@ -908,13 +908,13 @@ table(width="100%")
It provides more functionality when defining
the decimal places, as shown in the second example above.
Angular 2的`number`管道很相似。
Angular的`number`管道很相似。
但在指定小数点位置时,它提供了更多的功能,如第二个范例所示。
Angular also has a `percent` pipe, which formats a number as a local percentage
as shown in the third example.
Angular 2还有一个`percent`管道,它把一个数组格式化为本地化的(local)百分比格式,如第三个范例所示。
Angular还有一个`percent`管道,它把一个数组格式化为本地化的(local)百分比格式,如第三个范例所示。
tr(style=top)
td
:marked
@ -935,7 +935,7 @@ table(width="100%")
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 2中,出于性能的考虑,并没有一个类似的管道。
在Angular中出于性能的考虑并没有一个类似的管道。
排序逻辑应该在组件中用代码实现。
如果它将被复用在几个模板中,可以考虑构建一个自定义管道。
@ -953,18 +953,18 @@ a(id="controllers-components")
In both AngularJS and Angular, Angular modules help you organize your application into cohesive blocks of functionality.
无论在Angular 1还是Angular 2中,我们都要借助“模块”来把应用拆分成一些紧密相关的功能块。
无论在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**.
在Angular 1中,我们在**控制器**中写代码,来为视图提供模型和方法。
在Angular 2中,我们创建**组件**。
在AngularJS中,我们在**控制器**中写代码,来为视图提供模型和方法。
在Angular中我们创建**组件**。
Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column.
The Angular code is shown using TypeScript.
因为很多Angular 1的代码是用JavaScript写的所以在Angular 1列显示的是JavaScript代码而Angular 2列显示的是TypeScript代码。
因为很多AngularJS的代码是用JavaScript写的所以在AngularJS列显示的是JavaScript代码而Angular列显示的是TypeScript代码。
table(width="100%")
col(width="50%")
@ -984,7 +984,7 @@ table(width="100%")
In AngularJS, you often defined an immediately invoked function expression (or IIFE) around your controller code.
This kept your controller code out of the global namespace.
在Angular 1中,我们通常会定义一个立即调用的函数表达式(IIFE)来包裹控制器代码。
在AngularJS中,我们通常会定义一个立即调用的函数表达式(IIFE)来包裹控制器代码。
这样让控制器代码不会污染全局命名空间。
td
@ -994,7 +994,7 @@ table(width="100%")
You don't need to worry about this in Angular because you use ES 2015 modules
and modules handle the namespacing for you.
在Angular 2中我们不用担心这个问题因为使用ES 2015的模块模块会替我们处理命名空间问题。
在Angular中我们不用担心这个问题因为使用ES 2015的模块模块会替我们处理命名空间问题。
For more information on modules, see [Architecture Overview](../guide/architecture.html#module).
@ -1012,7 +1012,7 @@ table(width="100%")
:marked
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.
在Angular 1Angular模块用来对控制器、服务和其它代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。
在AngularJSAngular模块用来对控制器、服务和其它代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。
td
:marked
### Angular modules
@ -1020,7 +1020,7 @@ table(width="100%")
:marked
Angular modules, defined with the `NgModule` decorator, serve the same purpose:
Angular 2的模块用`NgModule`装饰器进行定义,有如下用途:
Angular的模块用`NgModule`装饰器进行定义,有如下用途:
- `imports`: specifies the list of other modules that this module depends upon
- `imports`: 指定当前模块依赖的其它模块列表
@ -1050,7 +1050,7 @@ table(width="100%")
AngularJS, has code in each controller that looks up an appropriate Angular module
and registers the controller with that module.
在Angular 1在每个控制器中都有一些代码用于找到合适的Angular模块并把该控制器注册进去。
在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.
@ -1069,7 +1069,7 @@ table(width="100%")
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.
在Angular 2中,我们往组件类上添加了一个装饰器,以提供任何需要的元数据。
在Angular中我们往组件类上添加了一个装饰器以提供任何需要的元数据。
组件装饰器把该类声明为组件,并提供了关于该组件的元数据,比如它的选择器(或标签)和模板。
This is how you associate a template with code, which is defined in the component class.
@ -1103,11 +1103,11 @@ table(width="100%")
:marked
In Angular, you create a component class.
在Angular 2中,我们写组件类。
在Angular中我们写组件类。
NOTE: If you are using TypeScript with AngularJS, you must use the `export` keyword to export the component class.
注意如果你正在用TypeScript写Angular 1,那么必须用`export`关键字来导出组件类。
注意如果你正在用TypeScript写AngularJS,那么必须用`export`关键字来导出组件类。
For more information, see the [Components](../guide/architecture.html#components) section of the Architecture Overview page.
@ -1128,7 +1128,7 @@ table(width="100%")
In AngularJS, you pass in any dependencies as controller function arguments.
This example injects a `MovieService`.
在Angular 1中,我们把所有依赖都作为控制器函数的参数。
在AngularJS中,我们把所有依赖都作为控制器函数的参数。
在这个例子中,我们注入了一个`MovieService`。
To guard against minification problems, tell Angular explicitly
@ -1148,7 +1148,7 @@ table(width="100%")
This example injects a `MovieService`.
The first parameter's TypeScript type tells Angular what to inject, even after minification.
在Angular 2中,我们把依赖作为组件构造函数的参数传入。
在Angular中我们把依赖作为组件构造函数的参数传入。
在这个例子中,我们注入了一个`MovieService`。
即使在最小化之后第一个参数的TypeScript类型也会告诉Angular它该注入什么。
@ -1176,9 +1176,9 @@ a(id="style-sheets")
also encapsulate a style sheet within a specific component.
样式表美化我们的应用程序。
在Angular 1中,我们为整个应用程序指定样式表。
在AngularJS中,我们为整个应用程序指定样式表。
当应用程序成长一段时间之后,应用程序中很多部分的样式会被合并,导致无法预计的后果。
在Angular 2中,我们仍然会为整个应用程序定义样式,不过现在也可以把样式表封装在特定的组件中。
在Angular中我们仍然会为整个应用程序定义样式不过现在也可以把样式表封装在特定的组件中。
table(width="100%")
col(width="50%")
@ -1196,7 +1196,7 @@ table(width="100%")
AngularJS, uses a `link` tag in the head section of the `index.html` file
to define the styles for the application.
在Angular 1中,我们在`index.html`的`head`区使用`link`标签来为应用程序定义样式。
在AngularJS中,我们在`index.html`的`head`区使用`link`标签来为应用程序定义样式。
td
:marked
### Link tag
@ -1216,7 +1216,7 @@ table(width="100%")
In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define
a style sheet for a particular component.
在Angular 2中,我们可以在`@Component`的元数据中使用`styles`或`styleUrls`属性来为一个特定的组件定义样式表。
在Angular中我们可以在`@Component`的元数据中使用`styles`或`styleUrls`属性来为一个特定的组件定义样式表。
+makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.ts', 'style-url')(format=".")
:marked

View File

@ -682,7 +682,7 @@ a#io-decorators
当用 _ES5 DSL_ 时,把`Class.constructor`属性设置为一个数组,它的前面的参数是
注入的服务,最后一个参数是类构造函数本身。
Angular 1 的开发人员对这种形式应该很熟悉。
AngularJS 的开发人员对这种形式应该很熟悉。
+makeTabs(`
cb-ts-to-js/ts/src/app/hero-di.component.ts,

View File

@ -36,7 +36,7 @@ include ../_util-fns
Note that the resulting code does not map to the docs. Adjust accordingly.
如果你希望使用**ASP.NET Core**并体验全新项目,
参见_预览版_<a href="http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/" target="_blank">ASP.NET Core + Angular 2 template for Visual Studio 2015</a>。
参见_预览版_<a href="http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/" target="_blank">ASP.NET Core + Angular template for Visual Studio 2015</a>。
注意,最终代码与本文不对应,请适当调节。
:marked
@ -107,7 +107,7 @@ h2#prereq2 前提条件: Visual Studio 2015 Update 3
Earlier versions do not follow the best practices for developing applications with TypeScript.
To view your version of Visual Studio 2015, go to `Help | About Visual Studio`.
使用Visual Studio开发Angular 2应用程序的最低要求是Update 3。
使用Visual Studio开发Angular应用程序的最低要求是Update 3。
早期版本没有遵循使用TypeScript开发应用程序的最佳实践。
要查看你的Visual Studio 2015版本号到`Help | About Visual Studio`。
@ -160,7 +160,7 @@ h2#prereq4 前提条件: 安装TypeScript 2 for Visual Studio 2015
While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesnt ship with TypeScript 2,
which you need to develop Angular applications.
Visual Studio Update 3自带TypeScript支持但是它的TypeScript版本开发Angular 2应用需要的不是2。
Visual Studio Update 3自带TypeScript支持但是它的TypeScript版本开发Angular应用需要的不是2。
To install TypeScript 2:

View File

@ -106,7 +106,7 @@ block includes
The documentation for the version prior to v.2.2.0 has been removed.
更新的[NgUpgrade指南](upgrade.html)覆盖在v.2.2.0发布的AoT`upgrade/static`模块,
是从Angular 1升级至Angular 2的推荐工具。
是从AngularJS升级至Angular的推荐工具。
删除早于v.2.2.0版本的文档。
## ES6 described in "TypeScript to JavaScript" (2016-11-14)
@ -147,7 +147,7 @@ block includes
packages in support of upgrade; these are not needed for pure Angular development.
"[从1.x升级](upgrade.html)"指南反映了这个变化。
`package.json`安装`@types/angular`和一些`@types/angular-...`包来支持升级。它们在纯Angular 2开发中是不需要的。
`package.json`安装`@types/angular`和一些`@types/angular-...`包来支持升级。它们在纯Angular开发中是不需要的。
## "Template Syntax" explains two-way data binding syntax (2016-10-20)

View File

@ -330,7 +330,7 @@ a#enable-prod-mode
console:
code-example(format="nocode").
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
:marked
Switching to production mode can make it run faster by disabling development specific checks such as the dual change detection cycles.

View File

@ -824,7 +824,7 @@ figure.image-display
:marked
AngularJS developers know this technique as *transclusion*.
Angular 1的开发者大概知道一项叫做*transclusion*的技术,对,这就是它的马甲。
AngularJS的开发者大概知道一项叫做*transclusion*的技术,对,这就是它的马甲。
:marked
Consider this variation on the [previous _AfterView_](#afterview) example.

View File

@ -10,7 +10,7 @@ include ../_util-fns
:marked
Node.js and npm are essential to Angular development.
Node.js和npm是做Angular 2开发的基础。
Node.js和npm是做Angular开发的基础。
<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">
Get them now</a> if they're not already installed on your machine.
@ -141,7 +141,7 @@ a(id="dependencies")
***@angular/upgrade*** - Set of utilities for upgrading AngularJS applications to Angular.
***@angular/upgrade*** - 一组用于升级Angular 1应用的工具。
***@angular/upgrade*** - 一组用于升级AngularJS应用的工具。
***[system.js](https://github.com/systemjs/systemjs)*** - A dynamic module loader compatible with the
[ES2015 module](http://www.2ality.com/2014/09/es6-modules-final.html) specification.

View File

@ -700,7 +700,7 @@ a(id="no-filter-pipe")
There are no equivalents in Angular.
Angular没有随身发布过滤或列表排序的管道。
熟悉Angular 1的开发人员应该知道`filter`和`orderBy`过滤器但在Angular 2中它们没有等价物。
熟悉AngularJS的开发人员应该知道`filter`和`orderBy`过滤器但在Angular中它们没有等价物。
This is not an oversight. Angular is unlikely to offer such pipes because
(a) they perform poorly and (b) they prevent aggressive minification.
@ -708,7 +708,7 @@ a(id="no-filter-pipe")
We learned earlier that such pipes must be [*impure*](#pure-and-impure-pipes) and that
Angular calls impure pipes in almost every change detection cycle.
这并不是疏忽。Angular 2不想提供这些管道,因为 (a) 它们性能堪忧,以及 (b) 它们会阻止比较激进的代码最小化(minification)。
这并不是疏忽。Angular不想提供这些管道因为 (a) 它们性能堪忧,以及 (b) 它们会阻止比较激进的代码最小化(minification)。
无论是`filter`还是`orderBy`都需要它的参数引用对象型属性。
我们前面学过,这样的管道必然是[*非纯管道*](#pure-and-impure-pipes)并且Angular会在几乎每一次变更检测周期中调用非纯管道。
@ -720,8 +720,8 @@ a(id="no-filter-pipe")
过滤、 特别是排序是昂贵的操作。
当Angular每秒调用很多次这类管道函数时即使是中等规模的列表都可能严重降低用户体验。
在Angular 1程序中,`filter`和`orderBy`经常被误用结果连累到Angular自身人们抱怨说它太慢。
从某种意义上这也不冤谁叫Angular 1把`filter`和`orderBy`作为首发队员呢?是它自己准备了这个性能陷阱。
在AngularJS程序中,`filter`和`orderBy`经常被误用结果连累到Angular自身人们抱怨说它太慢。
从某种意义上这也不冤谁叫AngularJS把`filter`和`orderBy`作为首发队员呢?是它自己准备了这个性能陷阱。
The minification hazard is also compelling if less obvious. Imagine a sorting pipe applied to a list of heroes.
We might sort the list by hero `name` and `planet` of origin properties something like this:

View File

@ -216,7 +216,7 @@ include ../../../_includes/_see-addr-bar
Import what you need from it as you would from any other Angular package.
Angular的路由器是一个可选的服务它用来呈现指定的URL所对应的视图。
它并不是Angular 2核心库的一部分,而是在它自己的`@angular/router`包中。
它并不是Angular核心库的一部分而是在它自己的`@angular/router`包中。
像其它Angular包一样我们可以从它导入所需的一切。
+makeExcerpt('src/app/app.module.1.ts (import)', 'import-router')
@ -674,7 +674,7 @@ a#import
先从路由库导入一些符号。
路由器在它自己的`@angular/router`包中。
它不是Angular 2内核的一部分。该路由器是可选的服务,这是因为并不是所有应用都需要路由,并且,如果需要,你还可能需要另外的路由库。
它不是Angular内核的一部分。该路由器是可选的服务这是因为并不是所有应用都需要路由并且如果需要你还可能需要另外的路由库。
You teach the router how to navigate by configuring it with routes.

File diff suppressed because it is too large Load Diff

View File

@ -72,7 +72,7 @@
li
a(href="/docs/#{lang}/#{vers}/cookbook/ajs-quick-reference.html") AngularJS to Angular
li
a(href="/docs/#{lang}/#{vers}/cookbook/a1-a2-quick-reference.html") Angular 1 迁移到 Angular 2
a(href="/docs/#{lang}/#{vers}/cookbook/a1-a2-quick-reference.html") AngularJS 迁移到 Angular
li
a(href="/docs/#{lang}/#{vers}/cookbook/ngmodule-faq.html") Angular Module FAQ
li

View File

@ -3,12 +3,12 @@
h2 Victor Savkin's Blog Posts
h2 Victor Savkin'的博客
ul
li: a(href="http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications") Managing State in Angular 2 Applications
li: a(href="http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications") 在Angular 2应用中管理状态
li <a href="http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications">Two Phases of Angular 2 Applications</a>
li <a href="http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications">Angular 2应用的两个阶段</a>
li <a href="http://angularjs.blogspot.com/2015/03/forms-in-angular-2.html">Forms in Angular 2</a>
li <a href="http://angularjs.blogspot.com/2015/03/forms-in-angular-2.html">Angular 2中的表单</a>
li: a(href="http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications") Managing State in Angular Applications
li: a(href="http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications") 在Angular应用中管理状态
li <a href="http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications">Two Phases of Angular Applications</a>
li <a href="http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications">Angular应用的两个阶段</a>
li <a href="http://angularjs.blogspot.com/2015/03/forms-in-angular-2.html">Forms in Angular</a>
li <a href="http://angularjs.blogspot.com/2015/03/forms-in-angular-2.html">Angular中的表单</a>
li <a href="http://victorsavkin.com/post/110170125256/change-detection-in-angular-2">Change detection</a>
li <a href="http://victorsavkin.com/post/110170125256/change-detection-in-angular-2">变更检查机制</a>
li <a href="http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in">Functional programming </a>
@ -25,28 +25,28 @@
ul
li <a href="https://www.youtube.com/watch?v=uD6Okha_Yj0">Building a Todo App</a> by David East
li <a href="https://www.youtube.com/watch?v=uD6Okha_Yj0">建立“Todo”范例应用</a> 作者 David East
li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular 2 Forms</a> by David East
li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular 2 表单</a> 作者 David East
li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular Forms</a> by David East
li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular 表单</a> 作者 David East
h4 ng-conf
h4 ng-conf大会视频
ul
li Playlist <a href="https://www.youtube.com/watch?v=QHulaj5ZxbI&index=1&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">of ng-conf 2015 videos</a>.
li <a href="https://www.youtube.com/watch?v=QHulaj5ZxbI&index=1&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">ng-conf 2015 视频列表</a>.
li <a href="https://www.youtube.com/watch?v=QHulaj5ZxbI&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Day 1 Keynote</a>: a broad overview of Angular 2, migration, and where we are headed.
li <a href="https://www.youtube.com/watch?v=QHulaj5ZxbI&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">第一天讲稿</a>: Angular 2概览、移植、发展方向
li <a href="https://www.youtube.com/watch?v=-dMBcqwvYA0&index=21&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Day 2 Keynote</a>: Misko and Rado do a deep-dive on Angular 2 details.
li <a href="https://www.youtube.com/watch?v=-dMBcqwvYA0&index=21&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">第二天讲稿</a>: Misko 和 Rado 深度剖析 Angular 2 实现细节.
li <a href="https://www.youtube.com/watch?v=QHulaj5ZxbI&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Day 1 Keynote</a>: a broad overview of Angular, migration, and where we are headed.
li <a href="https://www.youtube.com/watch?v=QHulaj5ZxbI&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">第一天讲稿</a>: Angular概览、移植、发展方向
li <a href="https://www.youtube.com/watch?v=-dMBcqwvYA0&index=21&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Day 2 Keynote</a>: Misko and Rado do a deep-dive on Angular details.
li <a href="https://www.youtube.com/watch?v=-dMBcqwvYA0&index=21&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">第二天讲稿</a>: Misko 和 Rado 深度剖析 Angular 实现细节.
li <a href="https://www.youtube.com/watch?v=AbunztfV5vU&index=6&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Creating Container Components with Web Components in Angular</a>: Kara Erickson &amp; Rachael L Moore.
li <a href="https://www.youtube.com/watch?v=AbunztfV5vU&index=6&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">用Angular2的Web Components创建容器型组件</a>: Kara Erickson &amp; Rachael L Moore.
li <a href="https://www.youtube.com/watch?v=jvKGQSFQf10&index=31&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Change Detection Reinvented</a>: Why Angular 2 change detection is fast out of the box and options for developers to make it even faster.
li <a href="https://www.youtube.com/watch?v=jvKGQSFQf10&index=31&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">变更检查机制的改造</a>: 为什么Angular 2的变更检查天生更快?开发人员如何设置会让它更快?
li <a href="https://www.youtube.com/watch?v=jvKGQSFQf10&index=31&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Change Detection Reinvented</a>: Why Angular change detection is fast out of the box and options for developers to make it even faster.
li <a href="https://www.youtube.com/watch?v=jvKGQSFQf10&index=31&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">变更检查机制的改造</a>: 为什么Angular的变更检查天生更快开发人员如何设置会让它更快
h4 ng-europe
h4 ng-europe欧洲大会视频
ul
li Oct 2014 <a href="https://www.youtube.com/watch?v=lGdnh8QSPPk&list=PLhc_bKwZngxW_ZlY0NkaGkvKpiA_pzcZ-">playlist of ng-europe videos on Angular 2</a> and the future of Angular.
li 2014年10月 <a href="https://www.youtube.com/watch?v=lGdnh8QSPPk&list=PLhc_bKwZngxW_ZlY0NkaGkvKpiA_pzcZ-">ng-europe的Angular 2视频列表</a> 以及Angular的未来。
li Oct 2014 <a href="https://www.youtube.com/watch?v=lGdnh8QSPPk&list=PLhc_bKwZngxW_ZlY0NkaGkvKpiA_pzcZ-">playlist of ng-europe videos on Angular</a> and the future of Angular.
li 2014年10月 <a href="https://www.youtube.com/watch?v=lGdnh8QSPPk&list=PLhc_bKwZngxW_ZlY0NkaGkvKpiA_pzcZ-">ng-europe的Angular视频列表</a> 以及Angular的未来。
.l-main-section

View File

@ -24,7 +24,7 @@
a(
target="_blank"
href="http://angularjs.blogspot.com/2016/12/angular-240-now-available.html"
) Angular 2.4.0 Now Available
) Angular.4.0 Now Available
p Angular version 2.4.0 - stability-interjection - is now available. This is a minor release, meaning that it contains no breaking changes and that it is a drop-in replacement for 2.x.x...
.author
img(src="/resources/images/bios/stephenfluin.jpg")
@ -56,7 +56,7 @@
a(
target="_blank"
href="https://scotch.io/tutorials/server-side-rendering-in-angular-2-with-angular-universal"
) Server-Side Rendering in Angular 2 with Angular Universal
) Server-Side Rendering in Angular with Angular Universal
p Render your applications on the server for many benefits....
.author
img(src="/resources/images/bios/shield-bio-placeholder.png")
@ -69,7 +69,7 @@
a(
target="_blank"
href="https://www.nativescript.org/blog/optimizing-app-loading-time-with-angular-2-lazy-loading"
) Optimizing app loading time with Angular 2 Lazy Loading
) Optimizing app loading time with Angular Lazy Loading
p When you develop mobile applications you should always be alert on the performance and always optimize. In this blog post I will walk you through a very effective pattern...
.author
img(src="/resources/images/bios/shield-bio-placeholder.png")
@ -82,8 +82,8 @@
a(
target="_blank"
href="https://www.thepolyglotdeveloper.com/2016/10/use-pre-populated-sqlite-database-nativescript-angular-2/"
) Use A Pre-Populated SQLite Database With NativeScript And Angular 2
p I figured it would be a good idea to demonstrate how to ship a NativeScript Angular 2 application with a pre-filled SQLite database rather than populating it on-the-fly....
) Use A Pre-Populated SQLite Database With NativeScript And Angular
p I figured it would be a good idea to demonstrate how to ship a NativeScript Angular application with a pre-filled SQLite database rather than populating it on-the-fly....
.author
img(src="/resources/images/bios/shield-bio-placeholder.png")
.posted Posted by <b>Nic Raboy</b>

View File

@ -50,14 +50,14 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"tooling": {
"icon": "",
"resources": [{
"desc": "A Google Chrome Dev Tools extension for debugging Angular 2 applications.",
"desc": "A Google Chrome Dev Tools extension for debugging Angular applications.",
"id": 0,
"logo": "https://augury.angular.io/images/augury-logo.svg",
"rev": true,
"title": "Augury",
"url": "http://augury.angular.io/"
}, {
"desc": "Server-side Rendering for Angular 2 apps.",
"desc": "Server-side Rendering for Angular apps.",
"id": 1,
"logo": "https://cloud.githubusercontent.com/assets/1016365/10639063/138338bc-7806-11e5-8057-d34c75f3cafc.png",
"rev": true,
@ -71,14 +71,14 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"title": "Lite-server",
"url": "https://github.com/johnpapa/lite-server"
}, {
"desc": "A set of tslint rules for static code analysis of Angular 2 TypeScript projects.",
"desc": "A set of tslint rules for static code analysis of Angular TypeScript projects.",
"id": 3,
"logo": "",
"rev": true,
"title": "Codelyzer",
"url": "https://github.com/mgechev/codelyzer"
}, {
"desc": "This package provides facilities for developers building Angular 2 applications on ASP.NET.",
"desc": "This package provides facilities for developers building Angular applications on ASP.NET.",
"id": 4,
"logo": "",
"rev": true,
@ -118,14 +118,14 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"data": {
"icon": "",
"resources": [{
"desc": "The official library for Firebase and Angular 2",
"desc": "The official library for Firebase and Angular",
"id": 0,
"logo": "",
"rev": true,
"title": "Angular Fire",
"url": "https://github.com/angular/angularfire2"
}, {
"desc": "Use Angular 2 and Meteor to build full-stack JavaScript apps for Mobile and Desktop.",
"desc": "Use Angular and Meteor to build full-stack JavaScript apps for Mobile and Desktop.",
"id": 1,
"logo": "http://www.angular-meteor.com/images/logo.png",
"rev": true,
@ -145,14 +145,14 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"ui": {
"icon": "",
"resources": [{
"desc": "Material Design components for Angular 2",
"desc": "Material Design components for Angular",
"id": 0,
"logo": "",
"rev": true,
"title": "Angular Material 2",
"url": "https://github.com/angular/material2"
}, {
"desc": "PrimeNG is a collection of rich UI components for Angular 2",
"desc": "PrimeNG is a collection of rich UI components for Angular",
"id": 1,
"logo": "http://www.primefaces.org/primeng/showcase/resources/images/primeng.svg",
"rev": true,
@ -166,7 +166,7 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"title": "Kendo UI",
"url": "http://www.telerik.com/blogs/what-to-expect-in-2016-for-kendo-ui-with-angular-2-and-more"
}, {
"desc": "Native Angular 2 components & directives for Lightning Design System",
"desc": "Native Angular components & directives for Lightning Design System",
"id": 3,
"logo": "http://ng-lightning.github.io/ng-lightning/img/shield.svg",
"rev": true,
@ -200,14 +200,14 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"platform": {
"icon": "",
"resources": [{
"desc": "Integrating NativeScript with Angular 2.",
"desc": "Integrating NativeScript with Angular.",
"id": 0,
"logo": "",
"rev": true,
"title": "NativeScript",
"url": "https://github.com/NativeScript/nativescript-angular"
}, {
"desc": "Angular 2 and React Native to build applications for Android and iOS",
"desc": "Angular and React Native to build applications for Android and iOS",
"id": 1,
"logo": "",
"rev": true,
@ -221,14 +221,14 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"title": "Ionic",
"url": "http://ionicframework.com/docs/v2/"
}, {
"desc": "Electron Platform for Angular 2.",
"desc": "Electron Platform for Angular.",
"id": 3,
"logo": "",
"rev": true,
"title": "Electron",
"url": "http://github.com/angular/angular-electron"
}, {
"desc": "An Universal Windows App (uwp) powered by Angular 2",
"desc": "An Universal Windows App (uwp) powered by Angular",
"id": 4,
"logo": "",
"rev": true,
@ -356,21 +356,21 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"id": 5,
"logo": "",
"rev": true,
"title": "Angular 2丛书",
"title": "Angular丛书",
"url": "https://leanpub.com/angular2-book"
}, {
"desc": "",
"id": 6,
"logo": "",
"rev": true,
"title": "Angular 2忍者训练",
"title": "Angular忍者训练",
"url": "https://books.ninja-squad.com/angular2"
}, {
"desc": "",
"id": 7,
"logo": "",
"rev": true,
"title": "Angular 2实战",
"title": "Angular实战",
"url": "https://leanpub.com/practical-angular-2"
}],
"title": "书籍"

View File

@ -12,7 +12,7 @@
"subtitle": "Angular官方中文版的简介、致辞等"
},
"blog": {
"title": "Angular 2震撼登场!",
"subtitle": "万众瞩目之下Angular 2终于正式发布啦!"
"title": "Angular震撼登场!",
"subtitle": "万众瞩目之下Angular终于正式发布啦!"
}
}

View File

@ -1,16 +1,16 @@
.about-cn-translation
:marked
Today, at a special meetup at Google HQ, we announced the final release version of Angular 2, the full-platform successor to Angular 1.
Today, at a special meetup at Google HQ, we announced the final release version of Angular, the full-platform successor to AngularJS.
今天在Google总部一个特别的聚会上我们发布了Angular 2的最终版Angular 1的全平台继任者。
今天在Google总部一个特别的聚会上我们发布了Angular的最终版AngularJS的全平台继任者。
What does "final" mean? Stability that's been validated across a wide range of use cases, and a framework that's been optimized for developer productivity, small payload size, and performance. With ahead-of-time compilation and built-in lazy-loading, weve made sure that you can deploy the fastest, smallest applications across the browser, desktop, and mobile environments. This release also represents huge improvements to developer productivity with the Angular CLI and styleguide.
“最终版”意味着什么意味着它的稳定性已经得到了大范围用例的验证意味着它已经针对产品化、文件尺寸和性能进行过优化意味着借助预编译技术和内置的延迟加载机制我们可以确信你能发布出最快、最小的应用并且横跨浏览器、桌面和移动平台意味着为开发人员准备的Angular CLI和风格指南得到了大幅强化。
Angular 1 first solved the problem of how to develop for an emerging web. Six years later, the challenges faced by todays application developers, and the sophistication of the devices that applications must support, have both changed immensely. With this release, and its more capable versions of the Router, Forms, and other core APIs, today you can build amazing apps for any platform. If you prefer your own approach, Angular is also modular and flexible, so you can use your favorite third-party library or write your own.
AngularJS first solved the problem of how to develop for an emerging web. Six years later, the challenges faced by todays application developers, and the sophistication of the devices that applications must support, have both changed immensely. With this release, and its more capable versions of the Router, Forms, and other core APIs, today you can build amazing apps for any platform. If you prefer your own approach, Angular is also modular and flexible, so you can use your favorite third-party library or write your own.
Angular 1首先为新兴的Web技术解决了如何开发的问题。六年后的今天开发人员面对的挑战是应用程序必须支持多种多样、千变万化的设备。在这次发布中我们有了更强力的路由器、表单和其它核心API。现在你可以为任何平台构建酷炫的应用了。也许你会更喜欢用自己的方式工作Angular同样是模块化并富有弹性的这样你就可以自由使用你喜欢的第三方库了 —— 或是自己写一个!
AngularJS首先为新兴的Web技术解决了如何开发的问题。六年后的今天开发人员面对的挑战是应用程序必须支持多种多样、千变万化的设备。在这次发布中我们有了更强力的路由器、表单和其它核心API。现在你可以为任何平台构建酷炫的应用了。也许你会更喜欢用自己的方式工作Angular同样是模块化并富有弹性的这样你就可以自由使用你喜欢的第三方库了 —— 或是自己写一个!
From the beginning, we built Angular in collaboration with the open source development community. We are grateful to the large number of contributors who dedicated time to submitting pull requests, issues, and repro cases, who discussed and debated design decisions, and validated (and pushed back on) our RCs. We wish we could have brought every one of you in person to our meetup so you could celebrate this milestone with us tonight!
@ -22,7 +22,7 @@
## 下一步做什么?
Angular is now ready for the world, and were excited for you to join the thousands of developers already building with Angular 2. But whats coming next for Angular?
Angular is now ready for the world, and were excited for you to join the thousands of developers already building with Angular. But whats coming next for Angular?
Angular已经面世我们怀着激动的心情欢迎您成为无数个用Angular构建应用程序的开发人员中的一位。那么Angular下一步打算做什么
@ -48,9 +48,9 @@
## Semantic Versioning
## 语义化版本
We heard loud and clear that our RC labeling was confusing. To make it easy to manage dependencies on stable Angular releases, starting today with Angular 2.0.0, we will move to semantic versioning. Angular versioning will then follow the MAJOR.MINOR.PATCH scheme as described by semver:
We heard loud and clear that our RC labeling was confusing. To make it easy to manage dependencies on stable Angular releases, starting today with Angular.0.0, we will move to semantic versioning. Angular versioning will then follow the MAJOR.MINOR.PATCH scheme as described by semver:
我们得承认以前的RC版本标签有些扑朔迷离。为了让您在Angular的稳定版中管理依赖更轻松从今天的Angular 2.0.0开始我们将迁移到“语义化版本”规范。今后的Angular版本将遵循semver所描述的MAJOR.MINOR.PATCH方案
我们得承认以前的RC版本标签有些扑朔迷离。为了让您在Angular的稳定版中管理依赖更轻松从今天的Angular.0.0开始我们将迁移到“语义化版本”规范。今后的Angular版本将遵循semver所描述的MAJOR.MINOR.PATCH方案
1. the MAJOR version gets incremented when incompatible API changes are made to stable APIs,
1. 当对标为稳定的API进行不兼容的变更时增加主版本号MAJOR