搭建 -> 搭建本地开发环境
This commit is contained in:
parent
0945f5ddce
commit
26100f95f6
|
@ -235,7 +235,7 @@ table(width="100%")
|
||||||
|
|
||||||
For more information see the [Setup](../guide/setup.html) page.
|
For more information see the [Setup](../guide/setup.html) page.
|
||||||
|
|
||||||
要了解更多,参见[搭建](../guide/setup.html)。
|
要了解更多,参见[搭建本地开发环境](../guide/setup.html)。
|
||||||
tr(style=top)
|
tr(style=top)
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
|
|
|
@ -158,7 +158,7 @@ a#compile
|
||||||
Take the <a href='../guide/setup.html'>Setup</a> as a starting point.
|
Take the <a href='../guide/setup.html'>Setup</a> as a starting point.
|
||||||
A few minor changes to the lone `app.component` lead to these two class and html files:
|
A few minor changes to the lone `app.component` lead to these two class and html files:
|
||||||
|
|
||||||
本烹饪书以<a href='../guide/setup.html'>搭建</a>作为起始点。
|
本烹饪书以<a href='../guide/setup.html'>搭建本地开发环境</a>作为起始点。
|
||||||
只要单独对`app.component`文件的类文件和html文件做少量修改就可以了。
|
只要单独对`app.component`文件的类文件和html文件做少量修改就可以了。
|
||||||
|
|
||||||
+makeTabs(
|
+makeTabs(
|
||||||
|
|
|
@ -180,7 +180,7 @@ a#aot
|
||||||
For more information, see the [Setup](!{docsLatest}/guide/setup.html) page.
|
For more information, see the [Setup](!{docsLatest}/guide/setup.html) page.
|
||||||
|
|
||||||
通过一个名叫`bootstrap`的方法来引导Angular应用程序。这个`bootstrap`方法会识别应用程序的顶级“根”[组件(Component)](#component),也就是应用加载的第一个组件。
|
通过一个名叫`bootstrap`的方法来引导Angular应用程序。这个`bootstrap`方法会识别应用程序的顶级“根”[组件(Component)](#component),也就是应用加载的第一个组件。
|
||||||
要了解详情,参见[搭建](!{docsLatest}/setup.html)页。
|
要了解详情,参见[搭建本地开发环境](!{docsLatest}/setup.html)页。
|
||||||
:marked
|
:marked
|
||||||
You can bootstrap multiple apps in the same `index.html`, each with its own top level root.
|
You can bootstrap multiple apps in the same `index.html`, each with its own top level root.
|
||||||
|
|
||||||
|
|
|
@ -8,8 +8,8 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
"setup": {
|
"setup": {
|
||||||
"title": "构建本地开发环境",
|
"title": "搭建本地开发环境",
|
||||||
"navTitle": "构建",
|
"navTitle": "开发环境",
|
||||||
"intro": "安装 Angular 《快速开始》种子,更快更有效地在本地开发应用",
|
"intro": "安装 Angular 《快速开始》种子,更快更有效地在本地开发应用",
|
||||||
"nextable": true,
|
"nextable": true,
|
||||||
"hideNextPage": true,
|
"hideNextPage": true,
|
||||||
|
|
|
@ -107,7 +107,7 @@ a#write-directive
|
||||||
Follow the [setup](setup.html) instructions for creating a new project
|
Follow the [setup](setup.html) instructions for creating a new project
|
||||||
named <span ngio-ex>attribute-directives</span>.
|
named <span ngio-ex>attribute-directives</span>.
|
||||||
|
|
||||||
按照[搭建](setup.html)的说明,创建一个项目文件夹<span ngio-ex>attribute-directives</span>。
|
按照[搭建本地开发环境](setup.html)的说明,创建一个项目文件夹<span ngio-ex>attribute-directives</span>。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Create the following source file in the indicated folder with the following code:
|
Create the following source file in the indicated folder with the following code:
|
||||||
|
|
|
@ -19,7 +19,7 @@ block includes
|
||||||
|
|
||||||
《快速开始》被重新编写,变得更加快速。
|
《快速开始》被重新编写,变得更加快速。
|
||||||
它使用了在 Plunker 中运行的最小化的 “Hello Angular” 应用。
|
它使用了在 Plunker 中运行的最小化的 “Hello Angular” 应用。
|
||||||
新添加的[搭建](setup.html)页面解释了如何通过下载或者克隆 QuickStart github 库来安装本地开发环境。
|
新添加的[搭建本地开发环境](setup.html)页面解释了如何通过下载或者克隆 QuickStart github 库来安装本地开发环境。
|
||||||
你将不再需要拷贝粘贴代码到一些并没有对其解释的配置文件中。
|
你将不再需要拷贝粘贴代码到一些并没有对其解释的配置文件中。
|
||||||
|
|
||||||
## Sync with Angular v.2.2.0 (2016-11-14)
|
## Sync with Angular v.2.2.0 (2016-11-14)
|
||||||
|
|
|
@ -54,7 +54,7 @@ figure.image-display
|
||||||
Follow the [setup](setup.html) instructions for creating a new project
|
Follow the [setup](setup.html) instructions for creating a new project
|
||||||
named <ngio-ex path="displaying-data"></ngio-ex>.
|
named <ngio-ex path="displaying-data"></ngio-ex>.
|
||||||
|
|
||||||
按照[搭建](setup.html)的说明,创建一个新项目,名为<ngio-ex path="displaying-data"></ngio-ex>。
|
按照[搭建本地开发环境](setup.html)的说明,创建一个新项目,名为<ngio-ex path="displaying-data"></ngio-ex>。
|
||||||
|
|
||||||
Then modify the <ngio-ex path="app.component.ts"></ngio-ex> file by
|
Then modify the <ngio-ex path="app.component.ts"></ngio-ex> file by
|
||||||
changing the template and the body of the component.
|
changing the template and the body of the component.
|
||||||
|
|
|
@ -171,7 +171,7 @@ figure.image-display
|
||||||
Follow the [setup](setup.html) instructions for creating a new project
|
Follow the [setup](setup.html) instructions for creating a new project
|
||||||
named <span ngio-ex>angular-forms</span>.
|
named <span ngio-ex>angular-forms</span>.
|
||||||
|
|
||||||
按照[搭建](setup.html)的说明,创建一个名为<span ngio-ex>angular-forms</span>的新项目。
|
按照[搭建本地开发环境](setup.html)的说明,创建一个名为<span ngio-ex>angular-forms</span>的新项目。
|
||||||
|
|
||||||
## Create the Hero Model Class
|
## Create the Hero Model Class
|
||||||
|
|
||||||
|
|
|
@ -33,7 +33,7 @@ include ../_util-fns
|
||||||
sections of the <a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a> file
|
sections of the <a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a> file
|
||||||
installed as described during [Setup](setup.html).
|
installed as described during [Setup](setup.html).
|
||||||
|
|
||||||
我们在[搭建](setup.html)一章中安装并解释的<a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a>文件的
|
我们在[搭建本地开发环境](setup.html)一章中安装并解释的<a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a>文件的
|
||||||
`dependencies`和`devDependencies`区中指定了一组适用于新手的综合依赖包。
|
`dependencies`和`devDependencies`区中指定了一组适用于新手的综合依赖包。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
|
|
@ -384,7 +384,7 @@ table(width="100%")
|
||||||
|
|
||||||
1. Start a new project following the instructions in [Setup](setup.html).
|
1. Start a new project following the instructions in [Setup](setup.html).
|
||||||
|
|
||||||
根据[搭建](setup.html)中的说明创建新的项目。
|
根据[搭建本地开发环境](setup.html)中的说明创建新的项目。
|
||||||
|
|
||||||
1. Start a new project with the
|
1. Start a new project with the
|
||||||
[Angular CLI](https://github.com/angular/angular-cli/blob/master/README.md).
|
[Angular CLI](https://github.com/angular/angular-cli/blob/master/README.md).
|
||||||
|
@ -400,14 +400,14 @@ table(width="100%")
|
||||||
|
|
||||||
In this chapter, the application and its tests are based on the documentation setup.
|
In this chapter, the application and its tests are based on the documentation setup.
|
||||||
|
|
||||||
在本章中,应用及其测试程序是基于[搭建](setup.html)的。
|
在本章中,应用及其测试程序是基于[搭建本地开发环境](setup.html)的。
|
||||||
|
|
||||||
.alert.is-helpful
|
.alert.is-helpful
|
||||||
:marked
|
:marked
|
||||||
If your application was based on the [Setup](setup.html) instructions,
|
If your application was based on the [Setup](setup.html) instructions,
|
||||||
you can skip the rest of this section and get on with your first test.
|
you can skip the rest of this section and get on with your first test.
|
||||||
|
|
||||||
如果你的应用是基于[搭建](setup.html)章所述的,可以跳过本小节下面的内容,直接开始第一个测试。
|
如果你的应用是基于[搭建本地开发环境](setup.html)章所述的,可以跳过本小节下面的内容,直接开始第一个测试。
|
||||||
《快速起步》库一同了所有必须的配置。
|
《快速起步》库一同了所有必须的配置。
|
||||||
|
|
||||||
#setup-files
|
#setup-files
|
||||||
|
@ -466,7 +466,7 @@ table(width="100%")
|
||||||
|
|
||||||
[SystemJS](https://github.com/systemjs/systemjs/blob/master/README.md)
|
[SystemJS](https://github.com/systemjs/systemjs/blob/master/README.md)
|
||||||
加载应用和测试文件。本脚本告诉SystemJS去哪儿寻找这些文件,以及如何加载它们。
|
加载应用和测试文件。本脚本告诉SystemJS去哪儿寻找这些文件,以及如何加载它们。
|
||||||
`systemjs.config.js`的版本和基于[搭建](setup.html)的应用使用的一样。
|
`systemjs.config.js`的版本和基于[搭建本地开发环境](setup.html)的应用使用的一样。
|
||||||
tr
|
tr
|
||||||
td(style="vertical-align: top") <code>systemjs.config.extras.js</code>
|
td(style="vertical-align: top") <code>systemjs.config.extras.js</code>
|
||||||
td
|
td
|
||||||
|
|
|
@ -43,7 +43,7 @@ a(id="tsconfig")
|
||||||
:marked
|
:marked
|
||||||
We created the following `tsconfig.json` during [Setup](setup.html):
|
We created the following `tsconfig.json` during [Setup](setup.html):
|
||||||
|
|
||||||
我们在[搭建](setup.html)中创建过如下的`tsconfig.json`:
|
我们在[搭建本地开发环境](setup.html)中创建过如下的`tsconfig.json`:
|
||||||
|
|
||||||
+makeJson('quickstart/ts/tsconfig.json', null, 'tsconfig.json')(format=".")
|
+makeJson('quickstart/ts/tsconfig.json', null, 'tsconfig.json')(format=".")
|
||||||
:marked
|
:marked
|
||||||
|
@ -72,7 +72,7 @@ a(id="tsconfig")
|
||||||
|
|
||||||
The documentation setup sets the `noImplicitAny` flag to `true`.
|
The documentation setup sets the `noImplicitAny` flag to `true`.
|
||||||
|
|
||||||
[搭建](setup.html)文档将`noImplicitAny`标志设置为`true`。
|
[搭建本地开发环境](setup.html)文档将`noImplicitAny`标志设置为`true`。
|
||||||
|
|
||||||
When the `noImplicitAny` flag is `true` and the TypeScript compiler cannot infer
|
When the `noImplicitAny` flag is `true` and the TypeScript compiler cannot infer
|
||||||
the type, it still generates the JavaScript files, but it also **reports an error**.
|
the type, it still generates the JavaScript files, but it also **reports an error**.
|
||||||
|
|
|
@ -711,7 +711,7 @@ figure.image-display
|
||||||
[the Setup](setup.html), you can selectively copy in material from the
|
[the Setup](setup.html), you can selectively copy in material from the
|
||||||
<a href="https://github.com/angular/quickstart" target="_blank">QuickStart github repository</a>.
|
<a href="https://github.com/angular/quickstart" target="_blank">QuickStart github repository</a>.
|
||||||
|
|
||||||
现在,把Angular 2引入项目中。根据[搭建](setup.html)中的指导,你可以有选择的从<a href="https://github.com/angular/quickstart" target="_blank">“快速起步”的Github仓库</a>中拷贝素材进来。
|
现在,把Angular 2引入项目中。根据[搭建本地开发环境](setup.html)中的指导,你可以有选择的从<a href="https://github.com/angular/quickstart" target="_blank">“快速起步”的Github仓库</a>中拷贝素材进来。
|
||||||
|
|
||||||
Next, create an `app.module.ts` file and add the following `NgModule` class:
|
Next, create an `app.module.ts` file and add the following `NgModule` class:
|
||||||
|
|
||||||
|
@ -1353,7 +1353,7 @@ code-example(format="").
|
||||||
to interpret our source files.
|
to interpret our source files.
|
||||||
|
|
||||||
我们还应该配置TypeScript编译器,以便它能理解我们的项目结构。我们要往项目目录下添加一个`tsconfig.json`文件,
|
我们还应该配置TypeScript编译器,以便它能理解我们的项目结构。我们要往项目目录下添加一个`tsconfig.json`文件,
|
||||||
就像在[搭建](setup.html)中做过的那样。它将告诉TypeScript编译器,该如何编译我们的源文件。
|
就像在[搭建本地开发环境](setup.html)中做过的那样。它将告诉TypeScript编译器,该如何编译我们的源文件。
|
||||||
|
|
||||||
+makeJson('upgrade-phonecat-1-typescript/ts/tsconfig.ng1.json', null, 'tsconfig.json')
|
+makeJson('upgrade-phonecat-1-typescript/ts/tsconfig.ng1.json', null, 'tsconfig.json')
|
||||||
|
|
||||||
|
@ -1552,7 +1552,7 @@ code-example(format="").
|
||||||
and get the following configurations from there:
|
and get the following configurations from there:
|
||||||
|
|
||||||
我们来使用SystemJS模块加载器把Angular 2安装到项目中。
|
我们来使用SystemJS模块加载器把Angular 2安装到项目中。
|
||||||
看看[搭建](setup.html)中的指南,并从那里获得如下配置:
|
看看[搭建本地开发环境](setup.html)中的指南,并从那里获得如下配置:
|
||||||
|
|
||||||
* Add Angular 2 and the other new dependencies to `package.json`
|
* Add Angular 2 and the other new dependencies to `package.json`
|
||||||
|
|
||||||
|
@ -1612,7 +1612,7 @@ code-example(format="").
|
||||||
We want to point the browser to the project
|
We want to point the browser to the project
|
||||||
root when loading things through SystemJS, instead of using the `<base>` URL:
|
root when loading things through SystemJS, instead of using the `<base>` URL:
|
||||||
|
|
||||||
在我们从[搭建](setup.html)中拿来的`systemjs.config.js`文件中,我们还需要做一些调整,以适应我们的项目结构。
|
在我们从[搭建本地开发环境](setup.html)中拿来的`systemjs.config.js`文件中,我们还需要做一些调整,以适应我们的项目结构。
|
||||||
在使用SystemJS而不是`<base>` URL加载时,我们需要把浏览器指向项目的根目录。
|
在使用SystemJS而不是`<base>` URL加载时,我们需要把浏览器指向项目的根目录。
|
||||||
|
|
||||||
+makeExample('upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js', 'paths', 'systemjs.config.js')
|
+makeExample('upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js', 'paths', 'systemjs.config.js')
|
||||||
|
|
|
@ -12,7 +12,7 @@ include ../_util-fns
|
||||||
named <ngio-ex path="angular-tour-of-heroes"></ngio-ex>
|
named <ngio-ex path="angular-tour-of-heroes"></ngio-ex>
|
||||||
after which the file structure should look like this:
|
after which the file structure should look like this:
|
||||||
|
|
||||||
根据[搭建](../guide/setup.html)中的说明创建一个名为<ngio-ex path="angular-tour-of-heroes"></ngio-ex>的新项目,
|
根据[搭建本地开发环境](../guide/setup.html)中的说明创建一个名为<ngio-ex path="angular-tour-of-heroes"></ngio-ex>的新项目,
|
||||||
该项目的文件结构应该是这样的:
|
该项目的文件结构应该是这样的:
|
||||||
|
|
||||||
.filetree
|
.filetree
|
||||||
|
|
|
@ -1495,7 +1495,7 @@ block css-files
|
||||||
Here is an excerpt:
|
Here is an excerpt:
|
||||||
|
|
||||||
我们的设计师提供了一组基础样式,这些样式应用到的元素横跨整个应用。
|
我们的设计师提供了一组基础样式,这些样式应用到的元素横跨整个应用。
|
||||||
它们与我们之前在[搭建](../guide/setup.html)时安装的整套样式对应。
|
它们与我们之前在[搭建本地开发环境](../guide/setup.html)时安装的整套样式对应。
|
||||||
下面是摘录:
|
下面是摘录:
|
||||||
|
|
||||||
+makeExcerpt('styles.css (excerpt)', 'toh')
|
+makeExcerpt('styles.css (excerpt)', 'toh')
|
||||||
|
|
Loading…
Reference in New Issue