fix: 首页图标bug

review: ngmodule to line 1821
This commit is contained in:
rexebin 2016-09-17 19:35:22 +01:00
parent 107e3cc7a7
commit b9b5c7bd64
2 changed files with 40 additions and 38 deletions

View File

@ -4,7 +4,9 @@ header(class="background-sky l-relative")
img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg') img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg')
h1.text-headline #{title}<br>#{subtitle} h1.text-headline #{title}<br>#{subtitle}
a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) 开始吧! a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) 开始吧!
.announcement-bar.shadow-2.clearfix
img(src="/resources/images/logos/angular2/angular.svg") announcement-bar
.announcement-bar-slide.clearfix
img(src="/resources/images/logos/angular2/angular-logo-banner.png")
p Angular 2.0正式发布啦! p Angular 2.0正式发布啦!
a(href="/translate/cn/blog.html" class="button " + "md-button") 了解更多 a(href="/translate/cn/blog.html" class="button " + "md-button") 了解更多

View File

@ -16,7 +16,7 @@ block includes
It may add service providers to the application dependency injectors. It may add service providers to the application dependency injectors.
And there are more options covered here. And there are more options covered here.
Angular模块是一个带有**@NgModule**装饰器函数的_类_。 Angular模块是带有**@NgModule**装饰器函数的_类_。
`@NgModule`接收一个元数据对象该对象告诉Angular如何编译和运行模块代码。 `@NgModule`接收一个元数据对象该对象告诉Angular如何编译和运行模块代码。
它标记出该模块_拥有_的组件、指令和管道 它标记出该模块_拥有_的组件、指令和管道
并把它们的一部分公开出去,以便外部组件使用它们。 并把它们的一部分公开出去,以便外部组件使用它们。
@ -45,7 +45,7 @@ block includes
* [Imports](#imports "Import components, directives, and pipes for use in component templates") * [Imports](#imports "Import components, directives, and pipes for use in component templates")
* [导入](#imports "为组件模板导入组件、指令和管道") * [导入](#imports "为组件模板导入组件、指令和管道")
* [Resolve conflicts](#resolve-conflicts "When two directives have the same selector ...") * [Resolve conflicts](#resolve-conflicts "When two directives have the same selector ...")
* [解决冲突](#resolve-conflicts "当两个指令具有同一个选择器时……") * [解决冲突](#resolve-conflicts "当两指令具有相同的选择器时……")
* [Feature modules](#feature-modules "Partition the app into feature modules") * [Feature modules](#feature-modules "Partition the app into feature modules")
* [特性模块](#feature-modules "把应用分割成一些特性模块") * [特性模块](#feature-modules "把应用分割成一些特性模块")
* [Lazy loaded modules](#lazy-load "Load modules asynchronously") with the Router * [Lazy loaded modules](#lazy-load "Load modules asynchronously") with the Router
@ -65,7 +65,7 @@ block includes
This page explains Angular Modules through a progression of improvements to a sample with a "Tour of Heroes" theme. Here's an index to live examples at key moments in the evolution of that sample: This page explains Angular Modules through a progression of improvements to a sample with a "Tour of Heroes" theme. Here's an index to live examples at key moments in the evolution of that sample:
此页面通过一个基于《英雄指南》的渐进式例子解释了Angular的模块。这里是例子演化过程中一些关键节点的在线例子。 本章通过一个基于《英雄指南》的渐进式例子解释了Angular的模块。这里是例子演化过程中一些关键节点的在线例子。
* <live-example plnkr="minimal.0">A minimal NgModule app</live-example> * <live-example plnkr="minimal.0">A minimal NgModule app</live-example>
* <live-example plnkr="minimal.0">最小化的NgModule应用</live-example> * <live-example plnkr="minimal.0">最小化的NgModule应用</live-example>
@ -84,14 +84,14 @@ block includes
This page covers Angular Module concepts in a tutorial fashion. This page covers Angular Module concepts in a tutorial fashion.
该页面涵盖了英雄指南下的Angular模块概念。 本章涵盖了英雄指南下的Angular模块概念。
The companion [Angular Module FAQs](../cookbook/ngmodule-faq.html "Angular Module FAQs") cookbook The companion [Angular Module FAQs](../cookbook/ngmodule-faq.html "Angular Module FAQs") cookbook
offers ready answers to specific design and implementation questions. offers ready answers to specific design and implementation questions.
Read this page first before hopping over to those FAQs. Read this page first before hopping over to those FAQs.
烹饪宝典中的[Angular模块常见问题](../cookbook/ngmodule-faq.html "Angular模块常见问题")为一些与设计和实现有关的问题提供了答案。 烹饪宝典中的[Angular模块常见问题](../cookbook/ngmodule-faq.html "Angular模块常见问题")为一些与设计和实现有关的问题提供了答案。
不过在阅读常见问题之前,要先阅读此页面 不过在阅读常见问题之前,要先阅读本章
.l-hr .l-hr
@ -502,7 +502,7 @@ a#imports
To illustrate this point, we extend the sample app with `ContactComponent`, To illustrate this point, we extend the sample app with `ContactComponent`,
a form component that imports form support from the Angular `FormsModule`. a form component that imports form support from the Angular `FormsModule`.
要解释这一点,我们可以再加入一个`ContactComponent`组件它是一个表单组件从Angular的`FormsModule`中导入了表单支持。 要解释这一点,我们可以再加入`ContactComponent`组件它是一个表单组件从Angular的`FormsModule`中导入了表单支持。
### Add the _ContactComponent_ ### Add the _ContactComponent_
@ -515,7 +515,7 @@ a#imports
The `ContactComponent` presents a "contact editor", The `ContactComponent` presents a "contact editor",
implemented with _Angular Forms_ in the [_template-driven form_](forms.html) style. implemented with _Angular Forms_ in the [_template-driven form_](forms.html) style.
`ContactComponnet`组件展现一个“联系人编辑器”,它是用[_模板驱动式表单_](forms.html)实现的。 `ContactComponnet`组件展现“联系人编辑器”,它是用[_模板驱动式表单_](forms.html)实现的。
.l-sub-section .l-sub-section
:marked :marked
@ -591,14 +591,14 @@ a#imports
Although `NgModel` is an Angular directive, the _Angular Compiler_ won't recognize it Although `NgModel` is an Angular directive, the _Angular Compiler_ won't recognize it
because (a) `AppModule` doesn't declare it and (b) it wasn't imported via `BrowserModule`. because (a) `AppModule` doesn't declare it and (b) it wasn't imported via `BrowserModule`.
虽然`NgModel`是一个Angular指令但_Angular编译器_并不会识别它 虽然`NgModel`是Angular指令但_Angular编译器_并不会识别它
这是因为:(a) `AppModule`没有声明过它,并且 (b) 它也没有通过`BrowserModule`被导入过。 这是因为:(a) `AppModule`没有声明过它,并且 (b) 它也没有通过`BrowserModule`被导入过。
Less obviously, even if Angular somehow recognized `ngModel`, Less obviously, even if Angular somehow recognized `ngModel`,
this `ContactComponent` would not behave like an Angular form because this `ContactComponent` would not behave like an Angular form because
form features such as validation are not yet available. form features such as validation are not yet available.
退一步说即使Angular有办法识别`ngModel``ContactComponent`也不会表现的像一个Angular表单 退一步说即使Angular有办法识别`ngModel``ContactComponent`也不会表现的像Angular表单
因为本组件表单的表单相关的特性(比如有效性验证)还不可用。 因为本组件表单的表单相关的特性(比如有效性验证)还不可用。
### Import the FormsModule ### Import the FormsModule
@ -903,7 +903,7 @@ a#feature-modules
just like a root module. just like a root module.
Feature module metadata have the same properties as the metadata for a root module. Feature module metadata have the same properties as the metadata for a root module.
_特性模块_是一个带有`@NgModule`装饰器及其元数据的类,就像根模块中一样。 _特性模块_是带有`@NgModule`装饰器及其元数据的类,就像根模块中一样。
特性模块的元数据和根模块的元数据携带的属性是一样的。 特性模块的元数据和根模块的元数据携带的属性是一样的。
The root module and the feature module share the same execution context. The root module and the feature module share the same execution context.
@ -951,7 +951,7 @@ a#feature-modules
In the next section, we carve the contact functionality out of the root module In the next section, we carve the contact functionality out of the root module
and into a dedicated feature module. and into a dedicated feature module.
在下一节,我们从根模块中把与联系人有关的功能切分到一个专门的特性模块中。 在下一节,我们从根模块中把与联系人有关的功能切分到专门的特性模块中。
<a id="contact-module-v1"></a> <a id="contact-module-v1"></a>
### Make _Contact_ a feature module ### Make _Contact_ a feature module
@ -1171,7 +1171,7 @@ a#lazy-load
Let's start at the top with the new `AppComponent` template: a title, three links, and a `<router-outlet>`. Let's start at the top with the new `AppComponent` template: a title, three links, and a `<router-outlet>`.
我们从这个`AppComponent`新模板的顶部看起:一个标题、三个链接和一个`<router-outlet>`。 我们从这个`AppComponent`新模板的顶部看起:标题、三个链接和`<router-outlet>`。
+makeExample('ngmodule/ts/app/app.component.3.ts', 'template', 'app/app.component.ts (v3 - Template)')(format='.') +makeExample('ngmodule/ts/app/app.component.3.ts', 'template', 'app/app.component.ts (v3 - Template)')(format='.')
@ -1210,7 +1210,7 @@ a#lazy-load
The routing object, which provides a configured `Router` service, is defined in the `app.routing.ts` file. The routing object, which provides a configured `Router` service, is defined in the `app.routing.ts` file.
与第二版相比,最值得注意的修改是`imports`中那个额外的***routing***对象。 与第二版相比,最值得注意的修改是`imports`中那个额外的***routing***对象。
`routing`对象提供了一个配置好的`Router`服务,它是在`app.routing.ts`文件中定义的。 `routing`对象提供了配置好的`Router`服务,它是在`app.routing.ts`文件中定义的。
### App routing ### App routing
@ -1222,7 +1222,7 @@ a#lazy-load
The router is the subject of [its own page](router.html) so we'll skip lightly over the details and The router is the subject of [its own page](router.html) so we'll skip lightly over the details and
concentrate on the intersection of Angular modules and routing. concentrate on the intersection of Angular modules and routing.
路由器有[一个专门的页面](router.html)做了深入讲解所以这里我们跳过细节而是专注于它和Angular模块的协作。 路由器有[专门的章节](router.html)做了深入讲解所以这里我们跳过细节而是专注于它和Angular模块的协作。
This file defines three routes. This file defines three routes.
@ -1254,7 +1254,7 @@ a#lazy-load
In this app, the string identifies both the module _file_ and the module _class_, In this app, the string identifies both the module _file_ and the module _class_,
the latter separated from the former by a `#`. the latter separated from the former by a `#`.
延迟加载模块的位置是一个*字符串*而不是*类型*。 延迟加载模块的位置是*字符串*而不是*类型*。
在本应用中,该字符串同时标记出了模块*文件*和模块*类*,两者用`#`分隔开。 在本应用中,该字符串同时标记出了模块*文件*和模块*类*,两者用`#`分隔开。
:marked :marked
@ -1270,7 +1270,7 @@ a#lazy-load
The returned `routing` object is a `ModuleWithProviders` containing both the `RouterModule` directives The returned `routing` object is a `ModuleWithProviders` containing both the `RouterModule` directives
and the Dependency Injection providers that produce a configured `Router`. and the Dependency Injection providers that produce a configured `Router`.
该方法返回的`routing`是一个`ModuleWithProviders`对象,它包含了一些`RouterModule`的指令和用来生成配置好的`Router`的依赖注入提供商。 该方法返回的`routing`是`ModuleWithProviders`对象,它包含了一些`RouterModule`的指令和用来生成配置好的`Router`的依赖注入提供商。
This `routing` object is intended for the app _root_ module _only_. This `routing` object is intended for the app _root_ module _only_.
@ -1297,7 +1297,7 @@ a#lazy-load
It defines the `contact` route we mentioned a bit earlier and also creates a `routing` object like so: It defines the `contact` route we mentioned a bit earlier and also creates a `routing` object like so:
`app/contact`目录中也有一个新文件`Contact.routing.ts`。 `app/contact`目录中也有一个新文件`Contact.routing.ts`。
它定义了我们前面提到过的`contact`路由,并创建了一个`routing`对象,就像这样: 它定义了我们前面提到过的`contact`路由,并创建了`routing`对象,就像这样:
+makeExample('ngmodule/ts/app/contact/contact.routing.ts', 'routing', 'app/contact/contact.routing.ts (routing)')(format='.') +makeExample('ngmodule/ts/app/contact/contact.routing.ts', 'routing', 'app/contact/contact.routing.ts (routing)')(format='.')
@ -1391,7 +1391,7 @@ a#hero-module
如果你读过[路由](router.html#child-routing-component)章,那么对这个子路由的场景应该觉得很熟悉。 如果你读过[路由](router.html#child-routing-component)章,那么对这个子路由的场景应该觉得很熟悉。
`HeroComponent`是本特性区的顶级组件和路由宿主。 `HeroComponent`是本特性区的顶级组件和路由宿主。
模板带有一个`<router-outlet>`指令,它或者显示英雄列表(`HeroList`)或者显示所选英雄的编辑器(`HeroDetail`)。 模板带有`<router-outlet>`指令,它或者显示英雄列表(`HeroList`)或者显示所选英雄的编辑器(`HeroDetail`)。
这两个组件都把获取和保存数据的任务委托给`HeroService`执行。 这两个组件都把获取和保存数据的任务委托给`HeroService`执行。
There's yet _another_ `HighlightDirective` that colors elements in yet a different shade. There's yet _another_ `HighlightDirective` that colors elements in yet a different shade.
@ -1404,7 +1404,7 @@ a#hero-module
The `HeroModule` is a feature module like any other. The `HeroModule` is a feature module like any other.
`HeroModule`是一个特性模块,与其它的没什么不同。 `HeroModule`是特性模块,与其它的没什么不同。
+makeExample('ngmodule/ts/app/hero/hero.module.3.ts', 'class', 'app/hero/hero.module.ts (class)')(format='.') +makeExample('ngmodule/ts/app/hero/hero.module.3.ts', 'class', 'app/hero/hero.module.ts (class)')(format='.')
@ -1534,9 +1534,9 @@ a#shared-module
Yet there is [a real danger](../cookbook/ngmodule-faq.html#q-why-it-is-bad) of that happening Yet there is [a real danger](../cookbook/ngmodule-faq.html#q-why-it-is-bad) of that happening
if the `SharedModule` provides the `UserService`. if the `SharedModule` provides the `UserService`.
`UserService`是一个全应用级单例。 `UserService`是全应用级单例。
我们不希望每个模块都各自有它的一个实例。 我们不希望每个模块都各自有它的实例。
而如果由`SharedModule`提供`UserService`,就会导致[一个铁板钉钉的危险](../cookbook/ngmodule-faq.html#q-why-it-is-bad)。 而如果由`SharedModule`提供`UserService`,就会导致[铁板钉钉的危险](../cookbook/ngmodule-faq.html#q-why-it-is-bad)。
.alert.is-critical .alert.is-critical
:marked :marked
@ -1562,7 +1562,7 @@ a#core-module
Instead, we'll gather them in a single `CoreModule` that we **import _once_ when the app starts** Instead, we'll gather them in a single `CoreModule` that we **import _once_ when the app starts**
and _never import anywhere else_. and _never import anywhere else_.
不过,我们可以把它们收集到一个单独的`CoreModule`中,并且**只在应用启动时导入它*一次*****而不会在其它地方导入它**。 不过,我们可以把它们收集到单独的`CoreModule`中,并且**只在应用启动时导入它*一次*****而不会在其它地方导入它**。
**Steps:** **Steps:**
@ -1573,7 +1573,7 @@ a#core-module
* move the `UserService` and `TitleComponent` from `app/` to `app/core` * move the `UserService` and `TitleComponent` from `app/` to `app/core`
* 把`UserService`和`TitleComponent`从`app`移到`app/core`中 * 把`UserService`和`TitleComponent`从`app`移到`app/core`中
* create a `CoreModule` class to own the core material * create a `CoreModule` class to own the core material
* 创建一个`CoreModule`类来管理这些核心素材 * 创建`CoreModule`类来管理这些核心素材
* update the `AppRoot` module to import `CoreModule` * update the `AppRoot` module to import `CoreModule`
* 更新`AppRoot`模块,使其导入`CoreModule`模块 * 更新`AppRoot`模块,使其导入`CoreModule`模块
@ -1614,7 +1614,7 @@ a#core-module
The app is too small to worry about a single service file and a tiny, one-time component. The app is too small to worry about a single service file and a tiny, one-time component.
这个场景设计的是有点生硬。 这个场景设计的是有点生硬。
该应用太小了,所以其实并不需要拆分出一个单独的服务文件和一个小型的、一次性的组件。 该应用太小了,所以其实并不需要拆分出单独的服务文件和小型的、一次性的组件。
A `TitleComponent` sitting in the root folder isn't bothering anyone. A `TitleComponent` sitting in the root folder isn't bothering anyone.
The root `AppModule` can register the `UserService` itself, The root `AppModule` can register the `UserService` itself,
@ -1638,7 +1638,7 @@ a#core-module
Each must be registered _exactly once_, in the app root injector, when the application starts. Each must be registered _exactly once_, in the app root injector, when the application starts.
应用通常还有很多像这里的`UserService`这样的单例服务。 应用通常还有很多像这里的`UserService`这样的单例服务。
当程序启动时,每个服务都只能在应用的“根注入器”中*注册一次*。 当程序启动时,每个服务都只能在应用的“根注入器”中*注册一次*。
While many Components inject such services in their constructors &mdash; While many Components inject such services in their constructors &mdash;
and therefore require JavaScript `import` statements to import their symbols &mdash; and therefore require JavaScript `import` statements to import their symbols &mdash;
@ -1661,7 +1661,7 @@ a#core-module
Having refactored to a `CoreModule` and a `SharedModule`, it's time to cleanup the other modules. Having refactored to a `CoreModule` and a `SharedModule`, it's time to cleanup the other modules.
我们已经重构完了`CoreModule`和`SharedModule`,该开始清理其它模块了 我们已经重构完`CoreModule`和`SharedModule`,现在开始清理其它模块
### A trimmer _AppModule_ ### A trimmer _AppModule_
@ -1669,7 +1669,7 @@ a#core-module
Here is the updated `AppModule` paired with version 3 for comparison: Here is the updated `AppModule` paired with version 3 for comparison:
这里是更新后的`AppModule`与其第三版本的对比: 这里是更新后的`AppModule`与其第三版本的对比:
+makeTabs( +makeTabs(
`ngmodule/ts/app/app.module.ts, `ngmodule/ts/app/app.module.ts,
@ -1690,7 +1690,7 @@ a#core-module
* delegating to imported modules rather than doing work. * delegating to imported modules rather than doing work.
* 导入其它模块并把任务委托给它们,而不是亲力亲为。 * 导入其它模块并把任务委托给它们,而不是亲力亲为。
* focused on its main task, orchestrating the app as a whole. * focused on its main task, orchestrating the app as a whole.
* 聚焦于自己的主要任务,整个应用程序的总指挥 * 聚焦于自己的主要任务:总指挥整个应用程序
### A trimmer _ContactModule_ ### A trimmer _ContactModule_
### 清理*ContactModule* ### 清理*ContactModule*
@ -1714,7 +1714,7 @@ a#core-module
* The `AwesomePipe` and `HighlightDirective` are gone. * The `AwesomePipe` and `HighlightDirective` are gone.
* `AwesomePipe`和`HighlightDirective`不见了。 * `AwesomePipe`和`HighlightDirective`不见了。
* The imports include `SharedModule` instead of `CommonModule` and `FormsModule` * The imports include `SharedModule` instead of `CommonModule` and `FormsModule`
* 导入`SharedModule`不再导入`CommonModule`和`FormsModule`。 * 导入`SharedModule`,不再导入`CommonModule`和`FormsModule`。
* This new version is leaner and cleaner. * This new version is leaner and cleaner.
* 这个新版本更加精简和干净了。 * 这个新版本更加精简和干净了。
@ -1736,7 +1736,7 @@ a#core-for-root
[ModuleWithProviders](../api/core/index/ModuleWithProviders-interface.html) which is [ModuleWithProviders](../api/core/index/ModuleWithProviders-interface.html) which is
a simple object with two properties: a simple object with two properties:
按照约定,模块的静态方法***forRoot***可以同时提供并配置这些服务。 按照约定,模块的静态方法***forRoot***可以同时提供并配置服务。
它接收一个服务配置对象,并返回一个[ModuleWithProviders](../api/core/index/ModuleWithProviders-interface.html)。这个简单对象具有两个属性: 它接收一个服务配置对象,并返回一个[ModuleWithProviders](../api/core/index/ModuleWithProviders-interface.html)。这个简单对象具有两个属性:
* `ngModule` - the `CoreModule` class * `ngModule` - the `CoreModule` class
@ -1760,7 +1760,7 @@ a#core-for-root
:marked :marked
Let's add a `CoreModule.forRoot` method that configures the core `UserService`. Let's add a `CoreModule.forRoot` method that configures the core `UserService`.
我们来添加一个`CoreModule.forRoot`方法,以便配置核心中的`UserService`。 现在添加`CoreModule.forRoot`方法,以便配置核心中的`UserService`。
We've extended the core `UserService` with an optional, injected `UserServiceConfig`. We've extended the core `UserService` with an optional, injected `UserServiceConfig`.
If a `UserServiceConfig` exists, the `UserService` sets the user name from that config. If a `UserServiceConfig` exists, the `UserService` sets the user name from that config.
@ -1772,7 +1772,7 @@ a#core-for-root
:marked :marked
Here's `CoreModule.forRoot` that takes a `UserServiceConfig` object: Here's `CoreModule.forRoot` that takes a `UserServiceConfig` object:
这里的`CoreModule.forRoot`接收一个`UserServiceConfig`对象: 这里的`CoreModule.forRoot`接收`UserServiceConfig`对象:
+makeExample('ngmodule/ts/app/core/core.module.ts', 'for-root', 'app/core/core.module.ts (forRoot)')(format='.') +makeExample('ngmodule/ts/app/core/core.module.ts', 'for-root', 'app/core/core.module.ts (forRoot)')(format='.')
:marked :marked
@ -1817,8 +1817,8 @@ a#prevent-reimport
We could _hope_ that no developer makes that mistake. We could _hope_ that no developer makes that mistake.
Or we can guard against it and fail fast by adding the following `CoreModule` constructor. Or we can guard against it and fail fast by adding the following `CoreModule` constructor.
除了*祈祷*任何开发人员都不会犯错。 我们可以*祈祷*任何开发人员都不会犯错。
我们最好还是对它进行一些保护,以便让它“尽快出错”。只要把下列代码添加到`CoreModule`的构造函数中就可以了。 但是最好还是对它进行一些保护,以便让它“尽快出错”。只要把下列代码添加到`CoreModule`的构造函数中就可以了。
+makeExample('ngmodule/ts/app/core/core.module.ts', 'ctor')(format='.') +makeExample('ngmodule/ts/app/core/core.module.ts', 'ctor')(format='.')