iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Polish appmodule.jade (round 2)

This commit is contained in:
Yang Lin 2016-11-30 20:29:32 +08:00
parent 4e614daa93
commit 8382497c64
1 changed files with 45 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
public/docs/ts/latest/guide/appmodule.jade
View File

@ -13,7 +13,7 @@ include ../_util-fns
The [setup](setup.html) instructions produce a new project with the following minimal `AppModule`. The [setup](setup.html) instructions produce a new project with the following minimal `AppModule`.
You'll evolve this module as your application grows. You'll evolve this module as your application grows.
[搭建本地开发环境](setup.html)讲解了如何使用下面这个最小的`AppModule`来创建一个新项目。 [开发环境](setup.html)讲解了如何使用下面这个最小的`AppModule`来创建一个新项目。
这个模块随着应用的成长而演变。 这个模块随着应用的成长而演变。
+makeExample('setup/ts/app/app.module.ts','', 'app/app.module.ts')(format='.') +makeExample('setup/ts/app/app.module.ts','', 'app/app.module.ts')(format='.')
@ -22,47 +22,47 @@ include ../_util-fns
After the `import` statements, you come to a class adorned with the After the `import` statements, you come to a class adorned with the
**`@NgModule`** [_decorator_](glossary.html#decorator '"Decorator" explained'). **`@NgModule`** [_decorator_](glossary.html#decorator '"Decorator" explained').
`import`声明之后，有个类被 **`@NgModule`**[装饰器](glossary.html#decorator '"Decorator" explained')所装饰。 `import`语句之后，可以看到一个**`@NgModule`**[装饰器](glossary.html#decorator '"Decorator" explained')修饰的类。
The `@NgModule` decorator identifies `AppModule` as an Angular module class (also called an `NgModule` class). The `@NgModule` decorator identifies `AppModule` as an Angular module class (also called an `NgModule` class).
`@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application. `@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application.
该`@NgModule`装饰器将`AppModule`标记为 Angular 模块类（也叫`NgModule`类）。 `@NgModule`装饰器将`AppModule`标记为 Angular 模块类（也叫`NgModule`类）。
`@NgModule`接受一个*元数据*对象，为 Angular 描述如何编译和启动应用。 `@NgModule`接受一个_元数据_对象，告诉 Angular 如何编译和启动应用。
* **_imports_** — the `BrowserModule` that this and every application needs to run in a browser. * **_imports_** — the `BrowserModule` that this and every application needs to run in a browser.
* ***imports*** —— `BrowserModule`，这个和每个在浏览器中运行应用都需要它。 **_imports_** — `BrowserModule`，这个和每个在浏览器中运行应用都需要它。
* **_declarations_** — the application's lone component, which is also ... * **_declarations_** — the application's lone component, which is also ...
* ***declarations*** —— 应用的唯一组件，它同时也是... **_declarations_** — 应用的唯一组件，它同时也是...
* **_bootstrap_** — the _root_ component that Angular creates and inserts into the `index.html` host web page. * **_bootstrap_** — the _root_ component that Angular creates and inserts into the `index.html` host web page.
* ***bootstrap*** —— *根*组件，Angular 创建它并将其插入到`index.html`宿主页面。 **_bootstrap_** — _根_组件，Angular 创建它并插入`index.html`宿主页面。
The [Angular Modules (NgModules)](ngmodule.html) guide dives deeply into the details of Angular modules. The [Angular Modules (NgModules)](ngmodule.html) guide dives deeply into the details of Angular modules.
All you need to know at the moment is a few basics about these three properties. All you need to know at the moment is a few basics about these three properties.
[Angular 模块 (NgModules)](ngmodule.html)指南深入讲解了 Angular 模块。 [Angular 模块 (NgModules)](ngmodule.html) 指南深入讲解了 Angular 模块。
现在先初步了解这三个属性。 现在先初步了解这三个属性。
a#imports a#imports
:marked :marked
### The _imports_ array ### The _imports_ array
### *imports* 数组 ### _imports_ 数组
Angular modules are a way to consolidate features that belong together into discrete units. Angular modules are a way to consolidate features that belong together into discrete units.
Many features of Angular itself are organized as Angular modules. Many features of Angular itself are organized as Angular modules.
HTTP services are in the `HttpModule`. The router is in the `RouterModule`. HTTP services are in the `HttpModule`. The router is in the `RouterModule`.
Eventually you may create a feature module. Eventually you may create a feature module.
Angular 模块是用来合并那些属于离散单元的特性的。 Angular 模块把特性合并成离散单元的一种方式。
Angular 自身的许多特性也是通过 Angular 模块组织的。 Angular 自身的许多特性也是通过 Angular 模块组织的。
HTTP 服务在`HttpModule`里。路由器在`RouterModule`中。 HTTP 服务在`HttpModule`里。路由器在`RouterModule`中。
最后，你可能也会创建特性模块。 最终，你可能也会创建特性模块。
Add a module to the `imports` array when the application requires its features. Add a module to the `imports` array when the application requires its features.
@ -73,35 +73,35 @@ a#imports
So every such application includes the `BrowserModule` in its _root_ `AppModule`'s `imports` array. So every such application includes the `BrowserModule` in its _root_ `AppModule`'s `imports` array.
Other guide and cookbook pages will tell you when you need to add additional modules to this array. Other guide and cookbook pages will tell you when you need to add additional modules to this array.
*本*应用和大多数其他应用一样，在浏览器中运行。 _这个_应用和大多数其他应用一样，在浏览器中运行。
每个浏览器中运行的应用都需要`@angular/platform-browser`里的`BrowserModule`。 每个浏览器中运行的应用都需要`@angular/platform-browser`里的`BrowserModule`。
所以每个这样的应用都在其*根*`AppModule`的`imports`数组中包含了`BrowserModule`。 所以每个这样的应用都在其_根_`AppModule`的`imports`数组中包含`BrowserModule`。
在需要添加额外模块到此数组时，其他指南和烹饪书页面会告诉你。 在需要添加额外模块到此数组时，其他指南和烹饪宝典页面会告诉你。
.alert.is-important .alert.is-important
:marked :marked
**Only `NgModule` classes** go in the `imports` array. Don't put any other kind of class in `imports`. **Only `NgModule` classes** go in the `imports` array. Don't put any other kind of class in `imports`.
`imports`数组中应该**只有`NgModule`类**。不要放置其他类型的类。 `imports`数组中应该**只有`NgModule`类**。不要放置其它类型的类。
.l-sub-section .l-sub-section
:marked :marked
Don't confuse the `import` statements at the top of the file with the Angular module's `imports` array. Don't confuse the `import` statements at the top of the file with the Angular module's `imports` array.
They have different jobs. They have different jobs.
不要将 Angular 模块的`imports`数组与文件顶部的`import`声明弄混淆了。它们的功能不同。 不要将 Angular 模块的`imports`数组与文件顶部的`import`语句弄混淆了。它们的功能不同。
The _JavaScript_ `import` statements give you access to symbols _exported_ by other files The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
so you can reference them within _this_ file. so you can reference them within _this_ file.
They have nothing to do with Angular and Angular knows nothing about them. They have nothing to do with Angular and Angular knows nothing about them.
*JavaScript* 的`import`声明允许你访问在其他文件中*导出*的符号，这样你可以在*当前*文件引用它们。 _JavaScript_ 的`import`声明允许你访问在其他文件中_导出_的符号，这样你可以在_当前_文件引用它们。
它们与 Angular 毫无关系，而且 Angular 对它们一无所知。 它们与 Angular 毫无关系，Angular 对它们也一无所知。
The _module's_ `imports` array tells Angular about specific Angular modules — classes decorated with `@NgModule` — The _module's_ `imports` array tells Angular about specific Angular modules — classes decorated with `@NgModule` —
that the application needs to function properly. that the application needs to function properly.
*模块*的`imports`数组为 Angular 提供特定 Angular 模块——被`@NgModule`装饰的类——应用需要它们来正常工作。 _模块_的`imports`数组告诉 Angular 特定 Angular 模块的信息 — 用`@NgModule`装饰的类 — 应用需要它们来正常工作。
a#declarations a#declarations
:marked :marked
### The _declarations_ array ### The _declarations_ array
@ -112,50 +112,54 @@ a#declarations
You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array. You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array.
As you create more components, you'll add them to `declarations`. As you create more components, you'll add them to `declarations`.
*每个*组件必须在一个，而且仅仅一个`NgModule`类中声明。 *每个*组件必须在且仅在一个`NgModule`类中声明。
通过将其列到`AppModule`模块的`declarations`数组中，你告诉 Angular 哪个组件属于`AppModule`。 通过将其列到`AppModule`模块的`declarations`数组中，告诉 Angular 哪个组件属于`AppModule`。
在创建更多组件的过程中，逐步将它们添加到`declarations`中。 在创建更多组件的过程中，逐步将它们添加到`declarations`中。
You'll learn to create two other kinds of classes — You'll learn to create two other kinds of classes —
[directives](attribute-directives.html) and [pipes](pipes.html) — [directives](attribute-directives.html) and [pipes](pipes.html) —
that you must also add to the `declarations` array. that you must also add to the `declarations` array.
你会学到怎样创建其他两种类——[指令](attribute-directives.html)和[管道](pipes.html)——它们也必须被添加到`declarations`数组。 你将会学习如何创建其他两种类 — [指令](attribute-directives.html)和[管道](pipes.html) —
它们也必须被添加到`declarations`数组。
.alert.is-important .alert.is-important
:marked :marked
**Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.   **Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.  
Don't put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes. Don't put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes.
**只有*可以声明的***——*组件*、*指令*和*管道*——属于`declarations`数组。不要将其他类型的类添加到`declarations`中，非`NgModule`类, 非服务类，亦非模型类。 **只有*可以声明的** — _组件_、_指令_和_管道_ — 属于`declarations`数组。
不要将其他类型的类添加到`declarations`中，例如`NgModule`类, 服务类，模型类。
a#bootstrap-array a#bootstrap-array
:marked :marked
### The _bootstrap_ array ### The _bootstrap_ array
### *bootstrap* 数组 ### _bootstrap_ 数组
You launch the application by [_bootstrapping_](#main) the root `AppModule`. You launch the application by [_bootstrapping_](#main) the root `AppModule`.
Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
and inserts each one into the browser DOM. and inserts each one into the browser DOM.
通过[_引导_](#main)根`AppModule`来启动应用。在启动过程中，其中一步是创建列在`bootstrap`数组的组件，并将它们每一个都插入到浏览器的DOM中。 通过[_引导_](#main)根`AppModule`来启动应用。
在启动过程中，其中一步是创建列在`bootstrap`数组的组件，
并将它们每一个都插入到浏览器的DOM中。
Each bootstrapped component is the base of its own tree of components. Each bootstrapped component is the base of its own tree of components.
Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
每个引导的组件都是它自己的组件树的根。 每个被引导的组件都是它自己的组件树的根。
插入一个被引导的组件通常触发一系列组件的创建并形成组件树。 插入一个被引导的组件通常触发一系列组件的创建并形成组件树。
While you can put more than one component tree on a host web page, that's not typical. While you can put more than one component tree on a host web page, that's not typical.
Most applications have only one component tree and they bootstrap a single _root_ component. Most applications have only one component tree and they bootstrap a single _root_ component.
虽然你可以将多个组件树插入到宿主页面，但是这并不典型。 虽然你可以将多个组件树插入到宿主页面，但并不普遍。
大多数应用只有一个组件树，它们引导单一*根*组件。 大多数应用只有一个组件树，它们引导单一_根_组件。
You can call the one _root_ component anything you want but most developers call it `AppComponent`. You can call the one _root_ component anything you want but most developers call it `AppComponent`.
你可以为这个*根*组件取任何名字，但是大多数程序员将其取名为`AppComponent`。 你可以为这个_根_组件取任何名字，但是大多数程序员将其取名为`AppComponent`。
Which brings us to the _bootstrapping_ process itself. Which brings us to the _bootstrapping_ process itself.
@ -177,7 +181,7 @@ l-main-section
In the beginning, you will compile the application dynamically with the _Just-in-Time (JiT)_ compiler In the beginning, you will compile the application dynamically with the _Just-in-Time (JiT)_ compiler
and you'll run it in a browser. You can learn about other options later. and you'll run it in a browser. You can learn about other options later.
在开始时，你将使用_即时 (JiT) _编译器动态编译应用。然后在浏览器中运行它。 开始时，你将使用_即时 (JiT) _编译器动态编译应用。然后在浏览器中运行它。
稍后，你可以了解其他选项。 稍后，你可以了解其他选项。
The recommended place to bootstrap a JiT-compiled browser application is in a separate file The recommended place to bootstrap a JiT-compiled browser application is in a separate file
@ -190,18 +194,19 @@ l-main-section
This code creates a browser platform for dynamic (JiT) compilation and This code creates a browser platform for dynamic (JiT) compilation and
bootstrap's the `AppModule` described above. bootstrap's the `AppModule` described above.
该代码为动态 (JiT) 编译创建浏览器平台，并引导上面提到的`AppModule`。 上面的代码为动态 (JiT) 编译创建浏览器平台，并引导上面提到的`AppModule`。
The _bootstrapping_ process sets up the execution environment, The _bootstrapping_ process sets up the execution environment,
digs the _root_ `AppComponent` out of the module's `bootstrap` array,   digs the _root_ `AppComponent` out of the module's `bootstrap` array,  
creates an instance of the component and inserts it within the element tag identified by the component's `selector`. creates an instance of the component and inserts it within the element tag identified by the component's `selector`.
引导过程搭建运行环境，从模块的`bootstrap`数组中提出*根*`AppComponent` —— 创建该组件的实例并将其插入到组件`selector`标识的元素标签中。 引导过程搭建运行环境，从模块的`bootstrap`数组中提出_根_`AppComponent`， 创建该组件的实例，并将其插入到组件`selector`标识的元素标签中。
The `AppComponent` selector — here and in most documentation samples — is `my-app` The `AppComponent` selector — here and in most documentation samples — is `my-app`
so Angular looks for a `<my-app>` tag in the `index.html` like this one ... so Angular looks for a `<my-app>` tag in the `index.html` like this one ...
`AppComponent`选择器——在这里以及文档大部分例子中——都是`my-app`，所以 Angular 在`index.html`中查找像这样的`<my-app>`标签... `AppComponent`选择器 &mdash; 在这里以及文档大部分例子中 &mdash; 是`my-app`，
所以 Angular 在`index.html`中查找像这样的`<my-app>`标签...
+makeExample('setup/ts/index.html','my-app')(format='.') +makeExample('setup/ts/index.html','my-app')(format='.')
:marked :marked
... and displays the `AppComponent` there. ... and displays the `AppComponent` there.
@ -210,32 +215,32 @@ l-main-section
This file is very stable. Once you've set it up, you may never change it again. This file is very stable. Once you've set it up, you may never change it again.
该文件非常稳定。一旦被配置，它可能永远不会再被修改。 该文件非常稳定。一旦配置好，你可能永远不会再修改它。
a#quickstart-appmodule a#quickstart-appmodule
l-main-section l-main-section
:marked :marked
## QuickStart's _AppModule_ ## QuickStart's _AppModule_
## 《快速起步》的`AppModule` ## 《快速起步》的_AppModule_
Every Angular application must have a root `NgModule`, even the [QuickStart](../quickstart.html). Every Angular application must have a root `NgModule`, even the [QuickStart](../quickstart.html).
You didn't see it but it was there. You didn't see it but it was there.
每个 Angular 应用必须有一个跟`NgModule`，包括[快速起步](../quickstart.html)在内。 每个 Angular 应用必须有一个根`NgModule`，包括[《快速起步》](../quickstart.html)在内。
虽然你看不到它，但是它在那儿。 你之前没有看到它，但它确定有。
A script in the `index.html` generated a hidden `AppModule` and bootstrapped it for you A script in the `index.html` generated a hidden `AppModule` and bootstrapped it for you
so you could focus on the `AppComponent` and discover the _essential Angular_ more quickly. so you could focus on the `AppComponent` and discover the _essential Angular_ more quickly.
`index.html`中的一个脚本生成了隐藏的`AppModule`并为你引导它。这样你可以专注于`AppComponent`，以更快的了解* Angular 的基础*。 `index.html`中的一个脚本生成了隐藏的`AppModule`并引导它。这样你可以专注于`AppComponent`，以更快的了解_ Angular 的基础_。
If you're feeling adventurous, add your own `AppModule` and `main.ts` to the If you're feeling adventurous, add your own `AppModule` and `main.ts` to the
live code in the _QuickStart_ plunker. live code in the _QuickStart_ plunker.
你可以添加自己的`AppModule`和`main.ts`到plunker上*快速起步*的在线代码中。 如果你爱冒险，可以在《快速起步》plunker 的在线代码中添加自己的`AppModule`和`main.ts`。
Remove the following `<script>` tag from the `index.html` and see _your_ work in action. Remove the following `<script>` tag from the `index.html` and see _your_ work in action.
从`index.html`中删除下面的`<script>`标签，看看*你*的劳动成果。 从`index.html`中删除下面的`<script>`标签，看看_你_的劳动成果。
+makeExample('quickstart/ts/index.html','autobootstrap','Remove this script tag from "index.html"')(format='.') +makeExample('quickstart/ts/index.html','autobootstrap','Remove this script tag from "index.html"')(format='.')