修订完ngmodules

This commit is contained in:
Zhicheng Wang 2017-04-15 21:54:53 +08:00
parent 7e81cc60d9
commit 7a8d65353b

View File

@ -429,6 +429,7 @@ a#declarations
我们重写了`AppComponent`来把这个新的`TitleComponent`显示到`<app-title>`元素中,并使用一个输入型绑定来设置`subtitle`。 我们重写了`AppComponent`来把这个新的`TitleComponent`显示到`<app-title>`元素中,并使用一个输入型绑定来设置`subtitle`。
+makeExample('ngmodule/ts/src/app/app.component.1.ts', '', 'src/app/app.component.ts (v1)')(format=".") +makeExample('ngmodule/ts/src/app/app.component.1.ts', '', 'src/app/app.component.ts (v1)')(format=".")
:marked :marked
Angular won't recognize the `<app-title>` tag until you declare it in `AppModule`. Angular won't recognize the `<app-title>` tag until you declare it in `AppModule`.
Import the `TitleComponent` class and add it to the module's `declarations`: Import the `TitleComponent` class and add it to the module's `declarations`:
@ -485,11 +486,13 @@ a#providers
更新`TitleComponent`,为它加入一个构造函数,注入`UserService`类,并把组件的`user`属性设置为它的实例。 更新`TitleComponent`,为它加入一个构造函数,注入`UserService`类,并把组件的`user`属性设置为它的实例。
+makeExample('ngmodule/ts/src/app/title.component.ts', '', 'src/app/title.component.ts')(format=".") +makeExample('ngmodule/ts/src/app/title.component.ts', '', 'src/app/title.component.ts')(format=".")
:marked :marked
You've defined and used the service. Now to _provide_ it for all components to use, You've defined and used the service. Now to _provide_ it for all components to use,
add it to a `providers` property in the `AppModule` metadata: add it to a `providers` property in the `AppModule` metadata:
我们已经_定义_并_使用了_该服务。现在我们通过把它加入`AppModule`元数据的`providers`属性中来把它_提供_给所有组件使用。 我们已经_定义_并_使用了_该服务。现在我们通过把它加入`AppModule`元数据的`providers`属性中来把它_提供_给所有组件使用。
+makeExample('ngmodule/ts/src/app/app.module.1.ts', 'providers', 'src/app/app.module.ts (providers)')(format=".") +makeExample('ngmodule/ts/src/app/app.module.1.ts', 'providers', 'src/app/app.module.ts (providers)')(format=".")
a#imports a#imports
@ -505,6 +508,7 @@ a#imports
注意,在修改过的`TitleComponent`中,有一个`*ngIf`指令在“守卫着”该消息。如果没有当前用户,就没有任何消息。 注意,在修改过的`TitleComponent`中,有一个`*ngIf`指令在“守卫着”该消息。如果没有当前用户,就没有任何消息。
+makeExample('ngmodule/ts/src/app/title.component.html', 'ngIf', 'src/app/title.component.html (ngIf)')(format=".") +makeExample('ngmodule/ts/src/app/title.component.html', 'ngIf', 'src/app/title.component.html (ngIf)')(format=".")
:marked :marked
Although `AppModule` doesn't declare `NgIf`, the application still compiles and runs. Although `AppModule` doesn't declare `NgIf`, the application still compiles and runs.
How can that be? The Angular compiler should either ignore or complain about unrecognized HTML. How can that be? The Angular compiler should either ignore or complain about unrecognized HTML.
@ -517,6 +521,7 @@ a#imports
Angular 能识别`NgIf`指令,是因为我们以前导入过它。最初版本的`AppModule`就导入了`BrowserModule`。 Angular 能识别`NgIf`指令,是因为我们以前导入过它。最初版本的`AppModule`就导入了`BrowserModule`。
+makeExample('ngmodule/ts/src/app/app.module.0.ts', 'imports', 'src/app/app.module.ts (imports)')(format=".") +makeExample('ngmodule/ts/src/app/app.module.0.ts', 'imports', 'src/app/app.module.ts (imports)')(format=".")
:marked :marked
Importing `BrowserModule` made all of its public components, directives, and pipes visible Importing `BrowserModule` made all of its public components, directives, and pipes visible
to the component templates in `AppModule`. to the component templates in `AppModule`.
@ -594,6 +599,7 @@ a#imports
`ContactComponent`的选择器会去匹配名叫`<app-contact>`的元素。 `ContactComponent`的选择器会去匹配名叫`<app-contact>`的元素。
在`AppComponent`模板中`<app-title>`的下方添加一个具有此名字的元素: 在`AppComponent`模板中`<app-title>`的下方添加一个具有此名字的元素:
+makeExample('ngmodule/ts/src/app/app.component.1b.ts', 'template', 'src/app/app.component.ts (template)')(format=".") +makeExample('ngmodule/ts/src/app/app.component.1b.ts', 'template', 'src/app/app.component.ts (template)')(format=".")
:marked :marked
@ -664,6 +670,7 @@ a#imports
把`FormsModule`加到`AppModule`元数据中的`imports`列表中: 把`FormsModule`加到`AppModule`元数据中的`imports`列表中:
+makeExample('ngmodule/ts/src/app/app.module.1.ts', 'imports')(format=".") +makeExample('ngmodule/ts/src/app/app.module.1.ts', 'imports')(format=".")
:marked :marked
Now `[(ngModel)]` binding will work and the user input will be validated by Angular forms, Now `[(ngModel)]` binding will work and the user input will be validated by Angular forms,
once you declare the new component, pipe, and directive. once you declare the new component, pipe, and directive.
@ -712,6 +719,7 @@ a#import-name-conflict
我们只要在 import 时使用`as`关键字来为第二个指令创建个别名就可以了。 我们只要在 import 时使用`as`关键字来为第二个指令创建个别名就可以了。
+makeExample('ngmodule/ts/src/app/app.module.1b.ts', 'import-alias')(format=".") +makeExample('ngmodule/ts/src/app/app.module.1b.ts', 'import-alias')(format=".")
:marked :marked
This solves the immediate issue of referencing both directive _types_ in the same file but This solves the immediate issue of referencing both directive _types_ in the same file but
leaves another issue unresolved. leaves another issue unresolved.
@ -1033,6 +1041,7 @@ a#contact-module-v1
下面是新的`ContactModule` 下面是新的`ContactModule`
+makeExample('ngmodule/ts/src/app/contact/contact.module.2.ts', '', 'src/app/contact/contact.module.ts') +makeExample('ngmodule/ts/src/app/contact/contact.module.2.ts', '', 'src/app/contact/contact.module.ts')
:marked :marked
You copy from `AppModule` the contact-related import statements and `@NgModule` properties You copy from `AppModule` the contact-related import statements and `@NgModule` properties
that concern the contact, and paste them into `ContactModule`. that concern the contact, and paste them into `ContactModule`.
@ -1106,12 +1115,14 @@ a#contact-module-v1
Here's the refactored version of the `AppModule` along with the previous version. Here's the refactored version of the `AppModule` along with the previous version.
下面是`AppModule`重构完的版本与之前版本的对比。 下面是`AppModule`重构完的版本与之前版本的对比。
+makeTabs( +makeTabs(
`ngmodule/ts/src/app/app.module.2.ts, `ngmodule/ts/src/app/app.module.2.ts,
ngmodule/ts/src/app/app.module.1b.ts`, ngmodule/ts/src/app/app.module.1b.ts`,
'', '',
`src/app/app.module.ts (v2), `src/app/app.module.ts (v2),
src/app/app.module.ts (v1)`) src/app/app.module.ts (v1)`)
:marked :marked
### Improvements ### Improvements
@ -1120,7 +1131,7 @@ a#contact-module-v1
:marked :marked
There's a lot to like in the revised `AppModule`. There's a lot to like in the revised `AppModule`.
修改后的`AppModule`有很令人喜欢的特征 修改后的`AppModule`有一些很棒的特性
* It does not change as the _Contact_ domain grows. * It does not change as the _Contact_ domain grows.
@ -1211,8 +1222,9 @@ a#lazy-load
`HeroModule`和`CrisisModule`会被惰性加载。 `HeroModule`和`CrisisModule`会被惰性加载。
<a id="app-component-template"></a> <a id="app-component-template"></a>
The new `AppComponent` templatehas The new `AppComponent` templatehas
a title, three links, and a `<router-outlet>`.<a id="app-component-template"></a> a title, three links, and a `<router-outlet>`.
我们从这个`AppComponent`新模板的顶部看起:标题、三个链接和`<router-outlet>`。 我们从这个`AppComponent`新模板的顶部看起:标题、三个链接和`<router-outlet>`。
@ -1228,6 +1240,7 @@ a#lazy-load
对`AppModule`进行适度的修改: 对`AppModule`进行适度的修改:
+makeExample('ngmodule/ts/src/app/app.module.3.ts', '', 'src/app/app.module.ts (v3)') +makeExample('ngmodule/ts/src/app/app.module.3.ts', '', 'src/app/app.module.ts (v3)')
.l-sub-section .l-sub-section
:marked :marked
Some file names bear a `.3` extension that indicates Some file names bear a `.3` extension that indicates
@ -1262,6 +1275,7 @@ a#lazy-load
### 应用路由 ### 应用路由
+makeExample('ngmodule/ts/src/app/app-routing.module.ts', '', 'src/app/app-routing.module.ts')(format='.') +makeExample('ngmodule/ts/src/app/app-routing.module.ts', '', 'src/app/app-routing.module.ts')(format='.')
:marked :marked
The router is the subject of the [Routing & Navigation](router.html) page, so this section skips many of the details and The router is the subject of the [Routing & Navigation](router.html) page, so this section skips many of the details and
concentrates on the intersection of NgModules and routing. concentrates on the intersection of NgModules and routing.
@ -1309,6 +1323,7 @@ a#lazy-load
`RouterModule`类的`forRoot`静态方法和提供的配置,被添加到`imports`数组中,提供该模块的路由信息。 `RouterModule`类的`forRoot`静态方法和提供的配置,被添加到`imports`数组中,提供该模块的路由信息。
+makeExample('ngmodule/ts/src/app/app-routing.module.ts', 'forRoot')(format='.') +makeExample('ngmodule/ts/src/app/app-routing.module.ts', 'forRoot')(format='.')
:marked :marked
The returned `AppRoutingModule` class is a `Routing Module` containing both the `RouterModule` directives The returned `AppRoutingModule` class is a `Routing Module` 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`.
@ -1341,7 +1356,9 @@ a#lazy-load
`src/app/contact`目录中也有一个新文件`contact-routing.module.ts`。 `src/app/contact`目录中也有一个新文件`contact-routing.module.ts`。
它定义了我们前面提到过的`联系人`路由,并提供了`ContactRoutingModule`,就像这样: 它定义了我们前面提到过的`联系人`路由,并提供了`ContactRoutingModule`,就像这样:
+makeExample('ngmodule/ts/src/app/contact/contact-routing.module.ts', 'routing', 'src/app/contact/contact-routing.module.ts (routing)')(format='.') +makeExample('ngmodule/ts/src/app/contact/contact-routing.module.ts', 'routing', 'src/app/contact/contact-routing.module.ts (routing)')(format='.')
:marked :marked
This time you pass the route list to the `forChild` method of the `RouterModule`. This time you pass the route list to the `forChild` method of the `RouterModule`.
The route list is only responsible for providing additional routes and is intended for feature modules. The route list is only responsible for providing additional routes and is intended for feature modules.
@ -1631,15 +1648,15 @@ a#core-module
创建`src/app/core`文件夹 创建`src/app/core`文件夹
* Move the `UserService` and `TitleComponent` from `src/app/` to `src/app/core`. 1. Move the `UserService` and `TitleComponent` from `src/app/` to `src/app/core`.
把`UserService`和`TitleComponent`从`src/app`移到`src/app/core`中 把`UserService`和`TitleComponent`从`src/app`移到`src/app/core`中
* Create a `CoreModule` class to own the core material. 1. Create a `CoreModule` class to own the core material.
创建`CoreModule`类来管理这些核心素材 创建`CoreModule`类来管理这些核心素材
* Update the `AppRoot` module to import `CoreModule`. 1. Update the `AppRoot` module to import `CoreModule`.
修改`AppRoot`模块,使其导入`CoreModule`模块 修改`AppRoot`模块,使其导入`CoreModule`模块
@ -1864,11 +1881,14 @@ a#core-for-root
这里的`CoreModule.forRoot`接收`UserServiceConfig`对象: 这里的`CoreModule.forRoot`接收`UserServiceConfig`对象:
+makeExample('ngmodule/ts/src/app/core/core.module.ts', 'for-root', 'src/app/core/core.module.ts (forRoot)')(format='.') +makeExample('ngmodule/ts/src/app/core/core.module.ts', 'for-root', 'src/app/core/core.module.ts (forRoot)')(format='.')
:marked :marked
Lastly, call it within the `imports` list of the `AppModule`. Lastly, call it within the `imports` list of the `AppModule`.
最后,我们在`AppModule`的`imports`*列表*中调用它。 最后,我们在`AppModule`的`imports`*列表*中调用它。
+makeExample('ngmodule/ts/src/app/app.module.ts', 'import-for-root', 'src/app//app.module.ts (imports)')(format='.') +makeExample('ngmodule/ts/src/app/app.module.ts', 'import-for-root', 'src/app//app.module.ts (imports)')(format='.')
:marked :marked
The app displays "Miss Marple" as the user instead of the default "Sherlock Holmes". The app displays "Miss Marple" as the user instead of the default "Sherlock Holmes".