fix: 把中文中的_替换成*
This commit is contained in:
parent
f75baea397
commit
2b2b537008
@ -51,7 +51,7 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
|
|||||||
|
|
||||||
Angular apps are modular and Angular has its own modularity system called _NgModules_.
|
Angular apps are modular and Angular has its own modularity system called _NgModules_.
|
||||||
|
|
||||||
Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 _Angular 模块_或 _NgModules_。
|
Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 *Angular 模块*或 *NgModules*。
|
||||||
|
|
||||||
NgModules are a big deal.
|
NgModules are a big deal.
|
||||||
This page introduces modules; the [NgModules](guide/ngmodules) pages
|
This page introduces modules; the [NgModules](guide/ngmodules) pages
|
||||||
@ -64,17 +64,17 @@ NgModules 很重要。这里只是简单介绍,在 [NgModules](guide/ngmodules
|
|||||||
Every Angular app has at least one NgModule class, [the _root module_](guide/bootstrapping "Bootstrapping"),
|
Every Angular app has at least one NgModule class, [the _root module_](guide/bootstrapping "Bootstrapping"),
|
||||||
conventionally named `AppModule`.
|
conventionally named `AppModule`.
|
||||||
|
|
||||||
每个 Angular 应用至少有一个模块([_根模块_](guide/bootstrapping "引导启动")),习惯上命名为 `AppModule`。
|
每个 Angular 应用至少有一个模块([*根模块*](guide/bootstrapping "引导启动")),习惯上命名为 `AppModule`。
|
||||||
|
|
||||||
While the _root module_ may be the only module in a small application, most apps have many more
|
While the _root module_ may be the only module in a small application, most apps have many more
|
||||||
_feature modules_, each a cohesive block of code dedicated to an application domain,
|
_feature modules_, each a cohesive block of code dedicated to an application domain,
|
||||||
a workflow, or a closely related set of capabilities.
|
a workflow, or a closely related set of capabilities.
|
||||||
|
|
||||||
_根模块_在一些小型应用中可能是唯一的模块,大多数应用会有很多_特性模块_,每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
|
*根模块*在一些小型应用中可能是唯一的模块,大多数应用会有很多*特性模块*,每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
|
||||||
|
|
||||||
An NgModule, whether a _root_ or _feature_, is a class with an `@NgModule` decorator.
|
An NgModule, whether a _root_ or _feature_, is a class with an `@NgModule` decorator.
|
||||||
|
|
||||||
Angular 模块(无论是_根模块_还是_特性模块_)都是一个带有 `@NgModule` 装饰器的类。
|
Angular 模块(无论是*根模块*还是*特性模块*)都是一个带有 `@NgModule` 装饰器的类。
|
||||||
|
|
||||||
<div class="l-sub-section">
|
<div class="l-sub-section">
|
||||||
|
|
||||||
@ -98,7 +98,7 @@ The most important properties are:
|
|||||||
* `declarations` - the _view classes_ that belong to this module.
|
* `declarations` - the _view classes_ that belong to this module.
|
||||||
Angular has three kinds of view classes: [components](guide/architecture#components), [directives](guide/architecture#directives), and [pipes](guide/pipes).
|
Angular has three kinds of view classes: [components](guide/architecture#components), [directives](guide/architecture#directives), and [pipes](guide/pipes).
|
||||||
|
|
||||||
`declarations` - 声明本模块中拥有的_视图类_。Angular 有三种视图类:[组件](guide/architecture#components)、[指令](guide/architecture#directives)和[管道](guide/pipes)。
|
`declarations` - 声明本模块中拥有的*视图类*。Angular 有三种视图类:[组件](guide/architecture#components)、[指令](guide/architecture#directives)和[管道](guide/pipes)。
|
||||||
|
|
||||||
* `exports` - the subset of declarations that should be visible and usable in the component [templates](guide/architecture#templates) of other modules.
|
* `exports` - the subset of declarations that should be visible and usable in the component [templates](guide/architecture#templates) of other modules.
|
||||||
|
|
||||||
@ -106,7 +106,7 @@ Angular has three kinds of view classes: [components](guide/architecture#compone
|
|||||||
|
|
||||||
* `imports` - other modules whose exported classes are needed by component templates declared in _this_ module.
|
* `imports` - other modules whose exported classes are needed by component templates declared in _this_ module.
|
||||||
|
|
||||||
`imports` - _本_模块声明的组件模板需要的类所在的其它模块。
|
`imports` - *本*模块声明的组件模板需要的类所在的其它模块。
|
||||||
|
|
||||||
* `providers` - creators of [services](guide/architecture#services) that this module contributes to
|
* `providers` - creators of [services](guide/architecture#services) that this module contributes to
|
||||||
the global collection of services; they become accessible in all parts of the app.
|
the global collection of services; they become accessible in all parts of the app.
|
||||||
@ -116,7 +116,7 @@ the global collection of services; they become accessible in all parts of the ap
|
|||||||
* `bootstrap` - the main application view, called the _root component_,
|
* `bootstrap` - the main application view, called the _root component_,
|
||||||
that hosts all other app views. Only the _root module_ should set this `bootstrap` property.
|
that hosts all other app views. Only the _root module_ should set this `bootstrap` property.
|
||||||
|
|
||||||
`bootstrap` - 指定应用的主视图(称为_根组件_),它是所有其它视图的宿主。只有_根模块_才能设置 `bootstrap` 属性。
|
`bootstrap` - 指定应用的主视图(称为*根组件*),它是所有其它视图的宿主。只有*根模块*才能设置 `bootstrap` 属性。
|
||||||
|
|
||||||
Here's a simple root module:
|
Here's a simple root module:
|
||||||
|
|
||||||
@ -128,7 +128,7 @@ Here's a simple root module:
|
|||||||
|
|
||||||
The `export` of `AppComponent` is just to show how to use the `exports` array to export a component; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module.
|
The `export` of `AppComponent` is just to show how to use the `exports` array to export a component; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module.
|
||||||
|
|
||||||
`AppComponent` 的 `export` 语句只是用于演示如何导出的,它在这个例子中并不是必须的。根模块不需要_导出_任何东西,因为其它组件不需要导入根模块。
|
`AppComponent` 的 `export` 语句只是用于演示如何导出的,它在这个例子中并不是必须的。根模块不需要*导出*任何东西,因为其它组件不需要导入根模块。
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -158,7 +158,7 @@ In JavaScript each _file_ is a module and all objects defined in the file belong
|
|||||||
The module declares some objects to be public by marking them with the `export` key word.
|
The module declares some objects to be public by marking them with the `export` key word.
|
||||||
Other JavaScript modules use *import statements* to access public objects from other modules.
|
Other JavaScript modules use *import statements* to access public objects from other modules.
|
||||||
|
|
||||||
JavaScript 中,每个_文件_是一个模块,文件中定义的所有对象都从属于那个模块。
|
JavaScript 中,每个*文件*是一个模块,文件中定义的所有对象都从属于那个模块。
|
||||||
通过 `export` 关键字,模块可以把它的某些对象声明为公共的。
|
通过 `export` 关键字,模块可以把它的某些对象声明为公共的。
|
||||||
其它 JavaScript 模块可以使用*import 语句*来访问这些公共对象。
|
其它 JavaScript 模块可以使用*import 语句*来访问这些公共对象。
|
||||||
|
|
||||||
@ -206,7 +206,7 @@ For example, import Angular's `Component` decorator from the `@angular/core` lib
|
|||||||
|
|
||||||
You also import NgModules from Angular _libraries_ using JavaScript import statements:
|
You also import NgModules from Angular _libraries_ using JavaScript import statements:
|
||||||
|
|
||||||
还可以使用 JavaScript 的导入语句从 Angular _库_中导入 Angular _模块_:
|
还可以使用 JavaScript 的导入语句从 Angular *库*中导入 Angular *模块*:
|
||||||
|
|
||||||
<code-example path="architecture/src/app/mini-app.ts" region="import-browser-module" linenums="false"></code-example>
|
<code-example path="architecture/src/app/mini-app.ts" region="import-browser-module" linenums="false"></code-example>
|
||||||
|
|
||||||
@ -243,7 +243,7 @@ Hang in there. The confusion yields to clarity with time and experience.
|
|||||||
|
|
||||||
A _component_ controls a patch of screen called a *view*.
|
A _component_ controls a patch of screen called a *view*.
|
||||||
|
|
||||||
_组件_负责控制屏幕上的一小块区域叫做*视图*。
|
*组件*负责控制屏幕上的一小块区域叫做*视图*。
|
||||||
|
|
||||||
For example, the following views are controlled by components:
|
For example, the following views are controlled by components:
|
||||||
|
|
||||||
@ -535,7 +535,7 @@ a `@Component` decorator is actually a `@Directive` decorator extended with temp
|
|||||||
|
|
||||||
Two *other* kinds of directives exist: _structural_ and _attribute_ directives.
|
Two *other* kinds of directives exist: _structural_ and _attribute_ directives.
|
||||||
|
|
||||||
还有两种*其它*类型的指令:_结构型_指令和_属性 (attribute) 型_指令。
|
还有两种*其它*类型的指令:*结构型*指令和*属性 (attribute) 型*指令。
|
||||||
|
|
||||||
They tend to appear within an element tag as attributes do,
|
They tend to appear within an element tag as attributes do,
|
||||||
sometimes by name but more often as the target of an assignment or a binding.
|
sometimes by name but more often as the target of an assignment or a binding.
|
||||||
@ -676,7 +676,7 @@ and the application logic (which often includes some notion of a _model_).
|
|||||||
A good component presents properties and methods for data binding.
|
A good component presents properties and methods for data binding.
|
||||||
It delegates everything nontrivial to services.
|
It delegates everything nontrivial to services.
|
||||||
|
|
||||||
组件的任务就是提供用户体验,仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括_模型_的某些概念)之间。
|
组件的任务就是提供用户体验,仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括*模型*的某些概念)之间。
|
||||||
设计良好的组件为数据绑定提供属性和方法,把其它琐事都委托给服务。
|
设计良好的组件为数据绑定提供属性和方法,把其它琐事都委托给服务。
|
||||||
|
|
||||||
Angular doesn't *enforce* these principles.
|
Angular doesn't *enforce* these principles.
|
||||||
|
@ -320,7 +320,7 @@ Add a `highlightColor` property to the directive class like this:
|
|||||||
|
|
||||||
### Binding to an _@Input_ property
|
### Binding to an _@Input_ property
|
||||||
|
|
||||||
### 绑定到_@Input_属性
|
### 绑定到 *@Input* 属性
|
||||||
|
|
||||||
Notice the `@Input` decorator. It adds metadata to the class that makes the directive's `highlightColor` property available for binding.
|
Notice the `@Input` decorator. It adds metadata to the class that makes the directive's `highlightColor` property available for binding.
|
||||||
|
|
||||||
@ -379,7 +379,7 @@ This is disagreeable. The word, `appHighlight`, is a terrible property name and
|
|||||||
|
|
||||||
### Bind to an _@Input_ alias
|
### Bind to an _@Input_ alias
|
||||||
|
|
||||||
### 绑定到_@Input_别名
|
### 绑定到 *@Input* 别名
|
||||||
|
|
||||||
Fortunately you can name the directive property whatever you want _and_ **_alias it_** for binding purposes.
|
Fortunately you can name the directive property whatever you want _and_ **_alias it_** for binding purposes.
|
||||||
|
|
||||||
|
@ -232,7 +232,7 @@ Docs and code samples updated and tested with Angular v.2.2.0.
|
|||||||
|
|
||||||
## UPDATE: NgUpgrade Guide for the AOT friendly _upgrade/static_ module (2016-11-14)
|
## UPDATE: NgUpgrade Guide for the AOT friendly _upgrade/static_ module (2016-11-14)
|
||||||
|
|
||||||
## 更新:用于 AOT 的_upgrade/static_模块 NgUpgrade 指南 (2016-11-14)
|
## 更新:用于 AOT 的 *upgrade/static* 模块 NgUpgrade 指南 (2016-11-14)
|
||||||
|
|
||||||
The updated [NgUpgrade Guide](guide/upgrade) guide covers the
|
The updated [NgUpgrade Guide](guide/upgrade) guide covers the
|
||||||
new AOT friendly `upgrade/static` module
|
new AOT friendly `upgrade/static` module
|
||||||
@ -271,7 +271,7 @@ Docs and code samples updated and tested with Angular v.2.1.1.
|
|||||||
|
|
||||||
## npm _@types_ packages replace _typings_ (2016-10-20)
|
## npm _@types_ packages replace _typings_ (2016-10-20)
|
||||||
|
|
||||||
## 使用 npm 的_@types_包替换_typings_ (2016-10-20)
|
## 使用 npm 的_@types*包替换*typings_ (2016-10-20)
|
||||||
|
|
||||||
Documentation samples now get TypeScript type information for 3rd party libraries
|
Documentation samples now get TypeScript type information for 3rd party libraries
|
||||||
from npm `@types` packages rather than with the _typings_ tooling.
|
from npm `@types` packages rather than with the _typings_ tooling.
|
||||||
@ -311,12 +311,12 @@ in the `in-memory-web-api` repo.
|
|||||||
|
|
||||||
## "Router" _preload_ syntax and _:enter_/_:leave_ animations (2016-10-19)
|
## "Router" _preload_ syntax and _:enter_/_:leave_ animations (2016-10-19)
|
||||||
|
|
||||||
## "路由器"_预加载_语法和_:enter_/_:leave_动画(2016-10-19)
|
## "路由器"*预加载*语法和 *:enter*/*:leave* 动画(2016-10-19)
|
||||||
|
|
||||||
The router can lazily _preload_ modules _after_ the app starts and
|
The router can lazily _preload_ modules _after_ the app starts and
|
||||||
_before_ the user navigates to them for improved perceived performance.
|
_before_ the user navigates to them for improved perceived performance.
|
||||||
|
|
||||||
路由器可以在应用启动_之后_和用户导航到惰性加载模块_之前_,预先加载惰性模块,以增强性能。
|
路由器可以在应用启动*之后*和用户导航到惰性加载模块*之前*,预先加载惰性模块,以增强性能。
|
||||||
|
|
||||||
New `:enter` and `:leave` aliases make animation more natural.
|
New `:enter` and `:leave` aliases make animation more natural.
|
||||||
|
|
||||||
|
@ -176,7 +176,7 @@ Technically, the `@Injectable()`decorator is only required for a service class t
|
|||||||
The `LoggerService` doesn't depend on anything. The logger would work if you omitted `@Injectable()`
|
The `LoggerService` doesn't depend on anything. The logger would work if you omitted `@Injectable()`
|
||||||
and the generated code would be slightly smaller.
|
and the generated code would be slightly smaller.
|
||||||
|
|
||||||
严格来说,这个 `@Injectable()` 装饰器只在一个服务类有_自己的依赖_的时候,才是_不可缺少_的。
|
严格来说,这个 `@Injectable()` 装饰器只在一个服务类有*自己的依赖*的时候,才是*不可缺少*的。
|
||||||
`LoggerService` 不依赖任何东西,所以该日志服务在没有 `@Injectable()` 的时候应该也能工作,生成的代码也更少一些。
|
`LoggerService` 不依赖任何东西,所以该日志服务在没有 `@Injectable()` 的时候应该也能工作,生成的代码也更少一些。
|
||||||
|
|
||||||
But the service would break the moment you gave it a dependency and you'd have to go back
|
But the service would break the moment you gave it a dependency and you'd have to go back
|
||||||
@ -607,7 +607,7 @@ You have to register your _own_ application providers manually,
|
|||||||
usually in the `providers` array of the `Component` or `Directive` metadata:
|
usually in the `providers` array of the `Component` or `Directive` metadata:
|
||||||
|
|
||||||
新建的注入器中没有提供商。
|
新建的注入器中没有提供商。
|
||||||
Angular 会使用一些自带的提供商来初始化这些注入器。你必须自行注册属于_自己_的提供商,通常用 ` 组件 ` 或者 ` 指令 ` 元数据中的 `providers` 数组进行注册。
|
Angular 会使用一些自带的提供商来初始化这些注入器。你必须自行注册属于*自己*的提供商,通常用 ` 组件 ` 或者 ` 指令 ` 元数据中的 `providers` 数组进行注册。
|
||||||
|
|
||||||
<code-example path="dependency-injection-in-action/src/app/app.component.ts" region="providers" title="src/app/app.component.ts (providers)">
|
<code-example path="dependency-injection-in-action/src/app/app.component.ts" region="providers" title="src/app/app.component.ts (providers)">
|
||||||
|
|
||||||
@ -758,7 +758,7 @@ The second provider substitutes the `DateLoggerService` for the `LoggerService`.
|
|||||||
The `LoggerService` is already registered at the `AppComponent` level.
|
The `LoggerService` is already registered at the `AppComponent` level.
|
||||||
When _this component_ requests the `LoggerService`, it receives the `DateLoggerService` instead.
|
When _this component_ requests the `LoggerService`, it receives the `DateLoggerService` instead.
|
||||||
|
|
||||||
第二个提供商使用 `DateLoggerService` 来满足 `LoggerService`。该 `LoggerService` 在 `AppComponent` 级别已经被注册。当_这个组件_要求 `LoggerService` 的时候,它得到的却是 `DateLoggerService` 服务。
|
第二个提供商使用 `DateLoggerService` 来满足 `LoggerService`。该 `LoggerService` 在 `AppComponent` 级别已经被注册。当*这个组件*要求 `LoggerService` 的时候,它得到的却是 `DateLoggerService` 服务。
|
||||||
|
|
||||||
<div class="l-sub-section">
|
<div class="l-sub-section">
|
||||||
|
|
||||||
@ -796,7 +796,7 @@ creating ***two ways to access the same service object***.
|
|||||||
Narrowing an API through an aliasing interface is _one_ important use case for this technique.
|
Narrowing an API through an aliasing interface is _one_ important use case for this technique.
|
||||||
The following example shows aliasing for that purpose.
|
The following example shows aliasing for that purpose.
|
||||||
|
|
||||||
通过使用别名接口来把一个 API 变窄,是_一个_很重要的该技巧的使用例子。下面的例子中使用别名就是为了这个目的。
|
通过使用别名接口来把一个 API 变窄,是*一个*很重要的该技巧的使用例子。下面的例子中使用别名就是为了这个目的。
|
||||||
|
|
||||||
Imagine that the `LoggerService` had a large API, much larger than the actual three methods and a property.
|
Imagine that the `LoggerService` had a large API, much larger than the actual three methods and a property.
|
||||||
You might want to shrink that API surface to just the members you actually need.
|
You might want to shrink that API surface to just the members you actually need.
|
||||||
|
@ -173,7 +173,7 @@ Now, if someone extends the `Engine` class, that is not `Car`'s problem.
|
|||||||
The _consumer_ of `Car` has the problem. The consumer must update the car creation code to
|
The _consumer_ of `Car` has the problem. The consumer must update the car creation code to
|
||||||
something like this:
|
something like this:
|
||||||
|
|
||||||
`Car` 的_消费者_也有这个问题。消费者必须更新创建这辆车的代码,就像这样:
|
`Car` 的*消费者*也有这个问题。消费者必须更新创建这辆车的代码,就像这样:
|
||||||
|
|
||||||
<code-example path="dependency-injection/src/app/car/car-creations.ts" region="car-ctor-instantiation-with-param" linenums="false">
|
<code-example path="dependency-injection/src/app/car/car-creations.ts" region="car-ctor-instantiation-with-param" linenums="false">
|
||||||
|
|
||||||
@ -245,7 +245,7 @@ Imagine the framework had something called an _injector_.
|
|||||||
You register some classes with this injector, and it figures out how to create them.
|
You register some classes with this injector, and it figures out how to create them.
|
||||||
|
|
||||||
到了依赖注入框架一展身手的时候了!
|
到了依赖注入框架一展身手的时候了!
|
||||||
想象框架中有一个叫做_注入器 (injector)_ 的东西。
|
想象框架中有一个叫做*注入器 (injector)* 的东西。
|
||||||
用这个注入器注册一些类,它会弄明白如何创建它们。
|
用这个注入器注册一些类,它会弄明白如何创建它们。
|
||||||
|
|
||||||
When you need a `Car`, you simply ask the injector to get it for you and you're good to go.
|
When you need a `Car`, you simply ask the injector to get it for you and you're good to go.
|
||||||
|
@ -658,7 +658,7 @@ This is actually a shorthand expression for a provider registration
|
|||||||
using a _provider_ object literal with two properties:
|
using a _provider_ object literal with two properties:
|
||||||
|
|
||||||
这其实是用于注册提供商的简写表达式。
|
这其实是用于注册提供商的简写表达式。
|
||||||
使用的是一个带有两个属性的_提供商_对象字面量:
|
使用的是一个带有两个属性的*提供商*对象字面量:
|
||||||
|
|
||||||
<code-example path="dependency-injection/src/app/providers.component.ts" region="providers-3" >
|
<code-example path="dependency-injection/src/app/providers.component.ts" region="providers-3" >
|
||||||
|
|
||||||
|
@ -343,7 +343,7 @@ Update it with the following:
|
|||||||
If a component, directive, or pipe belongs to a module in the `imports` array, _don't_ re-declare it in the `declarations` array.
|
If a component, directive, or pipe belongs to a module in the `imports` array, _don't_ re-declare it in the `declarations` array.
|
||||||
If you wrote it and it should belong to this module, _do_ declare it in the `declarations` array.
|
If you wrote it and it should belong to this module, _do_ declare it in the `declarations` array.
|
||||||
|
|
||||||
如果某个组件、指令或管道是属于 `imports` 中所导入的某个模块的,那就_不能再_把它再声明到本模块的 `declarations` 数组中。
|
如果某个组件、指令或管道是属于 `imports` 中所导入的某个模块的,那就*不能再*把它再声明到本模块的 `declarations` 数组中。
|
||||||
如果它是你自己写的,并且确实属于当前模块,*才应该*把它声明在 `declarations` 数组中。
|
如果它是你自己写的,并且确实属于当前模块,*才应该*把它声明在 `declarations` 数组中。
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -64,7 +64,7 @@ For example, you can use the `ngClass` directive to add and remove CSS class nam
|
|||||||
|
|
||||||
Learn about them in the [_Attribute Directives_](guide/attribute-directives) guide.
|
Learn about them in the [_Attribute Directives_](guide/attribute-directives) guide.
|
||||||
|
|
||||||
要了解更多信息,请参见[_属性型指令_](guide/attribute-directives)页。
|
要了解更多信息,请参见[*属性型指令*](guide/attribute-directives)页。
|
||||||
|
|
||||||
{@a B}
|
{@a B}
|
||||||
|
|
||||||
|
@ -692,7 +692,7 @@ Remember also that a directive's data-bound input properties are not set until _
|
|||||||
That's a problem if you need to initialize the directive based on those properties.
|
That's a problem if you need to initialize the directive based on those properties.
|
||||||
They'll have been set when `ngOnInit()` runs.
|
They'll have been set when `ngOnInit()` runs.
|
||||||
|
|
||||||
另外还要记住,在指令的_构造函数完成之前_,那些被绑定的输入属性还都没有值。
|
另外还要记住,在指令的*构造函数完成之前*,那些被绑定的输入属性还都没有值。
|
||||||
如果你需要基于这些属性的值来初始化这个指令,这种情况就会出问题。
|
如果你需要基于这些属性的值来初始化这个指令,这种情况就会出问题。
|
||||||
而当 `ngOnInit()` 执行的时候,这些属性都已经被正确的赋值过了。
|
而当 `ngOnInit()` 执行的时候,这些属性都已经被正确的赋值过了。
|
||||||
|
|
||||||
@ -837,7 +837,7 @@ change detection cycle no matter where the change occurred.
|
|||||||
It's called over twenty times in this example before the user can do anything.
|
It's called over twenty times in this example before the user can do anything.
|
||||||
|
|
||||||
虽然 `ngDoCheck()` 钩子可以可以监测到英雄的 `name` 什么时候发生了变化。但其开销很恐怖。
|
虽然 `ngDoCheck()` 钩子可以可以监测到英雄的 `name` 什么时候发生了变化。但其开销很恐怖。
|
||||||
这个 `ngDoCheck` 钩子被非常频繁的调用 —— 在_每次_变更检测周期之后,发生了变化的每个地方都会调它。
|
这个 `ngDoCheck` 钩子被非常频繁的调用 —— 在*每次*变更检测周期之后,发生了变化的每个地方都会调它。
|
||||||
在这个例子中,用户还没有做任何操作之前,它就被调用了超过二十次。
|
在这个例子中,用户还没有做任何操作之前,它就被调用了超过二十次。
|
||||||
|
|
||||||
Most of these initial checks are triggered by Angular's first rendering of *unrelated data elsewhere on the page*.
|
Most of these initial checks are triggered by Angular's first rendering of *unrelated data elsewhere on the page*.
|
||||||
|
@ -89,7 +89,7 @@ NgModule 类与 JavaScript 模块有下列关键性的不同:
|
|||||||
* An NgModule bounds [declarable classes](guide/ngmodule-faq#q-declarable) only.
|
* An NgModule bounds [declarable classes](guide/ngmodule-faq#q-declarable) only.
|
||||||
Declarables are the only classes that matter to the [Angular compiler](guide/ngmodule-faq#q-angular-compiler).
|
Declarables are the only classes that matter to the [Angular compiler](guide/ngmodule-faq#q-angular-compiler).
|
||||||
|
|
||||||
Angular 模块只绑定了[_可声明的类_](guide/ngmodule-faq#q-declarable),这些可声明的类只是供[Angular 编译器](guide/ngmodule-faq#q-angular-compiler)用的。
|
Angular 模块只绑定了[*可声明的类*](guide/ngmodule-faq#q-declarable),这些可声明的类只是供[Angular 编译器](guide/ngmodule-faq#q-angular-compiler)用的。
|
||||||
|
|
||||||
* Instead of defining all member classes in one giant file as in a JavaScript module,
|
* Instead of defining all member classes in one giant file as in a JavaScript module,
|
||||||
you list the module's classes in the `@NgModule.declarations` list.
|
you list the module's classes in the `@NgModule.declarations` list.
|
||||||
@ -99,7 +99,7 @@ you list the module's classes in the `@NgModule.declarations` list.
|
|||||||
* An NgModule can only export the [declarable classes](guide/ngmodule-faq#q-declarable)
|
* An NgModule can only export the [declarable classes](guide/ngmodule-faq#q-declarable)
|
||||||
it owns or imports from other modules. It doesn't declare or export any other kind of class.
|
it owns or imports from other modules. It doesn't declare or export any other kind of class.
|
||||||
|
|
||||||
Angular 模块只能导出[_可声明的类_](guide/ngmodule-faq#q-declarable)。这可能是它自己拥有的也可能是从其它模块中导入的。它不会声明或导出任何其它类型的类。
|
Angular 模块只能导出[*可声明的类*](guide/ngmodule-faq#q-declarable)。这可能是它自己拥有的也可能是从其它模块中导入的。它不会声明或导出任何其它类型的类。
|
||||||
|
|
||||||
* Unlike JavaScript modules, an NgModule can extend the _entire_ application with services
|
* Unlike JavaScript modules, an NgModule can extend the _entire_ application with services
|
||||||
by adding providers to the `@NgModule.providers` list.
|
by adding providers to the `@NgModule.providers` list.
|
||||||
|
@ -2637,7 +2637,7 @@ You need a way to detect when the route parameters change from _within the same
|
|||||||
The observable `paramMap` property handles that beautifully.
|
The observable `paramMap` property handles that beautifully.
|
||||||
|
|
||||||
不幸的是,`ngOnInit` 对每个实例只调用一次。
|
不幸的是,`ngOnInit` 对每个实例只调用一次。
|
||||||
你需要一种方式来检测_在同一个实例中_路由参数什么时候发生了变化。
|
你需要一种方式来检测*在同一个实例中*路由参数什么时候发生了变化。
|
||||||
而 `params` 属性这个可观察对象(Observable)干净漂亮的处理了这种情况。
|
而 `params` 属性这个可观察对象(Observable)干净漂亮的处理了这种情况。
|
||||||
|
|
||||||
<div class="l-sub-section">
|
<div class="l-sub-section">
|
||||||
@ -2705,7 +2705,7 @@ Stick with the observable `paramMap` approach if there's even a chance that the
|
|||||||
could re-use the component.
|
could re-use the component.
|
||||||
This sample stays with the observable `paramMap` strategy just in case.
|
This sample stays with the observable `paramMap` strategy just in case.
|
||||||
|
|
||||||
**记住:**,用这种技巧,你只得到了这些参数的_初始_值。
|
**记住:**,用这种技巧,你只得到了这些参数的*初始*值。
|
||||||
如果有可能连续多次导航到此组件,那么就该用 `paramMap` 可观察对象的方式。
|
如果有可能连续多次导航到此组件,那么就该用 `paramMap` 可观察对象的方式。
|
||||||
这个例子中仍然使用了 `paramMap` 的可观察对象策略。
|
这个例子中仍然使用了 `paramMap` 的可观察对象策略。
|
||||||
|
|
||||||
@ -4374,7 +4374,7 @@ If the user is logged in, it returns true and the navigation continues.
|
|||||||
The `ActivatedRouteSnapshot` contains the _future_ route that will be activated and the `RouterStateSnapshot`
|
The `ActivatedRouteSnapshot` contains the _future_ route that will be activated and the `RouterStateSnapshot`
|
||||||
contains the _future_ `RouterState` of the application, should you pass through the guard check.
|
contains the _future_ `RouterState` of the application, should you pass through the guard check.
|
||||||
|
|
||||||
这个 `ActivatedRouteSnapshot` 包含了_即将_被激活的路由,而 `RouterStateSnapshot` 包含了该应用_即将_到达的状态。
|
这个 `ActivatedRouteSnapshot` 包含了*即将*被激活的路由,而 `RouterStateSnapshot` 包含了该应用*即将*到达的状态。
|
||||||
你应该通过守卫进行检查。
|
你应该通过守卫进行检查。
|
||||||
|
|
||||||
If the user is not logged in, you store the attempted URL the user came from using the `RouterStateSnapshot.url` and
|
If the user is not logged in, you store the attempted URL the user came from using the `RouterStateSnapshot.url` and
|
||||||
|
@ -7,7 +7,7 @@ protections against common web-application vulnerabilities and attacks such as c
|
|||||||
scripting attacks. It doesn't cover application-level security, such as authentication (_Who is
|
scripting attacks. It doesn't cover application-level security, such as authentication (_Who is
|
||||||
this user?_) and authorization (_What can this user do?_).
|
this user?_) and authorization (_What can this user do?_).
|
||||||
|
|
||||||
Web 应用程序的安全涉及到很多方面。针对常见的漏洞和攻击,比如跨站脚本攻击,Angular 提供了一些内置的保护措施。本章将讨论这些内置保护措施,但不会涉及应用级安全,比如用户认证(_这个用户是谁?_)和授权(_这个用户能做什么?_)。
|
Web 应用程序的安全涉及到很多方面。针对常见的漏洞和攻击,比如跨站脚本攻击,Angular 提供了一些内置的保护措施。本章将讨论这些内置保护措施,但不会涉及应用级安全,比如用户认证(*这个用户是谁?*)和授权(*这个用户能做什么?*)。
|
||||||
|
|
||||||
For more information about the attacks and mitigations described below, see [OWASP Guide Project](https://www.owasp.org/index.php/Category:OWASP_Guide_Project).
|
For more information about the attacks and mitigations described below, see [OWASP Guide Project](https://www.owasp.org/index.php/Category:OWASP_Guide_Project).
|
||||||
|
|
||||||
@ -53,7 +53,7 @@ community and make a pull request.
|
|||||||
* **Avoid Angular APIs marked in the documentation as “_Security Risk_.”**
|
* **Avoid Angular APIs marked in the documentation as “_Security Risk_.”**
|
||||||
For more information, see the [Trusting safe values](guide/security#bypass-security-apis) section of this page.
|
For more information, see the [Trusting safe values](guide/security#bypass-security-apis) section of this page.
|
||||||
|
|
||||||
**避免使用本文档中带“[_安全风险_](guide/security#bypass-security-apis)”标记的 Angular API。**
|
**避免使用本文档中带“[*安全风险*](guide/security#bypass-security-apis)”标记的 Angular API。**
|
||||||
要了解更多信息,请参阅本章的[信任那些安全的值](guide/security#bypass-security-apis)部分。
|
要了解更多信息,请参阅本章的[信任那些安全的值](guide/security#bypass-security-apis)部分。
|
||||||
|
|
||||||
<h2 id='xss'>Preventing cross-site scripting (XSS)</h2>
|
<h2 id='xss'>Preventing cross-site scripting (XSS)</h2>
|
||||||
@ -367,7 +367,7 @@ This technique is effective because all browsers implement the _same origin poli
|
|||||||
on which cookies are set can read the cookies from that site and set custom headers on requests to that site.
|
on which cookies are set can read the cookies from that site and set custom headers on requests to that site.
|
||||||
That means only your application can read this cookie token and set the custom header. The malicious code on `evil.com` can't.
|
That means only your application can read this cookie token and set the custom header. The malicious code on `evil.com` can't.
|
||||||
|
|
||||||
这个技术之所以有效,是因为所有浏览器都实现了_同源策略_。只有设置 cookie 的网站的代码可以访问该站的 cookie,并为该站的请求设置自定义页头。
|
这个技术之所以有效,是因为所有浏览器都实现了*同源策略*。只有设置 cookie 的网站的代码可以访问该站的 cookie,并为该站的请求设置自定义页头。
|
||||||
这就是说,只有你的应用程序可以获取这个 cookie 令牌和设置自定义页头。`evil.com` 的恶意代码不能。
|
这就是说,只有你的应用程序可以获取这个 cookie 令牌和设置自定义页头。`evil.com` 的恶意代码不能。
|
||||||
|
|
||||||
Angular's `HttpClient` has built-in support for the client-side half of this technique. Read about it more in the [HttpClient guide](/guide/http).
|
Angular's `HttpClient` has built-in support for the client-side half of this technique. Read about it more in the [HttpClient guide](/guide/http).
|
||||||
|
@ -1749,7 +1749,7 @@ TypeScript 本身就能够防止意外赋值。
|
|||||||
|
|
||||||
**Do** tolerate _existing_ `const` variables that are spelled in UPPER_SNAKE_CASE.
|
**Do** tolerate _existing_ `const` variables that are spelled in UPPER_SNAKE_CASE.
|
||||||
|
|
||||||
**坚持**容许_现存的_`const` 常量沿用大写蛇形命名法。
|
**坚持**容许*现存的*`const` 常量沿用大写蛇形命名法。
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -1642,7 +1642,7 @@ Note that a _style property_ name can be written in either
|
|||||||
[dash-case](guide/glossary#dash-case), as shown above, or
|
[dash-case](guide/glossary#dash-case), as shown above, or
|
||||||
[camelCase](guide/glossary#camelcase), such as `fontSize`.
|
[camelCase](guide/glossary#camelcase), such as `fontSize`.
|
||||||
|
|
||||||
注意,_样式属性_命名方法可以用[中线命名法](guide/glossary#dash-case),像上面的一样
|
注意,*样式属性*命名方法可以用[中线命名法](guide/glossary#dash-case),像上面的一样
|
||||||
也可以用[驼峰式命名法](guide/glossary#camelcase),如 `fontSize`。
|
也可以用[驼峰式命名法](guide/glossary#camelcase),如 `fontSize`。
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1882,8 +1882,8 @@ Angular offers a special _two-way data binding_ syntax for this purpose, **`[(x)
|
|||||||
The `[(x)]` syntax combines the brackets
|
The `[(x)]` syntax combines the brackets
|
||||||
of _property binding_, `[x]`, with the parentheses of _event binding_, `(x)`.
|
of _property binding_, `[x]`, with the parentheses of _event binding_, `(x)`.
|
||||||
|
|
||||||
Angular 为此提供一种特殊的_双向数据绑定_语法:**`[(x)]`**。
|
Angular 为此提供一种特殊的*双向数据绑定*语法:**`[(x)]`**。
|
||||||
`[(x)]` 语法结合了_属性绑定_的方括号 `[x]` 和_事件绑定_的圆括号 `(x)`。
|
`[(x)]` 语法结合了*属性绑定*的方括号 `[x]` 和*事件绑定*的圆括号 `(x)`。
|
||||||
|
|
||||||
<div class="callout is-important">
|
<div class="callout is-important">
|
||||||
|
|
||||||
@ -1932,12 +1932,12 @@ making the displayed text bigger or smaller.
|
|||||||
|
|
||||||
`SizerComponent.size` 初始值是 `AppComponent.fontSizePx`。
|
`SizerComponent.size` 初始值是 `AppComponent.fontSizePx`。
|
||||||
点击按钮时,通过双向绑定更新 `AppComponent.fontSizePx`。
|
点击按钮时,通过双向绑定更新 `AppComponent.fontSizePx`。
|
||||||
被修改的 `AppComponent.fontSizePx` 通过_样式_绑定,改变文本的显示大小。
|
被修改的 `AppComponent.fontSizePx` 通过*样式*绑定,改变文本的显示大小。
|
||||||
|
|
||||||
The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding.
|
The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding.
|
||||||
Angular _desugars_ the `SizerComponent` binding into this:
|
Angular _desugars_ the `SizerComponent` binding into this:
|
||||||
|
|
||||||
双向绑定语法实际上是_属性_绑定和_事件绑定_的语法糖。
|
双向绑定语法实际上是*属性*绑定和*事件绑定*的语法糖。
|
||||||
Angular 将 `SizerComponent` 的绑定分解成这样:
|
Angular 将 `SizerComponent` 的绑定分解成这样:
|
||||||
|
|
||||||
<code-example path="template-syntax/src/app/app.component.html" linenums="false" title="src/app/app.component.html (two-way-2)" region="two-way-2">
|
<code-example path="template-syntax/src/app/app.component.html" linenums="false" title="src/app/app.component.html (two-way-2)" region="two-way-2">
|
||||||
@ -2024,7 +2024,7 @@ Many NgModules such as the [`RouterModule`](guide/router "Routing and Navigation
|
|||||||
and the [`FormsModule`](guide/forms "Forms") define their own attribute directives.
|
and the [`FormsModule`](guide/forms "Forms") define their own attribute directives.
|
||||||
This section is an introduction to the most commonly used attribute directives:
|
This section is an introduction to the most commonly used attribute directives:
|
||||||
|
|
||||||
更多的细节参见[_属性型指令_](guide/attribute-directives)一章。
|
更多的细节参见[*属性型指令*](guide/attribute-directives)一章。
|
||||||
很多 Angular 模块,比如[`RouterModule`](guide/router "Routing and Navigation")和[`FormsModule`](guide/forms "Forms")都定义了自己的属性型指令。
|
很多 Angular 模块,比如[`RouterModule`](guide/router "Routing and Navigation")和[`FormsModule`](guide/forms "Forms")都定义了自己的属性型指令。
|
||||||
本节将会介绍几个最常用的属性型指令:
|
本节将会介绍几个最常用的属性型指令:
|
||||||
|
|
||||||
@ -2452,7 +2452,7 @@ See also the
|
|||||||
[_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe navigation operator (?.)")
|
[_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe navigation operator (?.)")
|
||||||
described below.
|
described below.
|
||||||
|
|
||||||
参见稍后的[_安全导航操作符_](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)")部分。
|
参见稍后的[*安全导航操作符*](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)")部分。
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -2466,7 +2466,7 @@ described below.
|
|||||||
You define a block of HTML that defines how a single item should be displayed.
|
You define a block of HTML that defines how a single item should be displayed.
|
||||||
You tell Angular to use that block as a template for rendering each item in the list.
|
You tell Angular to use that block as a template for rendering each item in the list.
|
||||||
|
|
||||||
`NgFor` 是一个_重复器_指令 —— 自定义数据显示的一种方式。
|
`NgFor` 是一个*重复器*指令 —— 自定义数据显示的一种方式。
|
||||||
你的目标是展示一个由多个条目组成的列表。首先定义了一个 HTML 块,它规定了单个条目应该如何显示。
|
你的目标是展示一个由多个条目组成的列表。首先定义了一个 HTML 块,它规定了单个条目应该如何显示。
|
||||||
再告诉 Angular 把这个块当做模板,渲染列表中的每个条目。
|
再告诉 Angular 把这个块当做模板,渲染列表中的每个条目。
|
||||||
|
|
||||||
@ -2524,7 +2524,7 @@ Angular 把这个指令翻译成了一个 `<ng-template>` 包裹的宿主元素
|
|||||||
|
|
||||||
Learn about the _microsyntax_ in the [_Structural Directives_](guide/structural-directives#microsyntax) guide.
|
Learn about the _microsyntax_ in the [_Structural Directives_](guide/structural-directives#microsyntax) guide.
|
||||||
|
|
||||||
要了解*微语法*的更多知识,参见[_结构型指令_](guide/structural-directives#microsyntax)一章。
|
要了解*微语法*的更多知识,参见[*结构型指令*](guide/structural-directives#microsyntax)一章。
|
||||||
|
|
||||||
{@a template-input-variable}
|
{@a template-input-variable}
|
||||||
|
|
||||||
@ -3039,7 +3039,7 @@ of the directive metadata, as in this example:
|
|||||||
|
|
||||||
The terms _input_ and _output_ reflect the perspective of the target directive.
|
The terms _input_ and _output_ reflect the perspective of the target directive.
|
||||||
|
|
||||||
_输入_和_输出_这两个词是从目标指令的角度来说的。
|
*输入*和*输出*这两个词是从目标指令的角度来说的。
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
<img src="generated/images/guide/template-syntax/input-output.png" alt="Inputs and outputs">
|
<img src="generated/images/guide/template-syntax/input-output.png" alt="Inputs and outputs">
|
||||||
@ -3129,7 +3129,7 @@ The template expression language employs a subset of JavaScript syntax supplemen
|
|||||||
for specific scenarios. The next sections cover two of these operators: _pipe_ and _safe navigation operator_.
|
for specific scenarios. The next sections cover two of these operators: _pipe_ and _safe navigation operator_.
|
||||||
|
|
||||||
模板表达式语言使用了 JavaScript 语法的子集,并补充了几个用于特定场景的特殊操作符。
|
模板表达式语言使用了 JavaScript 语法的子集,并补充了几个用于特定场景的特殊操作符。
|
||||||
下面介绍其中的两个:_管道_和_安全导航操作符_。
|
下面介绍其中的两个:*管道*和*安全导航操作符*。
|
||||||
|
|
||||||
{@a pipe}
|
{@a pipe}
|
||||||
|
|
||||||
@ -3362,7 +3362,7 @@ Unlike the [_safe navigation operator_](guide/template-syntax#safe-navigation-op
|
|||||||
the **non-null assertion operator** does not guard against null or undefined.
|
the **non-null assertion operator** does not guard against null or undefined.
|
||||||
Rather it tells the TypeScript type checker to suspend strict null checks for a specific property expression.
|
Rather it tells the TypeScript type checker to suspend strict null checks for a specific property expression.
|
||||||
|
|
||||||
与[_安全导航操作符_](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)")不同的是,**非空断言操作符**不会防止出现 null 或 undefined。
|
与[*安全导航操作符*](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)")不同的是,**非空断言操作符**不会防止出现 null 或 undefined。
|
||||||
它只是告诉 TypeScript 的类型检查器对特定的属性表达式,不做 "严格空值检测"。
|
它只是告诉 TypeScript 的类型检查器对特定的属性表达式,不做 "严格空值检测"。
|
||||||
|
|
||||||
You'll need this template operator when you turn on strict null checks. It's optional otherwise.
|
You'll need this template operator when you turn on strict null checks. It's optional otherwise.
|
||||||
|
@ -2503,7 +2503,7 @@ There are several notable changes here:
|
|||||||
|
|
||||||
Add `PhoneDetailComponent` component to the `NgModule` _declarations_ and _entryComponents_:
|
Add `PhoneDetailComponent` component to the `NgModule` _declarations_ and _entryComponents_:
|
||||||
|
|
||||||
把 `PhoneDetailComponent` 组件添加到 `NgModule` 的_declarations_和_entryComponents_中:
|
把 `PhoneDetailComponent` 组件添加到 `NgModule` 的 *declarations* 和 *entryComponents* 中:
|
||||||
|
|
||||||
<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="phonedetail" title="app.module.ts">
|
<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="phonedetail" title="app.module.ts">
|
||||||
|
|
||||||
|
@ -41,7 +41,7 @@ then consider the _experimental_
|
|||||||
Note that the resulting code does not map to the docs. Adjust accordingly.
|
Note that the resulting code does not map to the docs. Adjust accordingly.
|
||||||
|
|
||||||
如果你希望使用**ASP.NET Core**并体验全新项目,
|
如果你希望使用**ASP.NET Core**并体验全新项目,
|
||||||
参见_预览版_<a href="http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/" target="_blank">ASP.NET Core + Angular template for Visual Studio 2015</a>。
|
参见*预览版*<a href="http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/" target="_blank">ASP.NET Core + Angular template for Visual Studio 2015</a>。
|
||||||
注意,最终代码与本文不对应,请适当调节。
|
注意,最终代码与本文不对应,请适当调节。
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -13,7 +13,7 @@ a tool for bundling application source code in convenient _chunks_
|
|||||||
and for loading that code from a server into a browser.
|
and for loading that code from a server into a browser.
|
||||||
|
|
||||||
[**Webpack**](https://webpack.github.io/)是一个广受欢迎的模块打包器,
|
[**Webpack**](https://webpack.github.io/)是一个广受欢迎的模块打包器,
|
||||||
这个工具用来把程序源码打包到一些方便易用的_块_中,以便把这些代码从服务器加载到浏览器中。
|
这个工具用来把程序源码打包到一些方便易用的*块*中,以便把这些代码从服务器加载到浏览器中。
|
||||||
|
|
||||||
It's an excellent alternative to the *SystemJS* approach used elsewhere in the documentation.
|
It's an excellent alternative to the *SystemJS* approach used elsewhere in the documentation.
|
||||||
This guide offers a taste of Webpack and explains how to use it with Angular applications.
|
This guide offers a taste of Webpack and explains how to use it with Angular applications.
|
||||||
@ -126,14 +126,14 @@ should be served to the client in a response to a single file request.
|
|||||||
A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.
|
A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.
|
||||||
|
|
||||||
Webpack 是一个强力的模块打包器。
|
Webpack 是一个强力的模块打包器。
|
||||||
所谓_包(bundle)_就是一个 JavaScript 文件,它把一堆_资源(assets)_合并在一起,以便它们可以在同一个文件请求中发回给客户端。
|
所谓*包(bundle)*就是一个 JavaScript 文件,它把一堆*资源(assets)*合并在一起,以便它们可以在同一个文件请求中发回给客户端。
|
||||||
包中可以包含 JavaScript、CSS 样式、HTML 以及很多其它类型的文件。
|
包中可以包含 JavaScript、CSS 样式、HTML 以及很多其它类型的文件。
|
||||||
|
|
||||||
Webpack roams over your application source code,
|
Webpack roams over your application source code,
|
||||||
looking for `import` statements, building a dependency graph, and emitting one or more _bundles_.
|
looking for `import` statements, building a dependency graph, and emitting one or more _bundles_.
|
||||||
With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.
|
With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.
|
||||||
|
|
||||||
Webpack 会遍历你应用中的所有源码,查找 `import` 语句,构建出依赖图谱,并产出一个(或多个)_包_。
|
Webpack 会遍历你应用中的所有源码,查找 `import` 语句,构建出依赖图谱,并产出一个(或多个)*包*。
|
||||||
通过插件和规则,Webpack 可以对各种非 JavaScript 文件进行预处理和最小化(Minify),比如 TypeScript、SASS 和 LESS 文件等。
|
通过插件和规则,Webpack 可以对各种非 JavaScript 文件进行预处理和最小化(Minify),比如 TypeScript、SASS 和 LESS 文件等。
|
||||||
|
|
||||||
You determine what Webpack does and how it does it with a JavaScript configuration file, `webpack.config.js`.
|
You determine what Webpack does and how it does it with a JavaScript configuration file, `webpack.config.js`.
|
||||||
@ -168,11 +168,11 @@ It sees that you're importing `@angular/core` so it adds that to its dependency
|
|||||||
It opens the `@angular/core` file and follows _its_ network of `import` statements until it has built the complete dependency graph from `main.ts` down.
|
It opens the `@angular/core` file and follows _its_ network of `import` statements until it has built the complete dependency graph from `main.ts` down.
|
||||||
|
|
||||||
这里,Webpack 看到你正在导入 `@angular/core`,于是就这个文件加入到它的依赖列表里,为(有可能)把该文件打进包中做准备。
|
这里,Webpack 看到你正在导入 `@angular/core`,于是就这个文件加入到它的依赖列表里,为(有可能)把该文件打进包中做准备。
|
||||||
它打开 `@angular/core` 并追踪由_该文件的_`import` 语句构成的网络,直到构建出从 `main.ts` 往下的整个依赖图谱。
|
它打开 `@angular/core` 并追踪由*该文件的*`import` 语句构成的网络,直到构建出从 `main.ts` 往下的整个依赖图谱。
|
||||||
|
|
||||||
Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration:
|
Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration:
|
||||||
|
|
||||||
然后它把这些文件**输出**到当前配置所指定的_包文件_`app.js` 中:
|
然后它把这些文件**输出**到当前配置所指定的*包文件*`app.js` 中:
|
||||||
|
|
||||||
<code-example name="webpack.config.js (single output)" language="javascript">
|
<code-example name="webpack.config.js (single output)" language="javascript">
|
||||||
|
|
||||||
@ -620,7 +620,7 @@ Multiple loaders can be chained using the array notation.
|
|||||||
|
|
||||||
#### _plugins_
|
#### _plugins_
|
||||||
|
|
||||||
#### _插件_
|
#### *插件*
|
||||||
|
|
||||||
Finally, create instances of three plugins:
|
Finally, create instances of three plugins:
|
||||||
|
|
||||||
@ -654,7 +654,7 @@ The `CommonsChunkPlugin` identifies the hierarchy among three _chunks_: `app` ->
|
|||||||
Where Webpack finds that `app` has shared dependencies with `vendor`, it removes them from `app`.
|
Where Webpack finds that `app` has shared dependencies with `vendor`, it removes them from `app`.
|
||||||
It would remove `polyfills` from `vendor` if they shared dependencies, which they don't.
|
It would remove `polyfills` from `vendor` if they shared dependencies, which they don't.
|
||||||
|
|
||||||
`CommonsChunkPlugin` 标记出了三个_块_之间的等级体系:`app` -> `vendor` -> `polyfills`。
|
`CommonsChunkPlugin` 标记出了三个*块*之间的等级体系:`app` -> `vendor` -> `polyfills`。
|
||||||
当 Webpack 发现 `app` 与 `vendor` 有共享依赖时,就把它们从 `app` 中移除。
|
当 Webpack 发现 `app` 与 `vendor` 有共享依赖时,就把它们从 `app` 中移除。
|
||||||
在 `vendor` 和 `polyfills` 之间有共享依赖时也同样如此(虽然它们没啥可共享的)。
|
在 `vendor` 和 `polyfills` 之间有共享依赖时也同样如此(虽然它们没啥可共享的)。
|
||||||
|
|
||||||
@ -671,7 +671,7 @@ You _could_ insert them into the `index.html` _manually_. That would be tedious
|
|||||||
Webpack can inject those scripts and links for you with the `HtmlWebpackPlugin`.
|
Webpack can inject those scripts and links for you with the `HtmlWebpackPlugin`.
|
||||||
|
|
||||||
Webpack 生成了一些 js 和 css 文件。
|
Webpack 生成了一些 js 和 css 文件。
|
||||||
虽然你_可以手动_把它们插入到 `index.html` 中,但那样既枯燥又容易出错。
|
虽然你*可以手动*把它们插入到 `index.html` 中,但那样既枯燥又容易出错。
|
||||||
Webpack 可以通过 `HtmlWebpackPlugin` 自动为你注入那些 `script` 和 `link` 标签。
|
Webpack 可以通过 `HtmlWebpackPlugin` 自动为你注入那些 `script` 和 `link` 标签。
|
||||||
|
|
||||||
{@a environment-configuration}
|
{@a environment-configuration}
|
||||||
@ -869,10 +869,10 @@ You tell Webpack to find and load the test files (the files ending in `.spec.ts`
|
|||||||
Each spec file imports all—and only—the application source code that it tests.
|
Each spec file imports all—and only—the application source code that it tests.
|
||||||
Webpack loads just _those_ specific application files and ignores the other files that you aren't testing.
|
Webpack loads just _those_ specific application files and ignores the other files that you aren't testing.
|
||||||
|
|
||||||
注意,你_并没有_明确加载这些应用代码。
|
注意,你*并没有*明确加载这些应用代码。
|
||||||
只是告诉 Webpack 查找并加载这些测试文件(文件名以 `.spec.ts` 结尾)。
|
只是告诉 Webpack 查找并加载这些测试文件(文件名以 `.spec.ts` 结尾)。
|
||||||
每个规约(spec)文件都导入了所有(也只有)它测试所需的应用源码。
|
每个规约(spec)文件都导入了所有(也只有)它测试所需的应用源码。
|
||||||
Webpack 只加载_那些_特定的应用文件,而忽略所有其它你不会测试到的。
|
Webpack 只加载*那些*特定的应用文件,而忽略所有其它你不会测试到的。
|
||||||
|
|
||||||
Grab the app code at the end of this guide and try:
|
Grab the app code at the end of this guide and try:
|
||||||
|
|
||||||
@ -1008,7 +1008,7 @@ for a small Angular application.
|
|||||||
|
|
||||||
_You could always do more_. Search the web for expert advice and expand your Webpack knowledge.
|
_You could always do more_. Search the web for expert advice and expand your Webpack knowledge.
|
||||||
|
|
||||||
_但你还能做得更多_。搜索互联网来获得专家的建议,并扩展你对 Webpack 的认识。
|
*但你还能做得更多*。搜索互联网来获得专家的建议,并扩展你对 Webpack 的认识。
|
||||||
|
|
||||||
[Back to top](guide/webpack#top)
|
[Back to top](guide/webpack#top)
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user