fix: 修订合并冲突
This commit is contained in:
Zhicheng WANG
parent
0fddc95118
commit
d17cf5f506
@ -154,7 +154,7 @@ Notice how custom components like this mix seamlessly with native HTML in the sa
|
||||
Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Writing such push and pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced front-end JavaScript programmer can attest.
|
||||
|
||||
如果没有框架，你就要自己负责把数据值推送到 HTML 控件中，并把来自用户的响应转换成动作和对值的更新。
|
||||
手动写这种数据推拉逻辑会很枯燥、容易出错，难以阅读 —— 用过 jQuery 的程序员一定深有体会。
|
||||
手动写这种数据推拉逻辑会很枯燥、容易出错，难以阅读 —— 有前端 JavaScript 开发经验的程序员一定深有体会。
|
||||
|
||||
Angular supports *two-way data binding*, a mechanism for coordinating the parts of a template with the parts of a component. Add binding markup to the template HTML to tell Angular how to connect both sides.
|
||||
|
||||
|
||||
@ -36,7 +36,7 @@ There are three kinds of directives in Angular:
|
||||
You saw a component for the first time in the [Getting Started](start "Getting Started with Angular") tutorial.
|
||||
|
||||
*组件*是这三种指令中最常用的。
|
||||
你在[快速上手](guide/quickstart)例子中第一次见到组件。
|
||||
你在[快速上手](start "Getting Started with Angular")例子中第一次见到组件。
|
||||
|
||||
*Structural Directives* change the structure of the view.
|
||||
Two examples are [NgFor](guide/template-syntax#ngFor) and [NgIf](guide/template-syntax#ngIf).
|
||||
|
||||
@ -1271,33 +1271,25 @@ so the <code>@Directive</code> configuration applies to components as well</p>
|
||||
|
||||
<p>An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>
|
||||
|
||||
<p>用来定义类的接口。路由器会首先调用本接口来决定是否激活该路由。应该返回一个 <code>boolean</code> 或能解析成 <code>boolean</code> 的 <code>Observable/Promise</code>。</p>
|
||||
<p>用来定义类的接口。路由器会首先调用本接口来决定是否激活该路由。应该返回一个 <code>boolean|UrlTree</code> 或能解析成 <code>boolean|UrlTree</code> 的 <code>Observable/Promise</code>。</p>
|
||||
</td>
|
||||
|
||||
</tr><tr>
|
||||
<td><code>class <b>CanDeactivate</b>Guard implements <b>CanDeactivate</b><T> {<br> canDeactivate(<br> component: T,<br> route: ActivatedRouteSnapshot,<br> state: RouterStateSnapshot<br> ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }<br>}<br><br>{ path: ..., canDeactivate: [<b>CanDeactivate</b>Guard] }</code></td>
|
||||
<td><p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>
|
||||
|
||||
<p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
|
||||
|
||||
<p>用来定义类的接口。路由器会在导航离开前首先调用本接口以决定是否取消激活本路由。应该返回一个 <code>boolean</code> 或能解析成 <code>boolean</code> 的 <code>Observable/Promise</code>。</p>
|
||||
<p>用来定义类的接口。路由器会在导航离开前首先调用本接口以决定是否取消激活本路由。应该返回一个 <code>boolean|UrlTree</code> 或能解析成 <code>boolean|UrlTree</code> 的 <code>Observable/Promise</code>。</p>
|
||||
|
||||
</td>
|
||||
|
||||
</tr><tr>
|
||||
<td><code>class <b>CanActivateChild</b>Guard implements <b>CanActivateChild</b> {<br> canActivateChild(<br> route: ActivatedRouteSnapshot,<br> state: RouterStateSnapshot<br> ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }<br>}<br><br>{ path: ..., canActivateChild: [CanActivateGuard],<br> children: ... }</code></td>
|
||||
<td><p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>
|
||||
|
||||
<p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
|
||||
|
||||
<p>用来定义类的接口。路由器会首先调用本接口来决定是否激活一个子路由。应该返回一个 <code>boolean</code> 或能解析成 <code>boolean</code> 的 <code>Observable/Promise</code>。</p>
|
||||
|
||||
<p>用来定义类的接口。路由器会首先调用本接口来决定是否激活一个子路由。应该返回一个 <code>boolean|UrlTree</code> 或能解析成 <code>boolean|UrlTree</code> 的 <code>Observable/Promise</code>。</p>
|
||||
</td>
|
||||
|
||||
</tr><tr>
|
||||
@ -1328,7 +1320,7 @@ so the <code>@Directive</code> configuration applies to components as well</p>
|
||||
|
||||
<p>An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>
|
||||
|
||||
<p>用来定义类的接口。路由器会首先调用它来决定是否应该加载一个惰性加载模块。应该返回一个 <code>boolean</code> 或能解析成 <code>boolean</code> 的 <code>Observable/Promise</code>。</p>
|
||||
<p>用来定义类的接口。路由器会首先调用它来决定是否应该加载一个惰性加载模块。应该返回一个 <code>boolean|UrlTree</code> 或能解析成 <code>boolean|UrlTree</code> 的 <code>Observable/Promise</code>。</p>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
@ -172,6 +172,8 @@ to the current component and all its descendants, be sure to include the `:host`
|
||||
`::ng-deep`. If the `::ng-deep` combinator is used without the `:host` pseudo-class selector, the style
|
||||
can bleed into other components.
|
||||
|
||||
把伪类 `::ng-deep` 应用到如何一条 CSS 规则上就会完全禁止对那条规则的视图包装。任何带有 `::ng-deep` 的样式都会变成全局样式。为了把指定的样式限定在当前组件及其下级组件中，请确保在 `::ng-deep` 之前带上 `:host` 选择器。如果 `::ng-deep` 组合器在 `:host` 伪类之外使用，该样式就会污染其它组件。
|
||||
|
||||
The following example targets all `<h3>` elements, from the host element down
|
||||
through this component to all of its child elements in the DOM.
|
||||
|
||||
|
||||
@ -376,7 +376,8 @@ The `@Injectable()` decorator is the standard decorator for service classes.
|
||||
|
||||
The decorator requirement is imposed by TypeScript. TypeScript normally discards parameter type information when it [transpiles](guide/glossary#transpile) the code to JavaScript. TypeScript preserves this information if the class has a decorator and the `emitDecoratorMetadata` compiler option is set `true` in TypeScript's `tsconfig.json` configuration file. The CLI configures `tsconfig.json` with `emitDecoratorMetadata: true`.
|
||||
|
||||
对装饰器的需求是 TypeScript 强制要求的。当 TypeScript 把代码[转译](guide/glossary#transpile)成 JavaScript 时，一般会丢弃参数的类型信息。只有当类具有装饰器，并且 `tsconfig.json` 中的编译器选项 `emitDecoratorMetadata` 为 `true` 时，TypeScript 才会保留这些信息。CLI 所配置的 `tsconfig.json` 就带有 `emitDecoratorMetadata: true`。
|
||||
装饰器是 TypeScript 强制要求的。当 TypeScript 把代码[转译](guide/glossary#transpile)成 JavaScript 时，一般会丢弃参数的类型信息。只有当类具有装饰器，并且 `tsconfig.json` 中的编译器选项 `emitDecoratorMetadata` 为 `true` 时，TypeScript 才会保留这些信息。CLI 所配置的 `tsconfig.json` 就带有 `emitDecoratorMetadata: true`。
|
||||
|
||||
This means you're responsible for putting `@Injectable()` on your service classes.
|
||||
|
||||
这意味着你有责任给所有服务类加上 `@Injectable()`。
|
||||
|
||||
@ -538,7 +538,7 @@ showing exactly which classes are included in the bundle.
|
||||
|
||||
Here's the output for the _main_ bundle of an example app called `cli-quickstart`.
|
||||
|
||||
下面是 "快速上手" 应用中 `main` 包的输出。
|
||||
下面是范例应用 `cli-quickstart` 中 `main` 包的输出。
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/deployment/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer">
|
||||
|
||||
@ -12,7 +12,7 @@ The browser maintains a `CustomElementRegistry` of defined custom elements, whic
|
||||
|
||||
[自定义元素](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)这项特性目前受到了 Chrome、Opera 和 Safari 的支持，在其它浏览器中也能通过腻子脚本（参见[浏览器支持](#browser-support)）加以支持。
|
||||
自定义元素扩展了 HTML，它允许你定义一个由 JavaScript 代码创建和控制的标签。
|
||||
浏览器会维护一个自定义元素（也叫 Web Components）的注册表 `CustomElementRegistry`，它把一个可实例化的 JavaScript 类映射到 HTML 标签上。
|
||||
浏览器会维护一个自定义元素的注册表 `CustomElementRegistry`，它把一个可实例化的 JavaScript 类映射到 HTML 标签上。
|
||||
|
||||
The `@angular/elements` package exports a `createCustomElement()` API that provides a bridge from Angular's component interface and change detection functionality to the built-in DOM API.
|
||||
|
||||
|
||||
@ -20,14 +20,15 @@ ng new <my-project>
|
||||
When you run this command, the CLI installs the necessary Angular npm packages and other dependencies in a new workspace, with a root-level application named *my-project*.
|
||||
The workspace root folder contains various support and configuration files, and a README file with generated descriptive text that you can customize.
|
||||
|
||||
当你运行这个命令时，CLI 会在一个新的工作区中安装必需的 Angular npm 包和其它依赖项，其根文件夹名叫 *project_name*。该工作空间的根文件夹中包含一些工作空间配置文件，和一个带有自动生成的描述性文本的自述文件，你可以自定义它。
|
||||
当你运行这个命令时，CLI 会在一个新的工作区中安装必需的 Angular npm 包和其它依赖项，其根应用名叫 *my-project*。
|
||||
该工作空间的根文件夹中包含一些工作空间配置文件，和一个带有自动生成的描述性文本的自述文件，你可以自定义它。
|
||||
|
||||
|
||||
By default, `ng new` creates an initial skeleton application at the root level of the workspace, along with its end-to-end tests.
|
||||
The skeleton is for a simple Welcome application that is ready to run and easy to modify.
|
||||
The root-level application has the same name as the workspace, and the source files reside in the `src/` subfolder of the workspace.
|
||||
|
||||
`ng new` 还会默认创建一个初始的骨架应用，以及它的端到端测试项目。这个骨架是一个简单的 Welcome 应用，它可以运行，也很容易修改。这个*根应用*与工作空间同名，其源文件位于工作空间的 `src/` 子文件夹中。
|
||||
`ng new` 还会默认创建一个位于工作空间根级的骨架应用，及其端到端测试项目。这个骨架是一个简单的 Welcome 应用，它可以运行，也很容易修改。这个*根应用*与工作空间同名，其源文件位于工作空间的 `src/` 子文件夹中。
|
||||
|
||||
|
||||
This default behavior is suitable for a typical "multi-repo" development style where each application resides in its own workspace.
|
||||
@ -57,7 +58,7 @@ See [Setting up for a multi-project workspace](#multiple-projects) below.
|
||||
All projects within a workspace share a [CLI configuration context](guide/workspace-config).
|
||||
The top level of the workspace contains workspace-wide configuration files, configuration files for the root-level application, and subfolders for the root-level application source and test files.
|
||||
|
||||
每个工作空间中的所有项目共享同一个 [CLI 配置环境](guide/workspace-config) 。该工作空间的顶层包含着全工作空间级的配置文件。
|
||||
每个工作空间中的所有项目共享同一个 [CLI 配置环境](guide/workspace-config) 。该工作空间的顶层包含着全工作空间级的配置文件、根应用的配置文件以及一些包含根应用的源文件和测试文件的子文件夹。
|
||||
|
||||
| WORKSPACE CONFIG FILES | PURPOSE |
|
||||
| :--------------------- | :------------------------------------------|
|
||||
@ -91,13 +92,13 @@ The top level of the workspace contains workspace-wide configuration files, conf
|
||||
By default, the CLI command `ng new my-app` creates a workspace folder named "my-app" and generates a new application skeleton in a `src/` folder at the top level of the workspace.
|
||||
A newly generated application contains source files for a root module, with a root component and template.
|
||||
|
||||
CLI 命令`ng new my-app` 会默认创建名为 “my-app” 的工作空间文件夹，并为工作空间顶层的根应用生成一个新的应用骨架。新生成的应用包含一个根模块的源文件，包括一个根组件及其模板。
|
||||
CLI 命令`ng new my-app` 会默认创建名为 “my-app” 的工作空间文件夹，并在 `src/` 文件夹下为工作空间顶层的根应用生成一个新的应用骨架。新生成的应用包含一个根模块的源文件，包括一个根组件及其模板。
|
||||
|
||||
|
||||
When the workspace file structure is in place, you can use the `ng generate` command on the command line to add functionality and data to the application.
|
||||
This initial root-level application is the *default app* for CLI commands (unless you change the default after creating [additional apps](#multiple-projects)).
|
||||
|
||||
当工作空间文件结构到位时，可以在命令行中使用 `ng generate` 命令往该应用中添加功能和数据。这个初始的起步者应用是 CLI 命令的*默认应用*（除非你在创建[其它应用](#multiple-projects)之后更改了默认值）。
|
||||
当工作空间文件结构到位时，可以在命令行中使用 `ng generate` 命令往该应用中添加功能和数据。这个初始的根应用是 CLI 命令的*默认应用*（除非你在创建[其它应用](#multiple-projects)之后更改了默认值）。
|
||||
|
||||
|
||||
<div class="alert is-helpful">
|
||||
@ -207,10 +208,12 @@ Project-specific [TypeScript](https://www.typescriptlang.org/) configuration fil
|
||||
|
||||
An `e2e/` folder at the top level contains source files for a set of end-to-end tests that correspond to the root-level application, along with test-specific configuration files.
|
||||
|
||||
根级的 `e2e/` 文件夹中包含一组针对根应用的端到端测试的源文件，以及测试专属的配置文件。
|
||||
|
||||
|
||||
For a multi-project workspace, application-specific end-to-end tests are in the project root, under `projects/project-name/e2e/`.
|
||||
|
||||
`e2e/` 子文件夹包含一组和应用对应的端到端测试的源文件，以及测试专属的配置文件。
|
||||
|
||||
对于多项目的工作空间，应用专属的端到端测试文件都位于项目各自的根目录下，即 `projects/project-name/e2e/`。
|
||||
|
||||
<code-example language="none" linenums="false">
|
||||
e2e/
|
||||
|
||||
@ -302,7 +302,8 @@ CLI 支持开发周期中的所有阶段，比如构建、测试、打包和部
|
||||
|
||||
* To begin using the CLI for a new project, see [Local Environment Setup](guide/setup-local "Setting up for Local Development").
|
||||
|
||||
要开始使用 CLI 来创建新项目，参见[快速起步](guide/quickstart)。
|
||||
要开始使用 CLI 来创建新项目，参见[建立本地开发环境](guide/setup-local "Setting up for Local Development")。
|
||||
|
||||
* To learn more about the full capabilities of the CLI, see the [CLI command reference](cli).
|
||||
|
||||
要了解 CLI 的全部功能，参见 [CLI 命令参考手册](cli)。
|
||||
@ -1069,6 +1070,7 @@ To learn more, see [Pipes](guide/pipes).
|
||||
|
||||
要了解更多，参见[管道](guide/pipes)页。
|
||||
|
||||
{@a polyfill}
|
||||
## polyfill
|
||||
|
||||
## 腻子脚本（polyfill）
|
||||
@ -1255,7 +1257,7 @@ Add these schematics to the npm package that you use to publish and share your l
|
||||
|
||||
For more information, see [Schematics](guide/schematics) and [Integrating Libraries with the CLI](guide/creating-libraries#integrating-with-the-cli).
|
||||
|
||||
欲知详情，参见 [devkit 文档](https://www.npmjs.com/package/@angular-devkit/schematics)。
|
||||
欲知详情，参见[原理图](guide/schematics)和[把库与 CLI 集成](guide/creating-libraries#integrating-with-the-cli)。
|
||||
|
||||
{@a schematics-cli}
|
||||
|
||||
|
||||
@ -4,15 +4,16 @@
|
||||
|
||||
Ivy is the code name for Angular's [next-generation compilation and rendering pipeline](https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7). Starting with Angular version 8, you can choose to opt in to start using a preview version of Ivy and help in its continuing development and tuning.
|
||||
|
||||
Ivy 是 Angular [下一代编译和渲染管道](https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7)的代号。从 Angular 的版本 8 开始，你就可以开始选用 Ivy 的预览版，并帮助我们继续对它开发和调优了。
|
||||
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
To preview Ivy, use `@angular/core@next` version of Angular (8.1.x), rather than `@angular/core@latest` (8.0.x), as it contains all the latest bug fixes and improvements.
|
||||
|
||||
要想预览 Ivy，请使用 Angular 的 `@angular/core@next` 版(8.1.x)，而不是 `@angular/core@latest` 版(8.0.x)，因为它包含了最近的所有 BUG 修复和改进。
|
||||
</div>
|
||||
|
||||
Ivy 是 Angular [下一代编译和渲染管道](https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7)的代号。从 Angular 的版本 8 开始，你就可以开始选用 Ivy 了，以帮助它继续开发和调优。
|
||||
|
||||
|
||||
## Using Ivy in a new project
|
||||
|
||||
## 在新项目中使用 Ivy
|
||||
@ -53,6 +54,8 @@ To update an existing project to use Ivy, set the `enableIvy` option in the `ang
|
||||
|
||||
AOT compilation with Ivy is faster and should be used by default. In the `angular.json` workspace configuration file, set the default build options for your project to always use AOT compilation.
|
||||
|
||||
利用 Ivy 进行 AOT 编译会更快，应该默认使用它。在工作空间配置文件 `angular.json` 中，为你的项目设置默认构建选项，让它总是使用 AOT 编译。
|
||||
|
||||
```json
|
||||
{
|
||||
"projects": {
|
||||
@ -74,4 +77,4 @@ To stop using the Ivy compiler, set `enableIvy` to `false` in `tsconfig.app.json
|
||||
|
||||
|
||||
要停止使用 Ivy 编译器，请在 `enableIvy` 中把 `tsconfig.app.json` 设置为 `false` ，或者把它完全删除。
|
||||
|
||||
同时，从默认的构建选项中移除 `"aot": true`（如果有）。
|
||||
|
||||
@ -243,7 +243,7 @@ In `AppRoutingModule`, update the `routes` array with the following:
|
||||
|
||||
The import statements stay the same. The first two paths are the routes to the `CustomersModule` and the `OrdersModule` respectively. Notice that the lazy loading syntax uses `loadChildren` followed by a function that uses the browser's built-in `import('...')` syntax for dynamic imports. The import path is the relative path to the module.
|
||||
|
||||
这些 `import` 语句没有变化。前两个路径分别路由到了 `CustomersModule` 和 `OrdersModule`。注意看惰性加载的语法：`loadChildren` 后面紧跟着一个字符串，它指向模块的相对路径，然后是一个 `#`，然后是该模块的类名。
|
||||
这些 `import` 语句没有变化。前两个路径分别路由到了 `CustomersModule` 和 `OrdersModule`。注意看惰性加载的语法：`loadChildren` 后面紧跟着一个函数，它使用浏览器内置的 `import('...')` 语法来实现动态导入。这里的导入路径是到那个模块的相对路径。
|
||||
|
||||
### Inside the feature module
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ Alternatively, you can use the [yarn client](https://yarnpkg.com/) for downloadi
|
||||
|
||||
See [Local Environment Setup](guide/setup-local "Setting up for Local Development") for information about the required versions and installation of `Node.js` and `npm`.
|
||||
|
||||
参见[快速起步](guide/quickstart#prerequisites)，以了解所需的 Node.js 和 npm 版本。
|
||||
参见[建立本地开发环境](guide/setup-local "Setting up for Local Development")，以了解所需的 `Node.js` 和 `npm` 版本。
|
||||
|
||||
If you already have projects running on your machine that use other versions of Node.js and npm, consider using [nvm](https://github.com/creationix/nvm) to manage the multiple versions of Node.js and npm.
|
||||
|
||||
@ -82,9 +82,9 @@ The `dependencies` section of `package.json` contains:
|
||||
|
||||
* [**Angular packages**](#angular-packages): Angular core and optional modules; their package names begin `@angular/`.
|
||||
|
||||
*[*Angular 包**：Angular 的核心和可选模块，它们的包名以 `@angular/` 开头。
|
||||
[**Angular 包**：Angular 的核心和可选模块，它们的包名以 `@angular/` 开头。
|
||||
|
||||
* **[Support packages**](#support-packages): 3rd party libraries that must be present for Angular apps to run.
|
||||
* [**Support packages**](#support-packages): 3rd party libraries that must be present for Angular apps to run.
|
||||
|
||||
[**支持包**](#support-packages)：那些 Angular 应用运行时必需的第三方库。
|
||||
|
||||
|
||||
@ -183,9 +183,11 @@ Version | Status | Released | Active Ends | LTS Ends
|
||||
------- | ------ | ------------ | ------------ | ------------
|
||||
版本 | 状态 | 发布 | 停止活动 | LTS 结束
|
||||
^8.0.0 | Active | May 28, 2019 | Nov 28, 2019 | Nov 28, 2020
|
||||
^8.0.0 | 活跃 | 2019年5月28日 | 2019年11月28日 | 2020年11月28日
|
||||
^7.0.0 | LTS | Oct 18, 2018 | Apr 18, 2019 | Apr 18, 2020
|
||||
^7.0.0 | 活动 | 2018年10月18日 | 2019年4月18日 | 2020年4月18日
|
||||
^7.0.0 | LTS | 2018年10月18日 | 2019年4月18日 | 2020年4月18日
|
||||
^6.0.0 | LTS | May 3, 2018 | Nov 3, 2018 | Nov 3, 2019
|
||||
^6.0.0 | LTS | 2018年5月3日 | 2018年11月3日 | 2019年11月3日
|
||||
|
||||
Angular versions ^4.0.0 and ^5.0.0 are no longer under support.
|
||||
|
||||
|
||||
@ -4260,7 +4260,7 @@ A guard's return value controls the router's behavior:
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
**Note:**The guard can also tell the router to navigate elsewhere, effectively canceling the current navigation. When
|
||||
**Note:** The guard can also tell the router to navigate elsewhere, effectively canceling the current navigation. When
|
||||
doing so inside a guard, the guard should return `false`;
|
||||
|
||||
**注意**：守卫还可以告诉路由器导航到别处，这样也会取消当前的导航。要想在守卫中这么做，就要返回 `false`；
|
||||
@ -4400,8 +4400,7 @@ The admin feature file structure looks like this:
|
||||
<div class='children'>
|
||||
|
||||
<div class='file'>
|
||||
|
||||
admin
|
||||
admin
|
||||
</div>
|
||||
|
||||
<div class='children'>
|
||||
@ -4434,42 +4433,34 @@ admin
|
||||
admin-dashboard.component.html
|
||||
</div>
|
||||
|
||||
<div class='file'> admin-dashboard.component.ts
|
||||
|
||||
</div>
|
||||
<div class='file'>
|
||||
admin-dashboard.component.ts
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='file'>
|
||||
|
||||
manage-crises
|
||||
</div>
|
||||
|
||||
<div class='children'>
|
||||
|
||||
<div class='file'>
|
||||
manage-crises.component.css
|
||||
</div>
|
||||
|
||||
manage-crises.component.css
|
||||
<div class='file'>
|
||||
manage-crises.component.html
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='file'>
|
||||
|
||||
manage-crises.component.html
|
||||
|
||||
</div>
|
||||
|
||||
<div class='file'>
|
||||
|
||||
manage-crises.component.ts
|
||||
|
||||
</div>
|
||||
<div class='file'>
|
||||
manage-crises.component.ts
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='file'>
|
||||
|
||||
manage-heroes
|
||||
manage-heroes
|
||||
</div>
|
||||
|
||||
<div class='children'>
|
||||
@ -5377,8 +5368,10 @@ The `loadChildren` property takes a function that returns a promise using the br
|
||||
The path is the location of the `AdminModule` (relative to the app root).
|
||||
After the code is requested and loaded, the `Promise` resolves an object that contains the `NgModule`, in this case the `AdminModule`.
|
||||
|
||||
给它一个 `loadChildren` 属性（替换掉 `children` 属性），把它设置为 `AdminModule` 的地址。
|
||||
该地址是 `AdminModule` 的文件路径（相对于 `app` 目录的），加上一个 `#` 分隔符，再加上导出模块的类名 `AdminModule`。
|
||||
给它一个 `loadChildren` 属性（替换掉 `children` 属性）。
|
||||
`loadChildren` 属性接收一个函数，该函数使用浏览器内置的动态导入语法 `import('...')` 来惰性加载代码，并返回一个承诺（Promise）。
|
||||
其路径是 `AdminModule` 的位置（相对于应用的根目录）。
|
||||
当代码请求并加载完毕后，这个 `Promise` 就会解析成一个包含 `NgModule` 的对象，也就是 `AdminModule`。
|
||||
|
||||
<code-example path="router/src/app/app-routing.module.5.ts" region="admin-1" header="app-routing.module.ts (load children)">
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Setup for Upgrading from AngularJS
|
||||
|
||||
# 搭建本地开发环境
|
||||
# 准备从 AngularJS 升级
|
||||
|
||||
<!--
|
||||
Question: Can we remove this file and instead direct readers to https://github.com/angular/quickstart/blob/master/README.md
|
||||
@ -11,8 +11,12 @@ Question: Can we remove this file and instead direct readers to https://github.c
|
||||
**Audience:** Use this guide **only** in the context of [Upgrading from AngularJS](guide/upgrade "Upgrading from AngularJS to Angular") or [Upgrading for Performance](guide/upgrade-performance "Upgrading for Performance").
|
||||
Those Upgrade guides refer to this Setup guide for information about using the [deprecated QuickStart GitHub repository](https://github.com/angular/quickstart "Deprecated Angular QuickStart GitHub repository"), which was created prior to the current Angular [CLI](cli "CLI Overview").
|
||||
|
||||
**注意：**本指南**仅仅**适用于[从 AngularJS 升级](guide/upgrade "Upgrading from AngularJS to Angular")和[注重性能的升级](guide/upgrade-performance "Upgrading for Performance")。
|
||||
本指南中提到的升级指南使用的是[已弃用的快速上手 Github 仓库](https://github.com/angular/quickstart "Deprecated Angular QuickStart GitHub repository")，它是在 Angular [CLI](cli "CLI Overview") 推出之前创建的。
|
||||
|
||||
**For all other scenarios,** see the current instructions in [Local Environment Setup](guide/setup-local "Setting up for Local Development").
|
||||
|
||||
**对于所有其它场景**，请参见[建立本地开发环境](guide/setup-local "Setting up for Local Development")中的步骤。
|
||||
|
||||
</div>
|
||||
|
||||
@ -136,8 +140,8 @@ The **QuickStart seed** provides a basic QuickStart playground application and o
|
||||
Consequently, there are many files in the project folder on your machine,
|
||||
most of which you can [learn about later](guide/file-structure).
|
||||
|
||||
**《快速上手》种子** 包含了与《快速上手》游乐场一样的应用，但是，它真正的目的是提供坚实的*本地*开发基础。
|
||||
所以你的电脑里的项目目录里面有*更多文件*，其中的大部分你都会[在稍后学到](guide/file-structure)。
|
||||
**《快速上手》种子** 提供了一个基本的《快速上手》游乐场应用，以及进行本地开发的其它必要文件。
|
||||
所以，你电脑里的项目目录中有*更多文件*，其中的大部分你都会[在稍后学到](guide/file-structure)。
|
||||
|
||||
{@a app-files}
|
||||
|
||||
|
||||
@ -10,14 +10,14 @@ Some developers prefer Visual Studio as their Integrated Development Environment
|
||||
|
||||
This cookbook describes the steps required to set up and use Angular app files in Visual Studio 2015 within an ASP.NET 4.x project.
|
||||
|
||||
本文介绍了在**Visual Studio 2015 的 ASP.NET 4.x 项目中**，实现 Angular “[快速上手](guide/quickstart)”所需的步骤。
|
||||
本文介绍了在**Visual Studio 2015 的 ASP.NET 4.x 项目中**使用 Angular 应用的各个文件所需的步骤。
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
There is no *live example* for this cookbook because it describes Visual Studio, not
|
||||
the Angular application itself. It uses the starter Angular application created by the CLI command [`ng new`](cli/new) as an example.
|
||||
|
||||
本文中没有*在线例子*，因为它介绍的是 Visual Studio，而不是《快速上手》应用程序本身。
|
||||
本文中没有*在线例子*，因为它介绍的是 Visual Studio，而不是《快速上手》应用程序本身。它使用 CLI 命令 [`ng new`](cli/new) 创建的 Angular 入门应用作为例子。
|
||||
|
||||
</div>
|
||||
|
||||
@ -54,7 +54,7 @@ if they are not already on your machine.
|
||||
See [Local Environment Setup](guide/setup-local "Setting up for Local Development") for supported versions and instructions.
|
||||
|
||||
如果你的电脑里没有 Node.js®和 npm，请安装**[它们](https://nodejs.org/en/download/)**。
|
||||
参见[快速上手](guide/quickstart)以了解所支持的版本和安装步骤。
|
||||
参见[搭建本地开发环境](guide/setup-local "Setting up for Local Development")以了解所支持的版本和安装步骤。
|
||||
|
||||
|
||||
|
||||
@ -117,23 +117,23 @@ Visual Studio 将优先在当前的工作区查找外部工具，如果没有找
|
||||
|
||||
While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesn’t ship with more recent versions of TypeScript, which you need to develop Angular applications.
|
||||
|
||||
Visual Studio Update 3 自带 TypeScript 支持，但它的 TypeScript 版本不是开发 Angular 应用所需的 3.1。
|
||||
Visual Studio Update 3 自带 TypeScript 支持，但它的 TypeScript 版本不是开发 Angular 应用所需的最新版 TypeScript。
|
||||
|
||||
To install the latest version of TypeScript:
|
||||
|
||||
要安装 TypeScript 3.1：
|
||||
要安装 TypeScript 最新版：
|
||||
|
||||
* Download and install the latest [TypeScript for Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48593),
|
||||
|
||||
下载并安装 **[TypeScript 3.1 for Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48593)**
|
||||
下载并安装最新版的 **[TypeScript for Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48593)**
|
||||
|
||||
* OR install it with npm: `npm install -g typescript@latest`.
|
||||
|
||||
或通过 npm 安装：`npm install -g typescript@2.2`。
|
||||
或通过 npm 安装：`npm install -g typescript@latest`。
|
||||
|
||||
You can find out more about TypeScript support in Visual Studio **[here](https://blogs.msdn.microsoft.com/typescript/announcing-typescript-3-1/)**.
|
||||
|
||||
你可以在**[这里](https://blogs.msdn.microsoft.com/typescript/2017/02/22/announcing-typescript-2-2/)**查看更多 Visual Studio 中 TypeScript 3.1 的支持。
|
||||
你可以在**[这里](https://blogs.msdn.microsoft.com/typescript/2017/02/22/announcing-typescript-2-2/)**查看更多 Visual Studio 中 TypeScript 的支持。
|
||||
|
||||
At this point, Visual Studio is ready. It’s a good idea to close Visual Studio and
|
||||
restart it to make sure everything is clean.
|
||||
@ -199,7 +199,7 @@ no authentication, and no hosting. Pick the template and options appropriate for
|
||||
Copy files from the starter Angular app into the folder containing the `.csproj` file.
|
||||
Include the files in the Visual Studio project as follows:
|
||||
|
||||
拷贝从 GitHub 下载的“快速上手”文件到包含 `.csproj` 文件的目录中。按照下面的步骤把它们加到 Visual Studio 中：
|
||||
把 Angular 初学者应用中的文件复制到包含 `.csproj` 文件的目录中。按照下面的步骤把它们加到 Visual Studio 中：
|
||||
|
||||
* Click the `Show All Files` button in Solution Explorer to reveal all of the hidden files in the project.
|
||||
|
||||
|
||||
@ -11,26 +11,26 @@ Tutorials and guides include downloadable example to accelerate your projects.
|
||||
<div class="card-container">
|
||||
<a href="start" class="docs-card" title="Angular Getting Started">
|
||||
<section>Learn</section>
|
||||
<section>Angular 走马观花</section>
|
||||
<section>开始学习</section>
|
||||
<p>Create your first Angular app, without any setup</p>
|
||||
<p>快速体验 Angular 的 "hello world" 应用。</p>
|
||||
<p>不需要任何设置，快速创建你的第一个 Angular 应用。</p>
|
||||
<p class="card-footer">Getting Started</p>
|
||||
<p class="card-footer">体验 Angular</p>
|
||||
<p class="card-footer">快速起步</p>
|
||||
</a>
|
||||
<a href="guide/setup-local" class="docs-card"
|
||||
title="Angular Local Environment Setup">
|
||||
<section>Start Working</section>
|
||||
<section>开始使用 Angular</section>
|
||||
<section>开始工作</section>
|
||||
<p>Set up your local environment with the Angular CLI</p>
|
||||
<p>跟随"快速上手"构建你的开发环境</p>
|
||||
<p>使用 Angular CLI 搭建本地开发环境</p>
|
||||
<p class="card-footer">Local Setup</p>
|
||||
<p class="card-footer">快速上手</p>
|
||||
<p class="card-footer">开始搭建</p>
|
||||
</a>
|
||||
<a href="guide/architecture" class="docs-card" title="Angular Architecture">
|
||||
<section>Explore</section>
|
||||
<section>基本原理</section>
|
||||
<section>深入探索</section>
|
||||
<p>Learn more about Angular apps and framework features</p>
|
||||
<p>学习 Angular 应用的基本原理。<br/>从架构概览开始。</p>
|
||||
<p>学习 Angular 应用的更多知识及架构特性</p>
|
||||
<p class="card-footer">Architecture</p>
|
||||
<p class="card-footer">架构</p>
|
||||
</a>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
At the end of [Routing](start/routing "Getting Started: Routing"), the online store application has a product catalog with two views: a product list and product details.
|
||||
Users can click on a product name from the list to see details in a new view, with a distinct URL (route).
|
||||
|
||||
在[路由](getting-started/routing "入门：路由")的末尾，本应用实现了一个包含两个视图的商品名录：商品列表和商品详情。用户点击清单中的某个商品名称，就会在新视图中看到具有显著 URL（路由）的详情页。
|
||||
在[路由](start/routing "入门：路由")的末尾，本应用实现了一个包含两个视图的商品名录：商品列表和商品详情。用户点击清单中的某个商品名称，就会在新视图中看到具有显著 URL（路由）的详情页。
|
||||
|
||||
|
||||
In this section, you'll create the shopping cart. You'll:
|
||||
@ -24,7 +24,7 @@ In this section, you'll create the shopping cart. You'll:
|
||||
|
||||
* Add a shipping component, which retrieves shipping prices for the items in the cart by using Angular's `HttpClient` to retrieve shipping data from a `.json` file.
|
||||
|
||||
添加一个配送组件，它会使用 Angular 的 HttpClient 从 `.json` 文件中检索配送数据来取得购物车中这些商品的运费。
|
||||
添加一个配送组件，它会使用 Angular 的 `HttpClient` 从 `.json` 文件中检索配送数据来取得购物车中这些商品的运费。
|
||||
|
||||
|
||||
{@a services}
|
||||
@ -64,7 +64,7 @@ You'll also set up a cart service to store information about products in the car
|
||||
|
||||
Later, in the [Forms](start/forms "Getting Started: Forms") part of this tutorial, this cart service also will be accessed from the page where the user checks out.
|
||||
|
||||
稍后，在本教程的[表单](getting-started/forms "入门：表单")部分，也会从用户的结账页面中访问这个 购物车服务。
|
||||
稍后，在本教程的[表单](start/forms "入门：表单")部分，也会从用户的结账页面中访问这个 购物车服务。
|
||||
|
||||
|
||||
</div>
|
||||
@ -82,7 +82,7 @@ Later, in the [Forms](start/forms "Getting Started: Forms") part of this tutoria
|
||||
|
||||
1. Right click on the `app` folder, choose `Angular Generator`, and choose `Service`. Name the new service `cart`.
|
||||
|
||||
右键单击 `app` 文件夹，选择 `Angular Generator`，然后选择 `**Service**`。把新的服务命名为 `cart`。
|
||||
右键单击 `app` 文件夹，选择 `Angular Generator`，然后选择 `Service`。把新的服务命名为 `cart`。
|
||||
|
||||
|
||||
<code-example header="src/app/cart.service.ts" path="getting-started/src/app/cart.service.1.ts"></code-example>
|
||||
@ -590,7 +590,7 @@ Here you'll define the `get()` method that will be used.
|
||||
|
||||
Learn more: See the [HttpClient guide](guide/http "HttpClient guide") for more information about Angular's `HttpClient`.
|
||||
|
||||
要了解关于 Angular HttpClient 的更多信息，请参阅[HttpClient 指南](guide/http "HttpClient 指南")。
|
||||
要了解关于 Angular `HttpClient` 的更多信息，请参阅[HttpClient 指南](guide/http "HttpClient 指南")。
|
||||
|
||||
|
||||
</div>
|
||||
@ -744,10 +744,10 @@ To continue exploring Angular, choose either of the following options:
|
||||
|
||||
* [Continue to the "Forms" section](start/forms "Getting Started: Forms") to finish the app by adding the shopping cart page and a form-based checkout feature. You'll create a form to collect user information as part of checkout.
|
||||
|
||||
[继续浏览“表单”部分](getting-started/forms "入门：表单")，通过添加购物车页面和基于表单的结帐功能来完成该应用。你还可以创建一个表单来收集用户信息，作为结账过程的一部分。
|
||||
[继续浏览“表单”部分](start/forms "入门：表单")，通过添加购物车页面和基于表单的结帐功能来完成该应用。你还可以创建一个表单来收集用户信息，作为结账过程的一部分。
|
||||
|
||||
* [Skip ahead to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.
|
||||
|
||||
[跳到“部署”部分，](getting-started/deployment "入门：部署")把你的应用部署到 Firebase 或转成本地开发。
|
||||
[跳到“部署”部分，](start/deployment "入门：部署")把你的应用部署到 Firebase 或转成本地开发。
|
||||
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ To deploy your application, you have to compile it, and then host the JavaScript
|
||||
|
||||
Whether you came here directly from [Your First App](start "Getting Started: Your First App"), or completed the entire online store application through the [Routing](start/routing "Getting Started: Routing"), [Managing Data](start/data "Getting Started: Managing Data"), and [Forms](start/forms "Getting Started: Forms") sections, you have an application that you can deploy by following the instructions in this section.
|
||||
|
||||
无论你是从[你的第一个应用](getting-started "入门：你的第一个应用")直接来到这里，还是经过[路由](getting-started/routing "入门：路由")、[管理数据](getting-started/data "入门：管理数据")和[表单](getting-started/forms "入门：表单")部分，完成了整个在线商店应用之后来到这里，都可以按照本节中的说明进行部署。
|
||||
无论你是从[你的第一个应用](start "入门：你的第一个应用")直接来到这里，还是经过[路由](start/routing "入门：路由")、[管理数据](start/data "入门：管理数据")和[表单](start/forms "入门：表单")部分，完成了整个在线商店应用之后来到这里，都可以按照本节中的说明进行部署。
|
||||
|
||||
|
||||
</div>
|
||||
@ -24,7 +24,7 @@ Whether you came here directly from [Your First App](start "Getting Started: You
|
||||
|
||||
StackBlitz projects are public by default, allowing you to share your Angular app via the project URL. Keep in mind that this is a great way to share ideas and prototypes, but it is not intended for production hosting.
|
||||
|
||||
StackBlitz 允许你从项目中把 Angular 应用直接发布到 Firebase。下面的步骤简要描述了如何在不必设置自己的开发环境的情况下快速部署它。
|
||||
StackBlitz 项目默认是公开的，你可以通过项目的 URL 来共享你的应用。记住，虽然这是一种共享思路和原型的良好途径，但并不适合承载产品环境。
|
||||
|
||||
1. In your StackBlitz project, make sure you have forked or saved your project.
|
||||
|
||||
@ -49,7 +49,7 @@ StackBlitz 允许你从项目中把 Angular 应用直接发布到 Firebase。下
|
||||
|
||||
To build your application locally or for production, you will need to download the source code from your StackBlitz project. Click the `Download Project` icon in the left menu across from `Project` to download your files.
|
||||
|
||||
要在本地构建应用，你需要从 StackBlitz 项目中下载源代码。单击左侧菜单中的 `Download Project` 图标以下载文件。
|
||||
要在本地构建应用或未生产环境构建应用，你需要从 StackBlitz 项目中下载源代码。单击左侧菜单中的 `Download Project` 图标以下载文件。
|
||||
|
||||
|
||||
Once you have the source code downloaded and unzipped, use the [Angular Console](https://angularconsole.com "Angular Console web site") to serve the application, or you install Node and have the Angular CLI installed.
|
||||
@ -101,7 +101,7 @@ This will produce the files that you need to deploy.
|
||||
|
||||
The files in the `dist/my-project-name` folder are static and can be hosted on any web server capable of serving files (Node, Java, .NET) or any backend (Firebase, Google Cloud, App Engine, others).
|
||||
|
||||
`dist/my-project-name` 文件夹中的文件都是静态的，可以托管在任何能够提供文件服务的 Web 服务器上（node，Java，.NET），也可以是任何后端（Firebase，Google Cloud，App Engine 等）。
|
||||
`dist/my-project-name` 文件夹中的文件都是静态的，可以托管在任何能够提供文件服务的 Web 服务器上（Node，Java，.NET），也可以是任何后端（Firebase，Google Cloud，App Engine 等）。
|
||||
|
||||
|
||||
### Hosting an Angular app on Firebase
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
# Forms
|
||||
|
||||
# 表格
|
||||
# 表单
|
||||
|
||||
|
||||
At the end of [Managing Data](start/data "Getting Started: Managing Data"), the online store application has a product catalog and a shopping cart.
|
||||
|
||||
当[管理数据](getting-started/data "入门：管理数据")结束时，这个在线商店应用有了一个商品名录和一个购物车。
|
||||
当[管理数据](start/data "入门：管理数据")结束时，这个在线商店应用有了一个商品名录和一个购物车。
|
||||
|
||||
|
||||
In this section, you'll finish the app by adding a form-based checkout feature. You'll create a form to collect user information as part of checkout.
|
||||
@ -168,5 +168,5 @@ Congratulations! You have a complete online store application with a product cat
|
||||
|
||||
[Continue to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.
|
||||
|
||||
[继续浏览“部署”部分，](getting-started/deployment "入门：部署")把你的应用部署到 Firebase，或者转成本地开发。
|
||||
[继续浏览“部署”部分，](start/deployment "入门：部署")把你的应用转移到本地开发、部署到 Firebase 或你自己的服务器。
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ You don't need to install anything: you'll build the app using the [StackBlitz](
|
||||
|
||||
You'll find many resources to complement the Angular docs. Mozilla's MDN docs include both [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML "Learning HTML: Guides and tutorials") and [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript") introductions. [TypeScript's docs](https://www.typescriptlang.org/docs/home.html "TypeScript documentation") include a 5-minute tutorial. Various online course platforms, such as [Udemy](http://www.udemy.com "Udemy online courses") and [Codecademy](https://www.codecademy.com/ "Codeacademy online courses"), also cover web development basics.
|
||||
|
||||
你可以找到很多资源作为 Angular 文档的补充。Mozilla 的 MDN 文档同时包含了 [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML "学习 HTML：指南和教程") 和 [JavaScript 的](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript") 介绍。[TypeScript 的文档](https://www.typescriptlang.org/docs/home.html "TypeScript 文档")中包含一个 5 分钟教程。各种在线课程平台，比如 [Udemy](http://www.udemy.com "Udemy 在线课程") 和 [Codeacademy](https://www.codecademy.com/ "Codeacademy 在线课程")，也涵盖了 Web 开发的一些基础知识。
|
||||
你可以找到很多资源作为 Angular 文档的补充。Mozilla 的 MDN 文档同时包含了 [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML "学习 HTML：指南和教程") 和 [JavaScript 的](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript") 介绍。[TypeScript 的文档](https://www.typescriptlang.org/docs/home.html "TypeScript 文档")中包含一个 5 分钟教程。各种在线课程平台，比如 [Udemy](http://www.udemy.com "Udemy 在线课程") 和 [Codecademy](https://www.codecademy.com/ "Codeacademy 在线课程")，也涵盖了 Web 开发的一些基础知识。
|
||||
|
||||
|
||||
</div>
|
||||
@ -585,9 +585,9 @@ To continue exploring Angular, choose either of the following options:
|
||||
|
||||
* [Continue to the "Routing" section](start/routing "Getting Started: Routing") to create a product details page that can be accessed by clicking a product name and that has its own URL pattern.
|
||||
|
||||
[继续浏览“路由”部分](getting-started/routing "入门：路由")，创建一个商品详情页面，通过单击商品名称，可以访问该页面，该页面有自己的 URL 模式。
|
||||
[继续浏览“路由”部分](start/routing "入门：路由")，创建一个商品详情页面，通过单击商品名称，可以访问该页面，该页面有自己的 URL 模式。
|
||||
|
||||
* [Skip ahead to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.
|
||||
|
||||
[跳到“部署”部分](getting-started/deployment "入门：部署")，把你的应用部署到 Firebase 或转成本地开发。
|
||||
[跳到“部署”部分，](start/deployment "入门：部署")把你的应用转移到本地开发、部署到 Firebase 或你自己的服务器。
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ At the end of [Your First App](start "Getting Started: Your First App"), the onl
|
||||
The app doesn't have any variable states or navigation.
|
||||
There is one URL, and that URL always displays the "My Store" page with a list of products and their descriptions.
|
||||
|
||||
在[你的第一个应用](getting-started "入门：你的第一个应用")结束时，这个在线商店应用会有一个基本的商品名录。该应用还没有任何可变的状态或导航。它只有一个 URL，该 URL 总是会显示“我的商店”页面，其中是商品列表及其描述。
|
||||
在[你的第一个应用](start "入门：你的第一个应用")结束时，这个在线商店应用会有一个基本的商品名录。该应用还没有任何可变的状态或导航。它只有一个 URL，该 URL 总是会显示“我的商店”页面，其中是商品列表及其描述。
|
||||
|
||||
|
||||
In this section, you'll extend the app to display full product details in separate pages, with their own URLs.
|
||||
@ -232,9 +232,9 @@ To continue exploring Angular, choose either of the following options:
|
||||
|
||||
* [Continue to the "Managing Data" section](start/data "Getting Started: Managing Data") to add the shopping cart feature, using a service to manage the cart data and using HTTP to retrieve external data for shipping prices.
|
||||
|
||||
[继续浏览“管理数据”部分](getting-started/data "入门：管理数据")，以添加购物车功能，使用服务来管理购物车数据，并通过 HTTP 检索配送价格的外部数据。
|
||||
[继续浏览“管理数据”部分](start/data "入门：管理数据")，以添加购物车功能，使用服务来管理购物车数据，并通过 HTTP 检索配送价格的外部数据。
|
||||
|
||||
* [Skip ahead to the Deployment section](start/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development.
|
||||
|
||||
[跳到部署部分](getting-started/deployment "入门：部署")，把你的应用部署到 Firebase 或转成本地开发。
|
||||
[跳到部署部分](start/deployment "入门：部署")，把你的应用部署到 Firebase 或转成本地开发。
|
||||
|
||||
|
||||
@ -12,9 +12,8 @@
|
||||
If you're new to Angular, see the [**Getting Started tutorial.**](start)
|
||||
The Getting Started tutorial covers the same major topics as this Tour of Heroes—components, template syntax, routing, services, and accessing data via HTTP—in a condensed format, following the most current best practices.
|
||||
|
||||
我们最近引入了一个[**新的快速上手**](getting-started)，它基于在线开发环境 [StackBlitz](https://stackblitz.com/)。
|
||||
我们建议每个想要快速掌握 Angular 基础知识的人使用那个新的快速上手，来构建一个在线商店应用程序。
|
||||
新的快速上手以更精简的格式涵盖了与本《英雄指南》相同的主题：组件、模板语法、路由、服务以及通过 HTTP 访问数据等。
|
||||
如果你刚刚接触 Angular，请参见[**新的快速上手**](start)。
|
||||
这个快速上手教程涵盖了与《英雄指南》相同的主题：组件、模板语法、路由、服务以及通过 HTTP 访问数据等，但是格式更简单，且遵循了绝大部分最佳实践。
|
||||
|
||||
**This Tour of Heroes tutorial** is the conceptual basis for many examples in this documentation set. Reading this introduction page provides sufficient context for working with those examples. You do not need to do this tutorial to understand those other examples. The Tour of Heroes tutorial is maintained here for context and continuity.
|
||||
|
||||
|
||||
@ -101,20 +101,30 @@ Install the *In-memory Web API* package from _npm_
|
||||
|
||||
The class `src/app/in-memory-data.service.ts` is generated by the following command:
|
||||
|
||||
`src/app/in-memory-data.service.ts` 类是由下列命令生成的：
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng generate service InMemoryData
|
||||
</code-example>
|
||||
|
||||
This class has the following content:
|
||||
|
||||
该类具有如下内容：
|
||||
|
||||
<code-example path="toh-pt6/src/app/in-memory-data.service.ts" region="init" header="src/app/in-memory-data.service.ts" linenums="false"></code-example>
|
||||
|
||||
This file replaces `mock-heroes.ts`, which is now safe to delete.
|
||||
|
||||
该文件替换了 `mock-heroes.ts`，你现在可以安全的删除那个文件了。
|
||||
|
||||
When your server is ready, detach the *In-memory Web API*, and the app's requests will go through to the server.
|
||||
|
||||
当你的真实服务器就绪时，请移除这个*内存 Web API*，应用的请求就会直接发给服务器。
|
||||
|
||||
Now back to the `HttpClient` story.
|
||||
|
||||
现在，回到 `HttpClient`。
|
||||
|
||||
Import the `HttpClientInMemoryWebApiModule` and the `InMemoryDataService` class.
|
||||
|
||||
导入 `HttpClientInMemoryWebApiModule` 和 `InMemoryDataService` 类（你很快就要创建它）。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user