This commit is contained in:
rexebin 2016-09-18 18:46:39 +01:00
commit b7568e4649
10 changed files with 105 additions and 76 deletions

View File

@ -1,5 +0,0 @@
{
"index" : {
"title" : "API 2.0 Preview"
}
}

View File

@ -1,13 +0,0 @@
:marked
> **WARNING:** API documentation is preliminary and subject to change.
> **Known issues:** Although this generated API reference displays Dart
APIs, individual pages sometimes describe TypeScript APIs accompanied with
TypeScript code. The angular.io issue tracker contains [all known
issues][api-issues]; if you notice others, please [report
them][new-issue]. Thanks!
[new-issue]: https://github.com/angular/angular.io/issues/new?labels=dart,api&title=%5BDart%5D%5BAPI%5D%20
[api-issues]: https://github.com/angular/angular.io/issues?q=label%3Aapi+label%3Adart
api-list(src="api-list.json" lang="dart")

View File

@ -1,4 +1,4 @@
- var base = current.path[4] ? '.' : './guide';
.l-content-small.grid-fluid.docs-content.cheatsheet
ngio-cheatsheet(src= base + '/cheatsheet.json')
ngio-cheatsheet(src= base + '/cheatsheet-cn.json')

View File

@ -69,7 +69,7 @@
},
"visual-studio-2015": {
"title": "Visual Studio 2015快速开始",
"intro": "使用Visual Studio 2015快速开始"
"title": "Visual Studio 2015快速起步",
"intro": "使用Visual Studio 2015快速起步"
}
}

View File

@ -2,57 +2,101 @@ include ../_util-fns
:marked
# Angular Modules (NgModules) have landed in Angular RC5!
# Angular模块NgModule功能在Angular RC5中发布了
_Angular Modules_, also known as _NgModules_, are the powerful new way to organize and bootstrap your Angular application.
*Angular模块*(也叫*NgModule*)是组织代码和引导应用的强力新途径。
.l-sub-section
:marked
Read more in the ["RC5 and NgModules" announcement](https://angularjs.blogspot.com).
要了解更多,参见["RC5和NgModule"正式发布](https://angularjs.blogspot.com)。
Learn the details of NgModule in the [Angular Module](../guide/ngmodule.html) chapter.
要深入了解NgModule参见[Angular Module](../guide/ngmodule.html)页。
:marked
The new `@NgModule` decorator gives you module-level components, directives, and pipes without
the need to specify them repeatedly in every component of your application.
新的`@NgModule`装饰器让我们可以指定模块级的组件、指令和管道,而不需要在应用中的每个组件中都指定它们。
The `@NgModule` metadata give the Angular compiler the context needed so that you can use the same code
regardless of whether you are running Angular in [Ahead-of-time](../glossary.html#aot) or [Just
in Time](../glossary.html#jit) mode.
`@NgModule`元数据为Angular编译器提供了上下文环境以便我们可以让同一套代码分别运行在[预编译AoT模式](../glossary.html#aot)或[即时编译JiT模式](../glossary.html#jit)。
## How do I use them?
## 如何使用?
If you were previously writing an Angular application, your app should continue to work in RC5.
Weve worked hard to ensure that applications that worked with RC4 continue to work while you migrate.
For this to work, were doing 2 things automatically for you:
如果你曾经写过Angular应用那么它应该仍然能在RC5中工作。
我们付出了很多努力来确保RC4中的应用也能正常工作在RC5中。
* We create an implicit `NgModule` for you as part of the `bootstrap()` command
* 我们在`bootstrap()`命令中会为你创建一个隐式的`NgModule`
* We automatically hoist your components, pipes, and directives
* 我们会自动升级你的组件、管道和指令
While your application will continue to work today,
its important that you update your application to ensure future updates and deprecations dont negatively affect you.
To make it easier, you can think of the process as having 5 steps.
虽然应用仍然能工作,但你最好还是升级下应用,以确保未来的升级和废弃的特性不会给你带来困扰。
要让这项工作更容易,你可以遵循如下五个步骤:
1. **Update to RC5** - Your application should continue to work without modification, but its important that you are running the latest version of Angular.
1. **升级到RC5** - 你的应用不用修改也仍然能正常工作但重点是你要运行在最新版本的Angular中。
2. **Create an _NgModule_** - Create the root `NgModule` that youll use to bootstrap your application.
2. **创建*NgModule*** - 创建一个根`NgModule`,你要用它来引导应用程序。
3. **Update your bootstrap** - Bootstrap that module instead of your root component
3. **升级你的引导代码** - 改成引导根模块,而不再是根组件
4. **Update your 3rd party libraries** - Take advantage of the latest from Forms, Material, Http, and more
4. **升级你的第三方库** - 获得最新版表单、Material设计、Http等模块的优点
5. **Cleanup** - Clean up your code.
The deprecated classes, methods and properties will be removed from Angular very soon.
5. **清理** - 清理你的代码。那些被标记为废弃的类、方法和属性将很快从Angular中移除
Prefer to look at code and diffs?
Check out the upgrade in [one commit](https://github.com/StephenFluin/ngmodule-migration/commit/9f9c6ae099346e491fc31d77bf65ed440e1f164c).
想看看代码级变更?
那就来[这个提交](https://github.com/StephenFluin/ngmodule-migration/commit/9f9c6ae099346e491fc31d77bf65ed440e1f164c)吧。
## 1. Update to RC5
## 1. 升级到RC5
If you use npm, you should be able to either update your `package.json` file and run `npm install`.
Or alternatively you can run the following command:
如果使用npm那么你可以手动修改`package.json`文件并运行`npm install`命令,或者直接运行下列命令:
code-example(format='.' language='bash').
npm install @angular/{core,common,compiler,platform-browser,platform-browser-dynamic} --save
:marked
Update your optional libraries
更新你的可选库
code-example(format='.' language='bash').
npm install @angular/router
@ -61,13 +105,20 @@ code-example(format='.' language='bash').
:marked
Update the Angular CLI if you're using that tool
如果你在使用Angular CLI也要更新它
code-example(format='.' language='bash').
npm install angular-cli @angular/tsc-wrapped --save-dev
:marked
## 2. Create an _NgModule_
## 2. 创建*NgModule*
Create a new file called app.module.ts. Populate it with your root component as follows:
创建一个名叫`app.module.ts`的新文件,把以前的根组件换成这样:
code-example(format='.' language='javascript').
import { NgModule } from '@angular/core';
@ -83,7 +134,12 @@ code-example(format='.' language='javascript').
:marked
## 3. Update your bootstrap
## 3. 升级你的引导代码
Update your `main.ts` file to bootstrap using the "Just-in-time" (JiT) compiler.
升级`main.ts`文件改用即时JiT编译器来引导。
code-example(format='.' language='javascript').
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@ -93,8 +149,13 @@ code-example(format='.' language='javascript').
:marked
## 4. Import library modules in your _NgModule_
## 4. 在*NgModule*中导入库模块
Remove the Angular and 3rd party library providers from your `AppComponent` providers
and switch to `NgModule` imports as seen in this example.
从你的`AppComponent`的`providers`中移除Angular和第三方库中的服务提供商改为使用`NgModule`中的`imports`,就像这样:
code-example(format='.' language='javascript').
imports: [
@ -113,15 +174,26 @@ code-example(format='.' language='javascript').
:marked
## 5. Cleanup
## 5. 清理
For RC5, you can leave your components, directives and pipes
in the `directives` and `pipes` properties of your `@Component` metadata.
In fact, we automatically hoist (add) them to the NgModule to which they belong.
对于RC5来说你仍然可以在`@Component`元数据的`directives`和`pipes`属性中指定组件、指令和管道。
实际上我们会自动把它们加入到它们所属的NgModule中去。
.alert.is-important
:marked
This option is temporary for backward compatibility.
It will be removed in the final release of Angular 2.0.
这个选项只是为了向后兼容而临时设置的。
当Angular 2.0正式发布的时候,它将会被移除。
Get ahead of the game and start moving your component `directives` and `pipes`
into module `declarations` as soon as possible.
We intend to delete _all_ deprecated class, methods, and properties in the next RC.
你可以先继续,但要尽早把这些组件、指令和管道移到模块的`declarations`中。
我们准备在下一个RC中删除*所有*废弃的类、方法和属性。

View File

@ -61,12 +61,12 @@ code-example(format='')
The [Title](../api/platform-browser/index/Title-class.html) service is a simple class that provides an API
for getting and setting the current HTML document title:
幸运的是Angular 2在*浏览器平台*的包中,提供了一个`Title`服务,弥补了这个差别
幸运的是Angular 2在*浏览器平台*的包中,提供了一个`Title`服务,弥补了这种差异
[Title](../api/platform/browser/Title-class.html)服务是一个简单的类提供了一个API用来获取和设置当前HTML文档的标题。
* `getTitle() : string` — Gets the title of the current HTML document.
*`getTitle(): string` —— 获取当前HTML文档的标题。
* `getTitle(): string` —— 获取当前HTML文档的标题。
* `setTitle( newTitle : string )` — Sets the title of the current HTML document.

View File

@ -35,7 +35,7 @@ block includes
:marked
## Ahead-of-time (AoT) compilation
## Ahead of Time (AOT) 提前编译
## Ahead of Time (AOT) 编译
.l-sub-section
:marked
@ -44,7 +44,7 @@ block includes
to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.
Ahead-of-time compiled applications also benefit from decreased load time and increased performance.
开发者可以在构造时(build-time)编译Angular应用程序。通过`Compiler-cli` - `ngc`编译应用程序,应用可以从一个模块工厂(Module Factory)直接启动意思是不再需要把Angular编译器添加到JavaScript包中。提前编译的应用程序将加载迅速,并具有更高的性能。
开发者可以在构造时(build-time)编译Angular应用程序。通过`Compiler-cli` - `ngc`编译应用程序,应用可以从一个模块工厂(Module Factory)直接启动意思是不再需要把Angular编译器添加到JavaScript包中。编译的应用程序将加载迅速,并具有更高的性能。
:marked
## Angular module
@ -603,7 +603,7 @@ a#H
Consider using the [ahead-of-time](#aot) mode for production apps.
Angular的即时编译在浏览器中启动并编译所有的组件和模块并动态运行应用程序。它很适合在开发期使用。但是在产品发布时
推荐采用[提前编译Ahead of Time](#aot)模式。
推荐采用[编译Ahead of Time](#aot)模式。
.l-main-section#K
:marked

View File

@ -1,28 +1,28 @@
{
"currentEnvironment": "TypeScript",
"version": {
"raw": "2.0.0-rc.5",
"raw": "2.0.0",
"major": 2,
"minor": 0,
"patch": 0,
"patch": 1,
"prerelease": [
"local"
],
"build": "sha.8c6f6c1",
"version": "2.0.0-local",
"build": "sha.efc7326",
"version": "2.0.1-local",
"codeName": "snapshot",
"isSnapshot": true,
"full": "2.0.0-local+sha.8c6f6c1",
"full": "2.0.1-local+sha.efc7326",
"branch": "master",
"commitSHA": "8c6f6c173da20113d467e57fd4ee5ab06d0a056b"
"commitSHA": "efc7326926b826dd33eeb43db391afd7c0b03ab8"
},
"sections": [
{
"name": "引导",
"description": "<p><code>import { platformBrowserDynamic } from &#39;@angular/platform-browser-dynamic&#39;;</code>\n\n</p>\n",
"description": "<p><code>import { platformBrowserDynamic } from &#39;@angular/platform-browser-dynamic&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "platformBrowserDynamic().bootstrapModule(MyAppModule);",
"syntax": "platformBrowserDynamic().bootstrapModule(AppModule);",
"bold": [
"platformBrowserDynamic().bootstrapModule"
],
@ -36,7 +36,7 @@
"description": "<p><code>import { NgModule } from &#39;@angular/core&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "@NgModule({ declarations: ..., imports: ..., exports: ..., bootstrap: ...})\nclass MyModule {}",
"syntax": "@NgModule({ declarations: ..., imports: ...,\n exports: ..., providers: ..., bootstrap: ...})\nclass MyModule {}",
"bold": [
"NgModule"
],
@ -156,11 +156,11 @@
"description": "<p><code>*</code>符号表示当前元素将被转变成一个内嵌模板。等价于:\n<code>&lt;template [myUnless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
},
{
"syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
"syntax": "<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>",
"bold": [
"{{cardNumber | myCreditCardNumberFormatter}}"
"{{cardNumber | myCardNumberFormatter}}"
],
"description": "<p>通过名叫<code>myCreditCardNumberFormatter</code>的管道,转换表达式的当前值<code>cardNumber</code>。</p>\n"
"description": "<p>通过名叫<code>myCardNumberFormatter</code>的管道,转换表达式的当前值<code>cardNumber</code>。</p>\n"
},
{
"syntax": "<p>Employer: {{employer?.companyName}}</p>",
@ -188,7 +188,7 @@
},
{
"name": "内置指令",
"description": "<p><code>import { CommonModule } from &#39;@angular/common&#39;;</code>\n\n</p>\n",
"description": "<p><code>import { CommonModule } from &#39;@angular/common&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "<section *ngIf=\"showSection\">",
@ -226,7 +226,7 @@
},
{
"name": "表单",
"description": "<p><code>import { FormsModule } from &#39;@angular/forms&#39;;</code>\n\n</p>\n",
"description": "<p><code>import { FormsModule } from &#39;@angular/forms&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "<input [(ngModel)]=\"userName\">",
@ -240,7 +240,7 @@
},
{
"name": "类装饰器",
"description": "<p><code>import { Directive, ... } from &#39;@angular/core&#39;;</code>\n\n</p>\n",
"description": "<p><code>import { Directive, ... } from &#39;@angular/core&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "@Component({...})\nclass MyComponent() {}",
@ -275,7 +275,7 @@
},
{
"name": "指令配置",
"description": "<p><code>@Directive({ property1: value1, ... })</code>\n\n</p>\n",
"description": "<p><code>@Directive({ property1: value1, ... })</code>\n</p>\n",
"items": [
{
"syntax": "selector: '.cool-button:not(a)'",
@ -333,7 +333,7 @@
},
{
"name": "供指令类或组件类用的字段装饰器。",
"description": "<p><code>import { Input, ... } from &#39;@angular/core&#39;;</code>\n\n</p>\n",
"description": "<p><code>import { Input, ... } from &#39;@angular/core&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "@Input() myProperty;",
@ -466,7 +466,7 @@
},
{
"name": "依赖注入配置",
"description": "<p></p>\n",
"description": "",
"items": [
{
"syntax": "{ provide: MyService, useClass: MyMockService }",
@ -497,7 +497,7 @@
},
{
"name": "路由与导航",
"description": "<p><code>import { Routes, RouterModule, ... } from &#39;@angular/router&#39;;</code>\n\n</p>\n",
"description": "<p><code>import { Routes, RouterModule, ... } from &#39;@angular/router&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "const routes: Routes = [\n { path: '', component: HomeComponent },\n { path: 'path/:routeParam', component: MyComponent },\n { path: 'staticPath', component: ... },\n { path: '**', component: ... },\n { path: 'oldPath', redirectTo: '/staticPath' },\n { path: ..., component: ..., data: { message: 'Custom' } }\n]);\n\nconst routing = RouterModule.forRoot(routes);",
@ -523,7 +523,7 @@
{
"syntax": "<a [routerLink]=\"[ '/path' ]\" routerLinkActive=\"active\">",
"bold": [],
"description": "<p>The provided class(es) will be added to the element when the routerLink becomes the current active route.</p>\n"
"description": "<p>当<code>routerLink</code>被激活时就把指定的CSS类添加到该元素上。</p>\n"
},
{
"syntax": "class CanActivateGuard implements CanActivate {\n canActivate(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canActivate: [CanActivateGuard] }",
@ -540,7 +540,7 @@
"description": "<p>一个用来定义类的接口,路由器在导航后会首先调用它来决定是否应该取消该组件的激活状态。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。</p>\n"
},
{
"syntax": "class CanActivateChildGuard implements CanActivateChild {\n canActivateChild(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canActivateChild: [CanActivateGuard], children: ... }",
"syntax": "class CanActivateChildGuard implements CanActivateChild {\n canActivateChild(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canActivateChild: [CanActivateGuard],\n children: ... }",
"bold": [
"CanActivateChild"
],
@ -559,31 +559,6 @@
"CanLoad"
],
"description": "<p>一个用来定义类的接口,路由器会首先调用它来决定一个延迟加载的模块是否应该被加载。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。</p>\n"
},
{
"syntax": "",
"bold": [],
"description": "<p></p>\n"
},
{
"syntax": "",
"bold": [],
"description": "<p>.</p>\n"
},
{
"syntax": "",
"bold": [],
"description": "<p></p>\n"
},
{
"syntax": "",
"bold": [],
"description": "<p></p>\n"
},
{
"syntax": "",
"bold": [],
"description": "<p></p>\n"
}
],
"index": 11

View File

@ -264,7 +264,7 @@ a#bootstrap
### Static bootstrapping with the Ahead-of-time (AoT) compiler
### 使用预编译器AoT - Ahead-Of-Time进行静态引导
### 使用预编译器AoT - Ahead-Of-Time进行静态引导
Consider the static alternative which can produce a much smaller application that
launches faster, especially on mobile devices and high latency networks.

View File

@ -13,9 +13,9 @@ angularIO.directive('ngioCheatsheet', function() {
};
},
template:
'<h2>Angular for {{$ctrl.currentEnvironment}} Cheat Sheet (v{{ $ctrl.version.raw }})</h2>' +
'<h2>Angular for {{$ctrl.currentEnvironment}} 小抄 (v{{ $ctrl.version.raw }})</h2>' +
'<br>' +
'<div ng-if="!$ctrl.sections">Loading Cheatsheet...</div>\n' +
'<div ng-if="!$ctrl.sections">正在加载小抄...</div>\n' +
'<table ng-repeat="section in $ctrl.sections" ng-cloak>\n' +
'<tr>\n' +
' <th>{{section.name}}</th>\n' +
@ -27,4 +27,4 @@ angularIO.directive('ngioCheatsheet', function() {
'</tr>\n' +
'</table>'
};
});
});