parent
94aa3664ab
commit
650a6033a1
|
@ -8,12 +8,21 @@ block includes
|
||||||
:marked
|
:marked
|
||||||
**Angular Modules** help organize an application into cohesive blocks of functionality.
|
**Angular Modules** help organize an application into cohesive blocks of functionality.
|
||||||
|
|
||||||
|
**Angular模块**能帮你把应用组织成多个内聚的功能块儿。
|
||||||
|
|
||||||
An Angular Module _class_ is adorned with the **NgModule** decorator that defines metadata about the module.
|
An Angular Module _class_ is adorned with the **NgModule** decorator that defines metadata about the module.
|
||||||
|
|
||||||
|
Angular模块类带有**NgModule**装饰器,它定义模块所需的元数据。
|
||||||
|
|
||||||
This chapter explains how to **create** `NgModule` classes and how to load them,
|
This chapter explains how to **create** `NgModule` classes and how to load them,
|
||||||
either immediately when the application launches or later, as needed, via the Router.
|
either immediately when the application launches or later, as needed, via the Router.
|
||||||
|
|
||||||
|
本章将会讲解如何**创建**`NgModule`类,以及如何加载它们 —— 无论是在程序启动时立即加载,还是稍后由路由器按需加载。
|
||||||
|
|
||||||
## Contents
|
## Contents
|
||||||
|
|
||||||
|
## 目录
|
||||||
|
|
||||||
* [Angular modularity](#angular-modularity "Add structure to the app with NgModule")
|
* [Angular modularity](#angular-modularity "Add structure to the app with NgModule")
|
||||||
* [The application root module](#root-module "The startup module that every app requires")
|
* [The application root module](#root-module "The startup module that every app requires")
|
||||||
* [Bootstrap](#bootstrap "Launch the app in a browser with the root module as the entry point") the root module
|
* [Bootstrap](#bootstrap "Launch the app in a browser with the root module as the entry point") the root module
|
||||||
|
@ -32,149 +41,276 @@ a#angular-modularity
|
||||||
:marked
|
:marked
|
||||||
## Angular Modularity
|
## Angular Modularity
|
||||||
|
|
||||||
|
## Angular模块化
|
||||||
|
|
||||||
Modules are a great way to organize the application and extend it with capabilities from external libraries.
|
Modules are a great way to organize the application and extend it with capabilities from external libraries.
|
||||||
|
|
||||||
|
模块是组织应用程序和使用外部程序库的最佳途径。
|
||||||
|
|
||||||
Many Angular libraries are modules (e.g, `FormsModule`, `HttpModule`, `RouterModule`).
|
Many Angular libraries are modules (e.g, `FormsModule`, `HttpModule`, `RouterModule`).
|
||||||
Many third party libraries are available as Angular modules (e.g.,
|
Many third party libraries are available as Angular modules (e.g.,
|
||||||
<a href="https://material.angular.io/" target="_blank">Material Design</a>,
|
<a href="https://material.angular.io/" target="_blank">Material Design</a>,
|
||||||
<a href="http://ionicframework.com/" target="_blank">Ionic</a>,
|
<a href="http://ionicframework.com/" target="_blank">Ionic</a>,
|
||||||
<a href="https://github.com/angular/angularfire2" target="_blank">AngularFire2</a>).
|
<a href="https://github.com/angular/angularfire2" target="_blank">AngularFire2</a>).
|
||||||
|
|
||||||
|
很多Angular库都是模块,比如:`FormsModule`、`HttpModule`、`RouterModule`。
|
||||||
|
很多第三方库也封装成了Angular模块,比如:<a href="https://material.angular.io/" target="_blank">Material Design</a>、
|
||||||
|
<a href="http://ionicframework.com/" target="_blank">Ionic</a>、
|
||||||
|
<a href="https://github.com/angular/angularfire2" target="_blank">AngularFire2</a>。
|
||||||
|
|
||||||
Angular modules consolidate components, directives and pipes into
|
Angular modules consolidate components, directives and pipes into
|
||||||
cohesive blocks of functionality, each focused on a
|
cohesive blocks of functionality, each focused on a
|
||||||
feature area, application business domain, workflow, or common collection of utilities.
|
feature area, application business domain, workflow, or common collection of utilities.
|
||||||
|
|
||||||
|
Angular模块把组件、指令和管道打包成内聚的功能块儿,每一个都聚焦于一个特性分区、业务领域、工作流,或一组通用的工具。
|
||||||
|
|
||||||
Modules can also add services to the application.
|
Modules can also add services to the application.
|
||||||
Such services might be internally-developed such as the application logger.
|
Such services might be internally-developed such as the application logger.
|
||||||
They can come from outside sources such as the Angular router and Http client.
|
They can come from outside sources such as the Angular router and Http client.
|
||||||
|
|
||||||
|
模块还能用来把服务加到应用程序中。这些服务可能是内部研发的,比如应用日志服务;也可能是外部资源,比如Angular路由和Http客户端。
|
||||||
|
|
||||||
Modules can be loaded eagerly when the application starts.
|
Modules can be loaded eagerly when the application starts.
|
||||||
They can also be _lazy loaded_ asynchronously by the router.
|
They can also be _lazy loaded_ asynchronously by the router.
|
||||||
|
|
||||||
|
模块可能在应用启动时立即加载,也可能由路由器进行异步_延迟加载_。
|
||||||
|
|
||||||
An Angular module is a class decorated with `@NgModule` metadata. The metadata:
|
An Angular module is a class decorated with `@NgModule` metadata. The metadata:
|
||||||
|
|
||||||
|
Angular模块是一个由`@NgModule`装饰器提供元数据的类,元数据包括:
|
||||||
|
|
||||||
* declare which components, directives and pipes _belong together_.
|
* declare which components, directives and pipes _belong together_.
|
||||||
|
|
||||||
|
* 声明哪些组件、指令、管道属于该模块。
|
||||||
|
|
||||||
* make some of those classes public so that other component templates can use them.
|
* make some of those classes public so that other component templates can use them.
|
||||||
|
|
||||||
|
* 公开某些类,以便其它的组件模板可以使用它们。
|
||||||
|
|
||||||
* hide other classes as implementation details.
|
* hide other classes as implementation details.
|
||||||
|
|
||||||
|
* 隐藏那些属于实现细节的非公开类。
|
||||||
|
|
||||||
* import other modules with the components, directives and pipes it needs.
|
* import other modules with the components, directives and pipes it needs.
|
||||||
|
|
||||||
|
* 导入其它模块,以获得所需的组件、指令和管道。
|
||||||
|
|
||||||
* provide services at the application level that any application component can use.
|
* provide services at the application level that any application component can use.
|
||||||
|
|
||||||
|
* 在应用程序级提供服务,以便应用中的任何组件都能使用它。
|
||||||
|
|
||||||
Every Angular app has at least one module class, the _root module_.
|
Every Angular app has at least one module class, the _root module_.
|
||||||
We bootstrap that module to launch the application.
|
We bootstrap that module to launch the application.
|
||||||
|
|
||||||
|
每个Angular应用至少有一个模块类 —— _根模块_,我们将通过引导根模块来启动应用。
|
||||||
|
|
||||||
The _root module_ is all we need in a simple application with a few components.
|
The _root module_ is all we need in a simple application with a few components.
|
||||||
As the app grows, we refactor the _root module_ into **feature modules**
|
As the app grows, we refactor the _root module_ into **feature modules**
|
||||||
that represent collections of related functionality.
|
that represent collections of related functionality.
|
||||||
We then import these modules into the _root module_.
|
We then import these modules into the _root module_.
|
||||||
|
|
||||||
|
对于组件很少的简单应用来说,只用一个_根模块_就足够了。
|
||||||
|
随着应用规模的增长,我们逐步把_根模块_重构成一些**特性模块**,它们用来实现一组密切相关的功能。
|
||||||
|
然后,我们在_根模块_中导入它们。
|
||||||
|
|
||||||
We'll see how later in the chapter. Let's start with the _root module_.
|
We'll see how later in the chapter. Let's start with the _root module_.
|
||||||
|
|
||||||
|
稍后我们就会看到怎么做。不过我们还是先从_根模块_开始吧!
|
||||||
|
|
||||||
a#root_module
|
a#root_module
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## _AppModule_ - the application root module
|
## _AppModule_ - the application root module
|
||||||
|
|
||||||
|
## _AppModule_ - 应用的根模块
|
||||||
|
|
||||||
Every Angular app has a **root module** class.
|
Every Angular app has a **root module** class.
|
||||||
By convention it's a class called `AppModule` in a file named `app.module.ts`.
|
By convention it's a class called `AppModule` in a file named `app.module.ts`.
|
||||||
|
|
||||||
|
每个Angular应用都有一个**根模块**类。
|
||||||
|
按照约定,它的类名叫做`AppModule`,被放在`app.module.ts`文件中。
|
||||||
|
|
||||||
This `AppModule` is about as minimal as it gets:
|
This `AppModule` is about as minimal as it gets:
|
||||||
|
|
||||||
|
这个最小化的`AppModule`是这样的:
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/app.module.0.ts', '', 'app/app.module.ts (minimal)')(format=".")
|
+makeExample('ngmodule/ts/app/app.module.0.ts', '', 'app/app.module.ts (minimal)')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The `@NgModel` decorator defines the metadata for the module.
|
The `@NgModel` decorator defines the metadata for the module.
|
||||||
We'll take an intuitive approach to understanding the metadata and fill in details as we go.
|
We'll take an intuitive approach to understanding the metadata and fill in details as we go.
|
||||||
|
|
||||||
|
`@NgModel`装饰器用来为模块定义元数据。
|
||||||
|
我们先凭直觉来理解一下元数据,接下来再逐步深入细节。
|
||||||
|
|
||||||
This metadata imports a single helper module, `BrowserModule`, the module every browser app must import.
|
This metadata imports a single helper module, `BrowserModule`, the module every browser app must import.
|
||||||
|
|
||||||
|
这个元数据只导入了一个辅助模块,`BrowserModule`,每个运行在浏览器中的应用都必须导入它。
|
||||||
|
|
||||||
`BrowserModule` registers critical application service providers.
|
`BrowserModule` registers critical application service providers.
|
||||||
It also includes common directives like `NgIf` and `NgFor` which become immediately visible and usable
|
It also includes common directives like `NgIf` and `NgFor` which become immediately visible and usable
|
||||||
in any of this modules component templates.
|
in any of this modules component templates.
|
||||||
|
|
||||||
|
`BrowserModule`注册了一些关键的应用服务提供商。
|
||||||
|
它还包括了一些通用的指令,比如`NgIf`和`NgFor`,所以这些指令在该模块的任何组件模板中都是可用的。
|
||||||
|
|
||||||
The `declarations` list identifies the application's only component,
|
The `declarations` list identifies the application's only component,
|
||||||
the _root component_, the top of this app's rather bare component tree.
|
the _root component_, the top of this app's rather bare component tree.
|
||||||
|
|
||||||
|
`declarations`列出了该应用程序中唯一的组件(根组件),这是该应用的顶层组件,而不会暴露出整个组件树。
|
||||||
|
|
||||||
The example `AppComponent` simply displays a data-bound title:
|
The example `AppComponent` simply displays a data-bound title:
|
||||||
|
|
||||||
|
这个范例`AppComponent`只会显示出一个被绑定的标题:
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/app.component.0.ts', '', 'app/app.component.ts (minimal)')(format=".")
|
+makeExample('ngmodule/ts/app/app.component.0.ts', '', 'app/app.component.ts (minimal)')(format=".")
|
||||||
:marked
|
:marked
|
||||||
Lastly, the `@NgModule.bootstrap` property identifies this `AppComponent` as the _bootstrap component_.
|
Lastly, the `@NgModule.bootstrap` property identifies this `AppComponent` as the _bootstrap component_.
|
||||||
When Angular launches the app, it places the HTML rendering of `AppComponent` in the DOM,
|
When Angular launches the app, it places the HTML rendering of `AppComponent` in the DOM,
|
||||||
inside the `<my-app>` element tags of the `index.html`
|
inside the `<my-app>` element tags of the `index.html`
|
||||||
|
|
||||||
|
最后,`@NgModule.bootstrap`属性把这个`AppComponent`标记为_引导(bootstrap)组件_。
|
||||||
|
当Angular引导应用时,它会在DOM中渲染`AppComponent`,并把结果放进`index.html`的`<my-app>`元素标记内部。
|
||||||
|
|
||||||
a#bootstrap
|
a#bootstrap
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Bootstrapping in _main.ts_
|
## Bootstrapping in _main.ts_
|
||||||
|
|
||||||
|
## 在_main.ts_中引导
|
||||||
|
|
||||||
We launch the application by bootstrapping the `AppModule` in the `main.ts` file.
|
We launch the application by bootstrapping the `AppModule` in the `main.ts` file.
|
||||||
|
|
||||||
|
在`main.ts`文件中,我们通过引导`AppModule`来启动应用。
|
||||||
|
|
||||||
Angular offers a variety of bootstrapping options, targeting multiple platforms.
|
Angular offers a variety of bootstrapping options, targeting multiple platforms.
|
||||||
In this chapter we consider two options, both targeting the browser.
|
In this chapter we consider two options, both targeting the browser.
|
||||||
|
|
||||||
|
针对不同的平台,Angular提供了很多引导选项。
|
||||||
|
在本章中,我们只讲两个选项,都是针对浏览器平台的。
|
||||||
|
|
||||||
### Dynamic bootstrapping with the Just-In-Time (JIT) compiler
|
### Dynamic bootstrapping with the Just-In-Time (JIT) compiler
|
||||||
|
|
||||||
|
### 通过即时(JIT)编译器动态引导
|
||||||
|
|
||||||
In the first, _dynamic_ option, the [Angular compiler](#q-angular-compiler "About the Angular Compiler")
|
In the first, _dynamic_ option, the [Angular compiler](#q-angular-compiler "About the Angular Compiler")
|
||||||
compiles the application in the browser and then launches the app.
|
compiles the application in the browser and then launches the app.
|
||||||
|
|
||||||
|
先看看_dynamic_选项,[Angular编译器](#q-angular-compiler "关于Angular编译器")在浏览器中编译并引导该应用。
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/main.ts', '', 'app/main.ts (dynamic)')(format=".")
|
+makeExample('ngmodule/ts/app/main.ts', '', 'app/main.ts (dynamic)')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The samples in this chapter demonstrate the dynamic bootstrapping approach.
|
The samples in this chapter demonstrate the dynamic bootstrapping approach.
|
||||||
|
|
||||||
|
这里的例子演示进行动态引导的方法。
|
||||||
|
|
||||||
<live-example plnkr="minimal.0">Try the live example.</live-example>
|
<live-example plnkr="minimal.0">Try the live example.</live-example>
|
||||||
|
|
||||||
|
<live-example plnkr="minimal.0">尝试在线例子</live-example>
|
||||||
|
|
||||||
|
|
||||||
### Static bootstrapping with the Ahead-Of-Time (AOT) compiler
|
### Static bootstrapping with the Ahead-Of-Time (AOT) compiler
|
||||||
|
|
||||||
|
### 使用预先编译器(AOT - Ahead-Of-Time)进行静态引导
|
||||||
|
|
||||||
Consider the static alternative which can produce a much smaller application that
|
Consider the static alternative which can produce a much smaller application that
|
||||||
launches faster, especially on mobile devices and high latency networks.
|
launches faster, especially on mobile devices and high latency networks.
|
||||||
|
|
||||||
|
静态方案可以生成更小、启动更快的应用,建议优先使用它,特别是在移动设备或高延迟网络下。
|
||||||
|
|
||||||
In the _static_ option, the Angular compiler runs ahead of time as part of the build process,
|
In the _static_ option, the Angular compiler runs ahead of time as part of the build process,
|
||||||
producing a collection of class factories in their own files.
|
producing a collection of class factories in their own files.
|
||||||
Among them is the `AppModuleNgFactory`.
|
Among them is the `AppModuleNgFactory`.
|
||||||
|
|
||||||
|
使用_static_选项,Angular编译器作为构建流程的一部分提前运行,生成一组类工厂。它们的核心就是`AppModuleNgFactory`。
|
||||||
|
|
||||||
The syntax for bootstrapping the pre-compiled `AppModuleNgFactory` is similar to
|
The syntax for bootstrapping the pre-compiled `AppModuleNgFactory` is similar to
|
||||||
the dynamic version that bootstraps the `AppModule` class.
|
the dynamic version that bootstraps the `AppModule` class.
|
||||||
|
|
||||||
|
引导预编译的`AppModuleNgFactory`的语法和动态引导`AppModule`类的方式很相似。
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/main-static.ts', '', 'app/main.ts (static)')(format=".")
|
+makeExample('ngmodule/ts/app/main-static.ts', '', 'app/main.ts (static)')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Because the entire application was pre-compiled,
|
Because the entire application was pre-compiled,
|
||||||
we don't ship the _Angular Compiler_ to the browser and we don't compile in the browser.
|
we don't ship the _Angular Compiler_ to the browser and we don't compile in the browser.
|
||||||
|
|
||||||
|
由于整个应用都是预编译的,所以我们不用把_Angular编译器_一起发到浏览器中,也不用在浏览器中进行编译。
|
||||||
|
|
||||||
The application code downloaded to the browser is much smaller than the dynamic equivalent
|
The application code downloaded to the browser is much smaller than the dynamic equivalent
|
||||||
and it is ready to execute immediately. The performance boost can be significant.
|
and it is ready to execute immediately. The performance boost can be significant.
|
||||||
|
|
||||||
|
下载到浏览器中的应用代码比动态版本要小得多,并且能立即执行。引导的性能能得到显著提升。
|
||||||
|
|
||||||
Both the JIT and AOT compilers generate an `AppModuleNgFactory` class from the same `AppModule` source code.
|
Both the JIT and AOT compilers generate an `AppModuleNgFactory` class from the same `AppModule` source code.
|
||||||
The JIT compiler creates that factory class on the fly, in memory, in the browser.
|
The JIT compiler creates that factory class on the fly, in memory, in the browser.
|
||||||
The AOT compiler outputs the factory to a physical file
|
The AOT compiler outputs the factory to a physical file
|
||||||
that we're importing here in the static version of `main.ts`.
|
that we're importing here in the static version of `main.ts`.
|
||||||
|
|
||||||
|
无论是JIT还是AOT编译器都会从同一份`AppModule`源码中生成一个`AppModuleNgFactory`类。
|
||||||
|
JIT编译器动态、在内存中、在浏览器中创建这个工厂类。
|
||||||
|
AOT编译器把工厂输出成一个物理文件,也就是我们在静态版本`main.ts`中导入的那个。
|
||||||
|
|
||||||
In general, the `AppModule` should neither know nor care how it is bootstrapped.
|
In general, the `AppModule` should neither know nor care how it is bootstrapped.
|
||||||
|
|
||||||
|
通常,`AppModule`不必关心它将被如何引导。
|
||||||
|
|
||||||
Although the `AppModule` evolves as the app grows, the bootstrap code in `main.ts` doesn't change.
|
Although the `AppModule` evolves as the app grows, the bootstrap code in `main.ts` doesn't change.
|
||||||
This is the last time we'll look at `main.ts`.
|
This is the last time we'll look at `main.ts`.
|
||||||
|
|
||||||
|
虽然`AppModule`会随着应用而演化,但是`main.ts`中的引导代码不会变。
|
||||||
|
这将是我们最后一次关注`main.ts`了。
|
||||||
|
|
||||||
.l-hr
|
.l-hr
|
||||||
|
|
||||||
a#declarations
|
a#declarations
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Declare directives and components
|
## Declare directives and components
|
||||||
|
|
||||||
|
## 声明指令和组件
|
||||||
|
|
||||||
The app evolves.
|
The app evolves.
|
||||||
The first addition is a `HighlightDirective`, an [attribute directive](attribute-directives.html)
|
The first addition is a `HighlightDirective`, an [attribute directive](attribute-directives.html)
|
||||||
that sets the background color of the attached element.
|
that sets the background color of the attached element.
|
||||||
|
|
||||||
|
应用继续演进。
|
||||||
|
首先加入的是`HighlightDirective`,一个[属性型指令](attribute-directives.html),它会设置所在元素的背景色。
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/highlight.directive.ts', '', 'app/highlight.directive.ts')(format=".")
|
+makeExample('ngmodule/ts/app/highlight.directive.ts', '', 'app/highlight.directive.ts')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
We update the `AppComponent` template to attach the directive to the title:
|
We update the `AppComponent` template to attach the directive to the title:
|
||||||
|
|
||||||
|
我们更新`AppComponent`的模板,来把该指令附加到标题上:
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/app.component.1.ts', 'template')(format=".")
|
+makeExample('ngmodule/ts/app/app.component.1.ts', 'template')(format=".")
|
||||||
:marked
|
:marked
|
||||||
If we ran the app now, Angular would report an error in the console because
|
If we ran the app now, Angular would report an error in the console because
|
||||||
it doesn't recognize the `highlight` binding.
|
it doesn't recognize the `highlight` binding.
|
||||||
|
|
||||||
|
如果我们现在就运行该应用,Angular会在控制台中报告一个错误,因为它无法识别这个`highlight`绑定。
|
||||||
|
|
||||||
We must declare the directive in `AppModule`.
|
We must declare the directive in `AppModule`.
|
||||||
Import the `HighlightDirective` class and add it to the module's `declarations` like this:
|
Import the `HighlightDirective` class and add it to the module's `declarations` like this:
|
||||||
|
|
||||||
|
我们必须在`AppModule`中声明该指令。
|
||||||
|
导入`HighlightDirective`类,并把它加入该模块的`declarations`数组中,就像这样:
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/app.module.1.ts', 'directive')(format=".")
|
+makeExample('ngmodule/ts/app/app.module.1.ts', 'directive')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
### Add a component
|
### Add a component
|
||||||
|
|
||||||
|
### 添加组件
|
||||||
|
|
||||||
We decide to refactor the title into its own `TitleComponent`.
|
We decide to refactor the title into its own `TitleComponent`.
|
||||||
The component's template binds to the component's `title` and `subtitle` properties like this:
|
The component's template binds to the component's `title` and `subtitle` properties like this:
|
||||||
|
|
||||||
|
我们打算把标题重构进独立的`TitleComponent`中去。
|
||||||
|
该组件的模板绑定到了组件的`title`和`subtitle`属性中,就像这样:
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/title.component.html', 'v1', 'app/title.component.html')(format=".")
|
+makeExample('ngmodule/ts/app/title.component.html', 'v1', 'app/title.component.html')(format=".")
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/title.component.ts', 'v1', 'app/title.component.ts')(format=".")
|
+makeExample('ngmodule/ts/app/title.component.ts', 'v1', 'app/title.component.ts')(format=".")
|
||||||
|
@ -182,10 +318,17 @@ a#declarations
|
||||||
:marked
|
:marked
|
||||||
We rewrite the `AppComponent` to display the new `TitleComponent` in the `<app-title>` element,
|
We rewrite the `AppComponent` to display the new `TitleComponent` in the `<app-title>` element,
|
||||||
using an input binding to set the `subtitle`.
|
using an input binding to set the `subtitle`.
|
||||||
|
|
||||||
|
我们重写了`AppComponent`来把这个新的`TitleComponent`显示到`<app-title>`元素中,并使用一个输入型绑定来设置`subtitle`。
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/app.component.1.ts', '', 'app/app.component.ts (v1)')(format=".")
|
+makeExample('ngmodule/ts/app/app.component.1.ts', '', 'app/app.component.ts (v1)')(format=".")
|
||||||
:marked
|
:marked
|
||||||
Angular won't recognize the `<app-title>` tag until we declare it in `AppModule`.
|
Angular won't recognize the `<app-title>` tag until we 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`:
|
||||||
|
|
||||||
|
除非我们在`AppModule`中声明过,否则Angular无法识别`<app-title>`标签。
|
||||||
|
导入`TitleComponent`类,并把它加到模块的`declarations`中:
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/app.module.1.ts', 'component')(format=".")
|
+makeExample('ngmodule/ts/app/app.module.1.ts', 'component')(format=".")
|
||||||
|
|
||||||
a#providers
|
a#providers
|
||||||
|
@ -193,32 +336,54 @@ a#providers
|
||||||
:marked
|
:marked
|
||||||
## Service Providers
|
## Service Providers
|
||||||
|
|
||||||
|
## 服务提供商
|
||||||
|
|
||||||
Modules are a great way to provide services for all of the module's components.
|
Modules are a great way to provide services for all of the module's components.
|
||||||
|
|
||||||
|
模块是为模块中的所有组件提供服务的最佳途径。
|
||||||
|
|
||||||
The [Dependency Injection](dependency-injection.html) chapter describes
|
The [Dependency Injection](dependency-injection.html) chapter describes
|
||||||
the Angular hierarchical dependency injection system and how to configure that system
|
the Angular hierarchical dependency injection system and how to configure that system
|
||||||
with [providers](dependency-injection.html#providers) at different levels of the
|
with [providers](dependency-injection.html#providers) at different levels of the
|
||||||
application's component tree.
|
application's component tree.
|
||||||
|
|
||||||
|
[依赖注入](dependency-injection.html)一章中讲过Angular的层次化依赖注入系统,
|
||||||
|
以及如何在组件树的不同层次上通过[提供商](dependency-injection.html#providers)配置该系统。
|
||||||
|
|
||||||
A module can add providers to the application's root dependency injector, making those services
|
A module can add providers to the application's root dependency injector, making those services
|
||||||
available everywhere in the application.
|
available everywhere in the application.
|
||||||
|
|
||||||
|
模块可以往应用的“根依赖注入器”中添加提供商,让那些服务在应用中到处可用。
|
||||||
|
|
||||||
Many applications capture information about the currently logged-in user and make that information
|
Many applications capture information about the currently logged-in user and make that information
|
||||||
accessible through a user service.
|
accessible through a user service.
|
||||||
This sample application has a dummy implementation of such a `UserService`.
|
This sample application has a dummy implementation of such a `UserService`.
|
||||||
|
|
||||||
|
很多应用都需要获取当前登录的用户的信息,并且通过user服务来访问它们。
|
||||||
|
该范例中有一个`UserService`的伪实现。
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/user.service.ts', '', 'app/user.service.ts')(format=".")
|
+makeExample('ngmodule/ts/app/user.service.ts', '', 'app/user.service.ts')(format=".")
|
||||||
:marked
|
:marked
|
||||||
The sample application should display a welcome message to the logged in user just below the application title.
|
The sample application should display a welcome message to the logged in user just below the application title.
|
||||||
Update the `TitleComponent` template to show the welcome message below the application title.
|
Update the `TitleComponent` template to show the welcome message below the application title.
|
||||||
|
|
||||||
|
该范例应用会在标题下方为已登录用户显示一条欢迎信息。
|
||||||
|
更新`TitleComponent`的模板来显示它。
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/title.component.html', '', 'app/title.component.html')(format=".")
|
+makeExample('ngmodule/ts/app/title.component.html', '', 'app/title.component.html')(format=".")
|
||||||
:marked
|
:marked
|
||||||
Update the `TitleComponent` class with a constructor that injects the `UserService`
|
Update the `TitleComponent` class with a constructor that injects the `UserService`
|
||||||
and sets the component's `user` property from the service.
|
and sets the component's `user` property from the service.
|
||||||
|
|
||||||
|
更新`TitleComponent`,为它加入一个构造函数,注入`UserService`类,并把组件的`user`属性设置为它的实例。
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/title.component.ts', '', 'app/title.component.ts')(format=".")
|
+makeExample('ngmodule/ts/app/title.component.ts', '', 'app/title.component.ts')(format=".")
|
||||||
:marked
|
:marked
|
||||||
We've _defined_ and _used_ the service. Now we _provide_ it for all components to use by
|
We've _defined_ and _used_ the service. Now we _provide_ it for all components to use by
|
||||||
adding it to a `providers` property in the `AppModule` metadata:
|
adding it to a `providers` property in the `AppModule` metadata:
|
||||||
|
|
||||||
|
我们已经_定义_并_使用了_该服务。现在,我们通过把它加入`AppModule`元数据中的`providers`属性来把它_提供_给所有组件使用。
|
||||||
|
|
||||||
+makeExample('ngmodule/ts/app/app.module.1.ts', 'providers', 'app/app.module.ts (providers)')(format=".")
|
+makeExample('ngmodule/ts/app/app.module.1.ts', 'providers', 'app/app.module.ts (providers)')(format=".")
|
||||||
|
|
||||||
a#imports
|
a#imports
|
||||||
|
|
|
@ -23,9 +23,9 @@
|
||||||
|
|
||||||
作为开源技术的倡导者,Google已经并将继续投资于对Angular的完善和演进工作,造福并回馈中国区的用户以及全世界的用户。
|
作为开源技术的倡导者,Google已经并将继续投资于对Angular的完善和演进工作,造福并回馈中国区的用户以及全世界的用户。
|
||||||
|
|
||||||
We are happy to see that Angular’s Chinese developer community has grown to its current large size, fueled by not only the passion for technologies among developers, but also by the desire to make this technology effective for real businesses. Many companies in China have already built their businesses based on Angular technology. We hope that the updated materials on this official site will continue to inspire and help putting this technology into more real world business services and applications in China. If your business already runs on Angular, we invite you to join our developer community here, and become involved in our effort in continuing improving and enhancing this technology. We welcome your comments and suggestions at any time. Please send your remarks to Google Developer Relations China team’s contact email at: devrel-china-contact@google.com
|
We are happy to see that Angular’s Chinese developer community has grown to its current large size, fueled by not only the passion for technologies among developers, but also by the desire to make this technology effective for real businesses. Many companies in China have already built their businesses based on Angular technology. We hope that the updated materials on this official site will continue to inspire and help putting this technology into more real world business services and applications in China. If your business already runs on Angular, we invite you to join our developer community here, and become involved in our effort in continuing improving and enhancing this technology. We welcome your comments and suggestions at any time. Please send your remarks to Google Developer Relations China team’s contact email at: ![email](./mail-dev-rel.gif).
|
||||||
|
|
||||||
看到中国的Angular开发社区已经如此繁荣,我们非常高兴。这不仅仅是出于开发者对技术的固有热情,更是因为我们希望“用Angular高效实现商业需求”的宏伟愿景。事实上,许多中国公司的业务早已基于Angular技术。我们希望通过对官网内容的持续更新,鼓励并协助大家把Angular更多的应用于现实世界中的业务服务与应用程序。如果您的业务大厦已经构建在Angular的基础之上,我们欢迎您加入[中文社区](./follow.html),参与到我们持续增强和优化此项技术的努力中来。我们随时欢迎您的意见和建议,请发邮件到Google的技术推广部联系我们,我们的邮箱是[devrel-china-contact@google.com](mailto:devrel-china-contact@google.com)。
|
看到中国的Angular开发社区已经如此繁荣,我们非常高兴。这不仅仅是出于开发者对技术的固有热情,更是因为我们希望“用Angular高效实现商业需求”的宏伟愿景。事实上,许多中国公司的业务早已基于Angular技术。我们希望通过对官网内容的持续更新,鼓励并协助大家把Angular更多的应用于现实世界中的业务服务与应用程序。如果您的业务大厦已经构建在Angular的基础之上,我们欢迎您加入[中文社区](./follow.html),参与到我们持续增强和优化此项技术的努力中来。我们随时欢迎您的意见和建议,请发邮件到Google的技术推广部联系我们,我们的邮箱是![email](./mail-dev-rel.gif)。
|
||||||
|
|
||||||
Angular succeeds because it is built by and for developers who come from many different backgrounds. We hope that these materials will help you to learn and understand Angular, and to contribute back to the framework in future. We are excited to see what you will build with Angular here in China, and how the framework itself will change as the result of your enthusiasm.
|
Angular succeeds because it is built by and for developers who come from many different backgrounds. We hope that these materials will help you to learn and understand Angular, and to contribute back to the framework in future. We are excited to see what you will build with Angular here in China, and how the framework itself will change as the result of your enthusiasm.
|
||||||
|
|
||||||
|
@ -84,7 +84,7 @@
|
||||||
|
|
||||||
## 授权方式
|
## 授权方式
|
||||||
|
|
||||||
本文档遵循[“保持署名—非商用”创意共享4.0许可证(CC BY-NC 4.0)](http://creativecommons.org/licenses/by-nc/4.0/deed.zh)授权方式,你不用知会我们就可以转载,但必须保持署名(特别是:链接到<https://angular.cn>,并且不得去掉本页入口链接,也不得修改本页内容),并且不得用于商业目的。如果需要进行任何商业推广,请接洽[ Google 开发技术推广部](mailto:devrel-china-contact@google.com),我们将给出积极的回应。
|
本文档遵循[“保持署名—非商用”创意共享4.0许可证(CC BY-NC 4.0)](http://creativecommons.org/licenses/by-nc/4.0/deed.zh)授权方式,你不用知会我们就可以转载,但必须保持署名(特别是:链接到<https://angular.cn>,并且不得去掉本页入口链接,也不得修改本页内容),并且不得用于商业目的。如果需要进行任何商业推广,请接洽Google 开发技术推广部![email](./mail-dev-rel.gif),我们将给出积极的回应。
|
||||||
|
|
||||||
本文档首发于[ Angular 中文网](https://angular.cn/)。如果你要进行转载,请自行同步,不过小心别 DDoS 了我们。
|
本文档首发于[ Angular 中文网](https://angular.cn/)。如果你要进行转载,请自行同步,不过小心别 DDoS 了我们。
|
||||||
|
|
||||||
|
@ -98,5 +98,5 @@
|
||||||
|
|
||||||
我们已经组织了一个九人专家组,开始了对 [ng-book2](https://www.ng-book.com/2/) 的翻译工作,出版社也将加快流程,争取能尽早与各位见面。以我们一向的质量标准,我敢保证这会是一份精品。敬请期待!
|
我们已经组织了一个九人专家组,开始了对 [ng-book2](https://www.ng-book.com/2/) 的翻译工作,出版社也将加快流程,争取能尽早与各位见面。以我们一向的质量标准,我敢保证这会是一份精品。敬请期待!
|
||||||
|
|
||||||
将来,Google 技术推广部还会有一系列线上和线下推广工作,如果您有意为这些活动贡献力量,请接洽[ Google 开发技术推广部](mailto:devrel-china-contact@google.com)。
|
将来,Google 技术推广部还会有一系列线上和线下推广工作,如果您有意为这些活动贡献力量,请接洽Google 开发技术推广部![email](./mail-dev-rel.gif)。
|
||||||
|
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in New Issue