fix: 把中文中的_替换成*
This commit is contained in:
Zhicheng Wang
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 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 _Angular 模块_或 _NgModules_。
|
||||
Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 *Angular 模块*或 *NgModules*。
|
||||
|
||||
NgModules are a big deal.
|
||||
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"),
|
||||
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
|
||||
_feature modules_, each a cohesive block of code dedicated to an application domain,
|
||||
a workflow, or a closely related set of capabilities.
|
||||
|
||||
_根模块_在一些小型应用中可能是唯一的模块，大多数应用会有很多_特性模块_，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
|
||||
*根模块*在一些小型应用中可能是唯一的模块，大多数应用会有很多*特性模块*，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
|
||||
|
||||
An NgModule, whether a _root_ or _feature_, is a class with an `@NgModule` decorator.
|
||||
|
||||
Angular 模块（无论是_根模块_还是_特性模块_）都是一个带有 `@NgModule` 装饰器的类。
|
||||
Angular 模块（无论是*根模块*还是*特性模块*）都是一个带有 `@NgModule` 装饰器的类。
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
|
|
@ -98,7 +98,7 @@ The most important properties are:
|
|||
* `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).
|
||||
|
||||
`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.
|
||||
|
||||
|
|
@ -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` - _本_模块声明的组件模板需要的类所在的其它模块。
|
||||
`imports` - *本*模块声明的组件模板需要的类所在的其它模块。
|
||||
|
||||
* `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.
|
||||
|
|
@ -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_,
|
||||
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:
|
||||
|
||||
|
|
@ -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.
|
||||
|
||||
`AppComponent` 的 `export` 语句只是用于演示如何导出的，它在这个例子中并不是必须的。根模块不需要_导出_任何东西，因为其它组件不需要导入根模块。
|
||||
`AppComponent` 的 `export` 语句只是用于演示如何导出的，它在这个例子中并不是必须的。根模块不需要*导出*任何东西，因为其它组件不需要导入根模块。
|
||||
|
||||
</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.
|
||||
Other JavaScript modules use *import statements* to access public objects from other modules.
|
||||
|
||||
JavaScript 中，每个_文件_是一个模块，文件中定义的所有对象都从属于那个模块。
|
||||
JavaScript 中，每个*文件*是一个模块，文件中定义的所有对象都从属于那个模块。
|
||||
通过 `export` 关键字，模块可以把它的某些对象声明为公共的。
|
||||
其它 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:
|
||||
|
||||
还可以使用 JavaScript 的导入语句从 Angular _库_中导入 Angular _模块_：
|
||||
还可以使用 JavaScript 的导入语句从 Angular *库*中导入 Angular *模块*：
|
||||
|
||||
<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*.
|
||||
|
||||
_组件_负责控制屏幕上的一小块区域叫做*视图*。
|
||||
*组件*负责控制屏幕上的一小块区域叫做*视图*。
|
||||
|
||||
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.
|
||||
|
||||
还有两种*其它*类型的指令：_结构型_指令和_属性 (attribute) 型_指令。
|
||||
还有两种*其它*类型的指令：*结构型*指令和*属性 (attribute) 型*指令。
|
||||
|
||||
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.
|
||||
|
|
@ -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.
|
||||
It delegates everything nontrivial to services.
|
||||
|
||||
组件的任务就是提供用户体验，仅此而已。它介于视图（由模板渲染）和应用逻辑（通常包括_模型_的某些概念）之间。
|
||||
组件的任务就是提供用户体验，仅此而已。它介于视图（由模板渲染）和应用逻辑（通常包括*模型*的某些概念）之间。
|
||||
设计良好的组件为数据绑定提供属性和方法，把其它琐事都委托给服务。
|
||||
|
||||
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
|
||||
|
||||
### 绑定到_@Input_属性
|
||||
### 绑定到 *@Input* 属性
|
||||
|
||||
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
|
||||
|
||||
### 绑定到_@Input_别名
|
||||
### 绑定到 *@Input* 别名
|
||||
|
||||
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)
|
||||
|
||||
## 更新：用于 AOT 的_upgrade/static_模块 NgUpgrade 指南 (2016-11-14)
|
||||
## 更新：用于 AOT 的 *upgrade/static* 模块 NgUpgrade 指南 (2016-11-14)
|
||||
|
||||
The updated [NgUpgrade Guide](guide/upgrade) guide covers the
|
||||
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_包替换_typings_ (2016-10-20)
|
||||
## 使用 npm 的_@types*包替换*typings_ (2016-10-20)
|
||||
|
||||
Documentation samples now get TypeScript type information for 3rd party libraries
|
||||
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)
|
||||
|
||||
## "路由器"_预加载_语法和_:enter_/_:leave_动画(2016-10-19)
|
||||
## "路由器"*预加载*语法和 *:enter*/*:leave* 动画(2016-10-19)
|
||||
|
||||
The router can lazily _preload_ modules _after_ the app starts and
|
||||
_before_ the user navigates to them for improved perceived performance.
|
||||
|
||||
路由器可以在应用启动_之后_和用户导航到惰性加载模块_之前_，预先加载惰性模块，以增强性能。
|
||||
路由器可以在应用启动*之后*和用户导航到惰性加载模块*之前*，预先加载惰性模块，以增强性能。
|
||||
|
||||
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()`
|
||||
and the generated code would be slightly smaller.
|
||||
|
||||
严格来说，这个 `@Injectable()` 装饰器只在一个服务类有_自己的依赖_的时候，才是_不可缺少_的。
|
||||
严格来说，这个 `@Injectable()` 装饰器只在一个服务类有*自己的依赖*的时候，才是*不可缺少*的。
|
||||
`LoggerService` 不依赖任何东西，所以该日志服务在没有 `@Injectable()` 的时候应该也能工作，生成的代码也更少一些。
|
||||
|
||||
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:
|
||||
|
||||
新建的注入器中没有提供商。
|
||||
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)">
|
||||
|
||||
|
|
@ -758,7 +758,7 @@ The second provider substitutes the `DateLoggerService` for the `LoggerService`.
|
|||
The `LoggerService` is already registered at the `AppComponent` level.
|
||||
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">
|
||||
|
||||
|
|
@ -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.
|
||||
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.
|
||||
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
|
||||
something like this:
|
||||
|
||||
`Car` 的_消费者_也有这个问题。消费者必须更新创建这辆车的代码，就像这样：
|
||||
`Car` 的*消费者*也有这个问题。消费者必须更新创建这辆车的代码，就像这样：
|
||||
|
||||
<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.
|
||||
|
||||
到了依赖注入框架一展身手的时候了！
|
||||
想象框架中有一个叫做_注入器 (injector)_ 的东西。
|
||||
想象框架中有一个叫做*注入器 (injector)* 的东西。
|
||||
用这个注入器注册一些类，它会弄明白如何创建它们。
|
||||
|
||||
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:
|
||||
|
||||
这其实是用于注册提供商的简写表达式。
|
||||
使用的是一个带有两个属性的_提供商_对象字面量：
|
||||
使用的是一个带有两个属性的*提供商*对象字面量：
|
||||
|
||||
<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 you wrote it and it should belong to this module, _do_ declare it in the `declarations` array.
|
||||
|
||||
如果某个组件、指令或管道是属于 `imports` 中所导入的某个模块的，那就_不能再_把它再声明到本模块的 `declarations` 数组中。
|
||||
如果某个组件、指令或管道是属于 `imports` 中所导入的某个模块的，那就*不能再*把它再声明到本模块的 `declarations` 数组中。
|
||||
如果它是你自己写的，并且确实属于当前模块，*才应该*把它声明在 `declarations` 数组中。
|
||||
|
||||
</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.
|
||||
|
||||
要了解更多信息，请参见[_属性型指令_](guide/attribute-directives)页。
|
||||
要了解更多信息，请参见[*属性型指令*](guide/attribute-directives)页。
|
||||
|
||||
{@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.
|
||||
They'll have been set when `ngOnInit()` runs.
|
||||
|
||||
另外还要记住，在指令的_构造函数完成之前_，那些被绑定的输入属性还都没有值。
|
||||
另外还要记住，在指令的*构造函数完成之前*，那些被绑定的输入属性还都没有值。
|
||||
如果你需要基于这些属性的值来初始化这个指令，这种情况就会出问题。
|
||||
而当 `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.
|
||||
|
||||
虽然 `ngDoCheck()` 钩子可以可以监测到英雄的 `name` 什么时候发生了变化。但其开销很恐怖。
|
||||
这个 `ngDoCheck` 钩子被非常频繁的调用 —— 在_每次_变更检测周期之后，发生了变化的每个地方都会调它。
|
||||
这个 `ngDoCheck` 钩子被非常频繁的调用 —— 在*每次*变更检测周期之后，发生了变化的每个地方都会调它。
|
||||
在这个例子中，用户还没有做任何操作之前，它就被调用了超过二十次。
|
||||
|
||||
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.
|
||||
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,
|
||||
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)
|
||||
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
|
||||
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.
|
||||
|
||||
不幸的是，`ngOnInit` 对每个实例只调用一次。
|
||||
你需要一种方式来检测_在同一个实例中_路由参数什么时候发生了变化。
|
||||
你需要一种方式来检测*在同一个实例中*路由参数什么时候发生了变化。
|
||||
而 `params` 属性这个可观察对象（Observable）干净漂亮的处理了这种情况。
|
||||
|
||||
<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.
|
||||
This sample stays with the observable `paramMap` strategy just in case.
|
||||
|
||||
**记住：**，用这种技巧，你只得到了这些参数的_初始_值。
|
||||
**记住：**，用这种技巧，你只得到了这些参数的*初始*值。
|
||||
如果有可能连续多次导航到此组件，那么就该用 `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`
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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).
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ community and make a pull request.
|
|||
* **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.
|
||||
|
||||
**避免使用本文档中带“[_安全风险_](guide/security#bypass-security-apis)”标记的 Angular API。**
|
||||
**避免使用本文档中带“[*安全风险*](guide/security#bypass-security-apis)”标记的 Angular API。**
|
||||
要了解更多信息，请参阅本章的[信任那些安全的值](guide/security#bypass-security-apis)部分。
|
||||
|
||||
<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.
|
||||
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` 的恶意代码不能。
|
||||
|
||||
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.
|
||||
|
||||
**坚持**容许_现存的_`const` 常量沿用大写蛇形命名法。
|
||||
**坚持**容许*现存的*`const` 常量沿用大写蛇形命名法。
|
||||
|
||||
</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
|
||||
[camelCase](guide/glossary#camelcase), such as `fontSize`.
|
||||
|
||||
注意，_样式属性_命名方法可以用[中线命名法](guide/glossary#dash-case)，像上面的一样
|
||||
注意，*样式属性*命名方法可以用[中线命名法](guide/glossary#dash-case)，像上面的一样
|
||||
也可以用[驼峰式命名法](guide/glossary#camelcase)，如 `fontSize`。
|
||||
|
||||
</div>
|
||||
|
|
@ -1882,8 +1882,8 @@ Angular offers a special _two-way data binding_ syntax for this purpose, **`[(x)
|
|||
The `[(x)]` syntax combines the brackets
|
||||
of _property binding_, `[x]`, with the parentheses of _event binding_, `(x)`.
|
||||
|
||||
Angular 为此提供一种特殊的_双向数据绑定_语法：**`[(x)]`**。
|
||||
`[(x)]` 语法结合了_属性绑定_的方括号 `[x]` 和_事件绑定_的圆括号 `(x)`。
|
||||
Angular 为此提供一种特殊的*双向数据绑定*语法：**`[(x)]`**。
|
||||
`[(x)]` 语法结合了*属性绑定*的方括号 `[x]` 和*事件绑定*的圆括号 `(x)`。
|
||||
|
||||
<div class="callout is-important">
|
||||
|
||||
|
|
@ -1932,12 +1932,12 @@ making the displayed text bigger or smaller.
|
|||
|
||||
`SizerComponent.size` 初始值是 `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.
|
||||
Angular _desugars_ the `SizerComponent` binding into this:
|
||||
|
||||
双向绑定语法实际上是_属性_绑定和_事件绑定_的语法糖。
|
||||
双向绑定语法实际上是*属性*绑定和*事件绑定*的语法糖。
|
||||
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">
|
||||
|
|
@ -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.
|
||||
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")都定义了自己的属性型指令。
|
||||
本节将会介绍几个最常用的属性型指令：
|
||||
|
||||
|
|
@ -2452,7 +2452,7 @@ See also the
|
|||
[_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe navigation operator (?.)")
|
||||
described below.
|
||||
|
||||
参见稍后的[_安全导航操作符_](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)")部分。
|
||||
参见稍后的[*安全导航操作符*](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)")部分。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -2466,7 +2466,7 @@ described below.
|
|||
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.
|
||||
|
||||
`NgFor` 是一个_重复器_指令 —— 自定义数据显示的一种方式。
|
||||
`NgFor` 是一个*重复器*指令 —— 自定义数据显示的一种方式。
|
||||
你的目标是展示一个由多个条目组成的列表。首先定义了一个 HTML 块，它规定了单个条目应该如何显示。
|
||||
再告诉 Angular 把这个块当做模板，渲染列表中的每个条目。
|
||||
|
||||
|
|
@ -2524,7 +2524,7 @@ Angular 把这个指令翻译成了一个 `<ng-template>` 包裹的宿主元素
|
|||
|
||||
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}
|
||||
|
||||
|
|
@ -3039,7 +3039,7 @@ of the directive metadata, as in this example:
|
|||
|
||||
The terms _input_ and _output_ reflect the perspective of the target directive.
|
||||
|
||||
_输入_和_输出_这两个词是从目标指令的角度来说的。
|
||||
*输入*和*输出*这两个词是从目标指令的角度来说的。
|
||||
|
||||
<figure>
|
||||
<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_.
|
||||
|
||||
模板表达式语言使用了 JavaScript 语法的子集，并补充了几个用于特定场景的特殊操作符。
|
||||
下面介绍其中的两个：_管道_和_安全导航操作符_。
|
||||
下面介绍其中的两个：*管道*和*安全导航操作符*。
|
||||
|
||||
{@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.
|
||||
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 的类型检查器对特定的属性表达式，不做 "严格空值检测"。
|
||||
|
||||
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_:
|
||||
|
||||
把 `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">
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ then consider the _experimental_
|
|||
Note that the resulting code does not map to the docs. Adjust accordingly.
|
||||
|
||||
如果你希望使用**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>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
[**Webpack**](https://webpack.github.io/)是一个广受欢迎的模块打包器，
|
||||
这个工具用来把程序源码打包到一些方便易用的_块_中，以便把这些代码从服务器加载到浏览器中。
|
||||
这个工具用来把程序源码打包到一些方便易用的*块*中，以便把这些代码从服务器加载到浏览器中。
|
||||
|
||||
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.
|
||||
|
|
@ -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.
|
||||
|
||||
Webpack 是一个强力的模块打包器。
|
||||
所谓_包(bundle)_就是一个 JavaScript 文件，它把一堆_资源(assets)_合并在一起，以便它们可以在同一个文件请求中发回给客户端。
|
||||
所谓*包(bundle)*就是一个 JavaScript 文件，它把一堆*资源(assets)*合并在一起，以便它们可以在同一个文件请求中发回给客户端。
|
||||
包中可以包含 JavaScript、CSS 样式、HTML 以及很多其它类型的文件。
|
||||
|
||||
Webpack roams over your application source code,
|
||||
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.
|
||||
|
||||
Webpack 会遍历你应用中的所有源码，查找 `import` 语句，构建出依赖图谱，并产出一个(或多个)_包_。
|
||||
Webpack 会遍历你应用中的所有源码，查找 `import` 语句，构建出依赖图谱，并产出一个(或多个)*包*。
|
||||
通过插件和规则，Webpack 可以对各种非 JavaScript 文件进行预处理和最小化(Minify)，比如 TypeScript、SASS 和 LESS 文件等。
|
||||
|
||||
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.
|
||||
|
||||
这里，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:
|
||||
|
||||
然后它把这些文件**输出**到当前配置所指定的_包文件_`app.js` 中：
|
||||
然后它把这些文件**输出**到当前配置所指定的*包文件*`app.js` 中：
|
||||
|
||||
<code-example name="webpack.config.js (single output)" language="javascript">
|
||||
|
||||
|
|
@ -620,7 +620,7 @@ Multiple loaders can be chained using the array notation.
|
|||
|
||||
#### _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`.
|
||||
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` 中移除。
|
||||
在 `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 生成了一些 js 和 css 文件。
|
||||
虽然你_可以手动_把它们插入到 `index.html` 中，但那样既枯燥又容易出错。
|
||||
虽然你*可以手动*把它们插入到 `index.html` 中，但那样既枯燥又容易出错。
|
||||
Webpack 可以通过 `HtmlWebpackPlugin` 自动为你注入那些 `script` 和 `link` 标签。
|
||||
|
||||
{@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.
|
||||
Webpack loads just _those_ specific application files and ignores the other files that you aren't testing.
|
||||
|
||||
注意，你_并没有_明确加载这些应用代码。
|
||||
注意，你*并没有*明确加载这些应用代码。
|
||||
只是告诉 Webpack 查找并加载这些测试文件(文件名以 `.spec.ts` 结尾)。
|
||||
每个规约(spec)文件都导入了所有(也只有)它测试所需的应用源码。
|
||||
Webpack 只加载_那些_特定的应用文件，而忽略所有其它你不会测试到的。
|
||||
Webpack 只加载*那些*特定的应用文件，而忽略所有其它你不会测试到的。
|
||||
|
||||
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.
|
||||
|
||||
_但你还能做得更多_。搜索互联网来获得专家的建议，并扩展你对 Webpack 的认识。
|
||||
*但你还能做得更多*。搜索互联网来获得专家的建议，并扩展你对 Webpack 的认识。
|
||||
|
||||
[Back to top](guide/webpack#top)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue