QuickStart一审完毕

This commit is contained in:
Zhicheng Wang 2016-05-11 15:56:17 +08:00
parent f397bf6608
commit 479a70d90d

View File

@ -11,7 +11,7 @@ include _util-fns
[Download the QuickStart source](https://github.com/angular/quickstart/blob/master/README.md) [Download the QuickStart source](https://github.com/angular/quickstart/blob/master/README.md)
and start coding. and start coding.
等不及了?[下载QuickStart源码](https://github.com/angular/quickstart/blob/master/README.md) 等不及了?立刻[下载QuickStart源码](https://github.com/angular/quickstart/blob/master/README.md)
开始写代码! 开始写代码!
## See It Run! ## See It Run!
@ -21,8 +21,8 @@ include _util-fns
which loads the sample app in <a href="http://plnkr.co/" title="Plunker" target="_blank">plunker</a> which loads the sample app in <a href="http://plnkr.co/" title="Plunker" target="_blank">plunker</a>
and displays a simple message: and displays a simple message:
试试这个 <a href="/resources/live-examples/quickstart/ts/plnkr.html" target="_blank">在线例子</a> 试试这个 <a href="/resources/live-examples/quickstart/ts/plnkr.html" target="_blank">在线例子</a>
它将在<a href="http://plnkr.co/" title="Plunker" target="_blank">plunker</a>中加载这个范例,并显示一条简短的消息 它将在<a href="http://plnkr.co/" title="Plunker" target="_blank">plunker</a>中加载这个范例,并显示一条简短的消息
figure.image-display figure.image-display
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="QuickStart应用的输出") img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="QuickStart应用的输出")
@ -35,24 +35,26 @@ figure.image-display
The following steps establish a development environment for the documentation samples The following steps establish a development environment for the documentation samples
that also can be the foundation for our real world applications. At a high level, we will that also can be the foundation for our real world applications. At a high level, we will
当然,为了在plunker中运行起来我们不必构建这些应用。 当然,如果只是想在plunker中跑起来我们不需要构建这些应用。
下列步骤会指引你为本文档中的这些例子建立开发环境,它同样能作为将来我们开发真实应用的基础。大体来说,我们将: 下列步骤是用来指引你为文档中的这些例子建立开发环境的,它同样也能作为将来我们开发真实应用的基础。大体来说,我们将:
- set up the [development environment](#devenv) - set up the [development environment](#devenv)
- 安装 [开发环境](#devenv) - 安装 [开发环境](#devenv)
- write the app's Angular [root component](#component) - write the app's Angular [root component](#component)
- 写本应用的Angular[根组件root component](#component) - 写本应用的Angular[根组件](#component)
- write [main.ts](#main) which tells Angular to display the root component - write [main.ts](#main) which tells Angular to display the root component
- 写一个 [main.ts](#main) 它将告诉Angular如何显示根组件 - 写一个 [main.ts](#main)它将告诉Angular如何显示根组件
- write the [host web page](#index) (`index.html`) - write the [host web page](#index) (`index.html`)
- 写 [宿主页面](#index) (`index.html`) - 写一个[宿主页面](#index)(`index.html`)
.l-sub-section .l-sub-section
:marked :marked
We'll see many code blocks as we pursue this agenda. They're all easy to copy and paste: We'll see many code blocks as we pursue this agenda. They're all easy to copy and paste:
我们将看到很多代码块作为我们的实现步骤。它们都很容易拷贝和粘贴:
在此日程中,我们将会看到很多代码块。它们都很容易拷贝和粘贴:
code-example(format='.', language='html'). code-example(format='.', language='html').
Click the glyph on the right to copy code snippets to the clipboard ⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨ Click the glyph on the right to copy code snippets to the clipboard ⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨
点击右边的图标来把代码片段拷贝到剪贴板 ⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨ 点击右边的图标来把代码片段拷贝到剪贴板 ⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨
button(class="verbose off md-primary md-button md-ink-ripple", type="button", onclick="verbose(false)"). button(class="verbose off md-primary md-button md-ink-ripple", type="button", onclick="verbose(false)").
@ -66,12 +68,12 @@ button(class="verbose on md-primary md-button md-ink-ripple", type="button", onc
*Explanations* describe the concepts and reasons behind the instructions. *Explanations* describe the concepts and reasons behind the instructions.
Explanations have a thin border on the left like *this* block of text. Explanations have a thin border on the left like *this* block of text.
*解释* 描述指令背后的概念和理由。解释就像 *这块儿* 文字一样,在左侧有一个细边框。 *解释* 描述操作指南背后的概念和理由。解释就像 *现在这块儿* 文字一样,会在左侧显示一个细边框。
Click *Hide Explanations* to show only the instructions. Click *Hide Explanations* to show only the instructions.
Click it again to see everything again. Click it again to see everything again.
点击 *隐藏解释* 可以只显示指令。再点一次可以再次看到所有内容。 点击 *隐藏解释* 可以只显示操作指南。再点一次就可以再次看到所有内容。
a(id="devenv") a(id="devenv")
.l-main-section .l-main-section
@ -86,9 +88,9 @@ a(id="devenv")
* create an [application project folder](#app-folder) * create an [application project folder](#app-folder)
* 创建一个 [应用项目目录](#app-folder) * 创建一个 [应用项目目录](#app-folder)
* add a [tsconfig.json](#tsconfig) to guide the TypeScript compiler * add a [tsconfig.json](#tsconfig) to guide the TypeScript compiler
* 添加一个[tsconfig.json](#tsconfig)为TypeScript编译器提供指导 * 添加一个[tsconfig.json](#tsconfig)为TypeScript编译器提供指导
* add a [typings.json](#typings) that identifies missing TypeScript definition files * add a [typings.json](#typings) that identifies missing TypeScript definition files
* 添加一个[typings.json](#typings)来存放缺失的TypeScript定义文件 * 添加一个[typings.json](#typings)来指出所缺的TypeScript定义文件
* add a [package.json](#package-json) that defines the packages and scripts we need * add a [package.json](#package-json) that defines the packages and scripts we need
* 添加一个[package.json](#package-json)来定义我们所需的依赖包和脚本 * 添加一个[package.json](#package-json)来定义我们所需的依赖包和脚本
* install the npm packages and typings files * install the npm packages and typings files
@ -97,11 +99,13 @@ a(id="devenv")
a(id="install-npm") a(id="install-npm")
:marked :marked
**Install [node and npm](https://nodejs.org/en/download/)** if not already on your machine. **Install [node and npm](https://nodejs.org/en/download/)** if not already on your machine.
**安装[node and npm](https://nodejs.org/en/download/)** ,如果你机器上还没有。
如果你机器上还没有的话,请**安装[node和npm](https://nodejs.org/en/download/)** 。
a(id="app-folder") a(id="app-folder")
:marked :marked
Create a **new project folder** Create a **new project folder**
创建一个 **新项目目录** 创建一个 **新项目目录**
code-example(format=""). code-example(format="").
mkdir angular2-quickstart mkdir angular2-quickstart
@ -120,7 +124,7 @@ a(id="tsconfig")
<a href="guide/typescript-configuration.html#tsconfig" target="_blank">TypeScript Configuration</a> chapter. <a href="guide/typescript-configuration.html#tsconfig" target="_blank">TypeScript Configuration</a> chapter.
这个`tsconfig.json`文件将为TypeScript编译器提供指引。 这个`tsconfig.json`文件将为TypeScript编译器提供指引。
到<a href="guide/typescript-configuration.html#tsconfig" target="_blank">TypeScript Configuration</a>一节可以了解更多 要学习更多,参见<a href="guide/typescript-configuration.html#tsconfig" target="_blank">TypeScript配置</a>一章
a(id="typings") a(id="typings")
:marked :marked
@ -166,20 +170,21 @@ a(id="package-json")
Angular应用程序开发者靠 <a href="https://docs.npmjs.com/" target="_blank"><i>npm</i></a> 安装应用程序所需的库。 Angular应用程序开发者靠 <a href="https://docs.npmjs.com/" target="_blank"><i>npm</i></a> 安装应用程序所需的库。
Angular开发组在`dependencies`和`devDependencies`中指定了建议初学者们使用的依赖包。 Angular开发组在`dependencies`和`devDependencies`中指定了建议初学者们使用的依赖包。
查看[npm packages](guide/npm-packages.html)一章以了解详情 要了解详情,参见[npm包](guide/npm-packages.html)一章
### Helpful scripts ### Helpful scripts
### 有用的脚本 ### 有用的脚本
We've included a number of npm scripts in our suggested `package.json` to handle common development tasks: We've included a number of npm scripts in our suggested `package.json` to handle common development tasks:
我们在建议的`package.json`中包括了几个npm脚本来处理常见的开发任务
我们在建议的`package.json`中内置了几个npm脚本来处理常见的开发任务
+makeJson('quickstart/ts/package.1.json',{paths: 'scripts'}, 'package.json (脚本)')(format=".") +makeJson('quickstart/ts/package.1.json',{paths: 'scripts'}, 'package.json (脚本)')(format=".")
:marked :marked
We execute most npm scripts in the following way: `npm run` + *script-name*. We execute most npm scripts in the following way: `npm run` + *script-name*.
Some commands (such as `start` don't require the `run` keyword). Some commands (such as `start` don't require the `run` keyword).
我们可以通过运行`npm run` + *script-name* 的形式执行大多数npm脚本。 我们可以通过运行`npm run` + *脚本名* 的形式执行大多数npm脚本。
有些命令(如`start`)不需要`run`关键字。 有些命令(如`start`)不需要`run`关键字。
Here's what these scripts do: Here's what these scripts do:
@ -187,7 +192,7 @@ a(id="package-json")
* `npm start` - run the compiler and a server at the same time, both in "watch mode" * `npm start` - run the compiler and a server at the same time, both in "watch mode"
* `npm start` - 同时运行编译器和一个服务器,并且开启"监听模式" * `npm start` - 同时运行编译器和一个服务器,并且开启"监听模式"
* `npm run tsc` - run the TypeScript compiler once * `npm run tsc` - run the TypeScript compiler once
@ -196,8 +201,8 @@ a(id="package-json")
* `npm run tsc:w` - run the TypeScript compiler in watch mode; * `npm run tsc:w` - run the TypeScript compiler in watch mode;
the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them. the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them.
* `npm run tsc:w` - 运行TypeScript编译器在监听模式 * `npm run tsc:w` - 在监听模式运行TypeScript编译器
进程持续运行等待TypeScript文件发生变化一旦变化就重新编译它。 进程持续运行,等待TypeScript文件发生变化一旦变化就重新编译它。
* `npm run lite` - run the <a href="https://www.npmjs.com/package/lite-server" target="_blank">lite-server</a>, * `npm run lite` - run the <a href="https://www.npmjs.com/package/lite-server" target="_blank">lite-server</a>,
a light-weight, static file server, written and maintained by a light-weight, static file server, written and maintained by
@ -207,7 +212,7 @@ a(id="package-json")
* `npm run lite` - 运行 <a href="https://www.npmjs.com/package/lite-server" target="_blank">轻量级服务器</a>, * `npm run lite` - 运行 <a href="https://www.npmjs.com/package/lite-server" target="_blank">轻量级服务器</a>,
一个轻量级的静态文件服务器,由 一个轻量级的静态文件服务器,由
<a href="http://johnpapa.net/" target="_blank">John Papa</a> <a href="http://johnpapa.net/" target="_blank">John Papa</a>
编写和维护,对使用了路由的Angular应用提供了很好的支持。 编写和维护,为用到路由的Angular应用提供了卓越支持。
* `npm run typings` - runs the [*typings* tool](#typings) * `npm run typings` - runs the [*typings* tool](#typings)
@ -216,11 +221,12 @@ a(id="package-json")
* `npm postinstall` - called by *npm* automatically *after* it successfully completes package installation. * `npm postinstall` - called by *npm* automatically *after* it successfully completes package installation.
This script installs the [TypeScript definition files](#typings) this app requires. This script installs the [TypeScript definition files](#typings) this app requires.
* `npm postinstall` - 由 *npm* 在成功安装了依赖包 *之后* 自动调用。 * `npm postinstall` - 由 *npm* 在依赖包安装成功 *之后* 自动调用。
这个脚本安装本应用所需的[TypeScript定义文件](#typings) 这个脚本安装本应用所需的[TypeScript定义文件](#typings)
:marked :marked
**Install these packages** by entering the following *npm* command in a terminal window (command window in Windows): **Install these packages** by entering the following *npm* command in a terminal window (command window in Windows):
通过在终端窗口Windows下是command窗口中输入下列 *npm* 命令来 **安装这些依赖包** 通过在终端窗口Windows下是command窗口中输入下列 *npm* 命令来 **安装这些依赖包**
code-example(format=""). code-example(format="").
npm install npm install
@ -231,7 +237,7 @@ code-example(format="").
The install typically recovers from these errors and finishes successfully. The install typically recovers from these errors and finishes successfully.
在 **安装过程中** ,可能出现可怕的<span style="color:red; font-weight: bold">红色错误信息</span>。 在 **安装过程中** ,可能出现可怕的<span style="color:red; font-weight: bold">红色错误信息</span>。
不用担心,安装过程通常能从这些错误中自行恢复,并最终成功。 担心,安装过程通常能从这些错误中自行恢复,并最终成功。
.l-verbose-section(class="l-verbose-inherit") .l-verbose-section(class="l-verbose-inherit")
:marked :marked
#### npm errors and warnings #### npm errors and warnings
@ -241,7 +247,7 @@ code-example(format="").
There might be a few `npm WARN` messages along the way &mdash; and that is perfectly fine. There might be a few `npm WARN` messages along the way &mdash; and that is perfectly fine.
如果在 **npm install** 的 *末尾* 没有以`npm ERR!`开头的控制台信息,就说明没问题。 如果在 **npm install** 的 *末尾* 没有以`npm ERR!`开头的控制台信息,就说明没问题。
还可能有一些类似的`npm WARN`开头的信息 &mdash; 这也没问题。 还可能有一些类似的`npm WARN`开头的信息 —— 这也没问题。
We often see an `npm WARN` message after a series of `gyp ERR!` messages. We often see an `npm WARN` message after a series of `gyp ERR!` messages.
Ignore them. A package may try to re-compile itself using `node-gyp`. Ignore them. A package may try to re-compile itself using `node-gyp`.
@ -269,7 +275,7 @@ a(id="component")
## 我们的第一个Angular组件 ## 我们的第一个Angular组件
Let's create a folder to hold our application and add a super-simple Angular component. Let's create a folder to hold our application and add a super-simple Angular component.
让我们创建一个目录来存放我们的应用程序并且添加一个超级简单的Angular组件。 我们来创建一个文件夹来存放应用程序并且添加一个超级简单的Angular组件。
**Create an *app* sub-folder** off the root directory and make it the current directory **Create an *app* sub-folder** off the root directory and make it the current directory
@ -293,17 +299,17 @@ a(id="app-component")
Every Angular app has at least one root component, conventionally named `AppComponent`, Every Angular app has at least one root component, conventionally named `AppComponent`,
that hosts the client user experience. that hosts the client user experience.
每个Angular应用都有至少一个根组件按照规约命名为`AppComponent`用于作为用户界面的宿主。 每个Angular应用都有至少一个根组件按照规约命名为`AppComponent`,作为用户界面的宿主。
Components are the basic building blocks of Angular applications. Components are the basic building blocks of Angular applications.
A component controls a portion of the screen &mdash; a *view* &mdash; through its associated template. A component controls a portion of the screen &mdash; a *view* &mdash; through its associated template.
组件是Angular程序最基本的构造块儿。组件通过它所关联的模板控制屏幕的一部分 &mdash; 这就是 *视图* 。 组件是Angular应用程序最基本的构造块儿。组件通过它所关联的模板,控制屏幕的一部分 —— 这就是 *视图* 。
This QuickStart has only one, extremely simple component. This QuickStart has only one, extremely simple component.
But it has the essential structure of every component we'll ever write: But it has the essential structure of every component we'll ever write:
这个QuickStart只有一个非常简单的组件它具备我们以后要写的组件的基本结构。 这个QuickStart只有一个非常简单的组件麻雀虽小,五脏俱全 —— 它具备了我们将来写的组件的基本结构。
* One or more <a href="javascript: why('component-import')">import</a> * One or more <a href="javascript: why('component-import')">import</a>
statements to reference the things we need. statements to reference the things we need.
@ -322,13 +328,14 @@ a(id="app-component")
* 一个<a href="javascript: why('class')">component类</a> * 一个<a href="javascript: why('class')">component类</a>
来通过它的模板控制一个视图的外观和行为。 来通过它的模板控制一个视图的外观和行为。
a(id="component-import") a(id="component-import")
:marked :marked
### Import ### Import
### 导入Import
Angular apps are modular. They consist of many files each dedicated to a purpose. Angular apps are modular. They consist of many files each dedicated to a purpose.
Angular应用都是模块化的。它们由很多职责明确的文件组成。 Angular应用都是模块化的。它们由很多职责明确的文件组成。
Angular itself is modular. It is a collection of library modules Angular itself is modular. It is a collection of library modules
each made up of several, related features that we'll use to build our application. each made up of several, related features that we'll use to build our application.
@ -340,7 +347,7 @@ a(id="component-import")
`@angular/core` because we need it to define our component. `@angular/core` because we need it to define our component.
当我们需要一个模块中的某些东西时我们引入import它。 当我们需要一个模块中的某些东西时我们引入import它。
在这里,我们从`@angular/core`中引入了`Component`装饰器,我们需要它来定义我们的组件。 在这里,我们从`@angular/core`中引入了`Component`装饰器Decorator,我们需要它来定义我们的组件。
+makeExample('quickstart/ts/app/app.component.ts', 'import', 'app/app.component.ts (导入)')(format=".") +makeExample('quickstart/ts/app/app.component.ts', 'import', 'app/app.component.ts (导入)')(format=".")
@ -352,24 +359,24 @@ a(id="component-import")
`Component` is a **decorator** function that takes a *metadata* object. `Component` is a **decorator** function that takes a *metadata* object.
The metadata tell Angular how to create and use this component. The metadata tell Angular how to create and use this component.
`Component`是一个 **装饰器** 函数,它用来获得一个 *metadata* 对象。 `Component`是一个 **装饰器** 函数,它用来获得一个 *元数据Metadata* 对象。
`metadata`会告诉Angular如何创建和使用这个组件。 `元数据`会告诉Angular如何创建和使用这个组件。
We apply this function to the component class We apply this function to the component class
by prefixing the function with the **@** symbol and invoking it with the metadata object by prefixing the function with the **@** symbol and invoking it with the metadata object
just above the class: just above the class:
我们通过给这个组件类加上 **@Component** 前缀,并且传入metadata对象来使用它。 我们通过给这个组件类加上 **@Component** 前缀,并且传入元数据对象来使用它。
+makeExample('quickstart/ts/app/app.component.ts', 'metadata', 'app/app.component.ts (元数据)')(format=".") +makeExample('quickstart/ts/app/app.component.ts', 'metadata', 'app/app.component.ts (元数据)')(format=".")
:marked :marked
This particular metadata object has two fields, a `selector` and a `template`. This particular metadata object has two fields, a `selector` and a `template`.
里的metadata对象具有两个字段:`selector`和`template`。 个特别的元数据对象有两个字段:`selector`和`template`。
The **selector** specifies a simple CSS selector for an HTML element that represents the component. The **selector** specifies a simple CSS selector for an HTML element that represents the component.
**selector**字段指定一个简单的CSS选择器用于指定放置此组件的HTML元素。 **selector**字段指定了一个简单的CSS选择器用于指出放置此组件的HTML元素。
>The element for this component is named `my-app`. >The element for this component is named `my-app`.
Angular creates and displays an instance of our `AppComponent` Angular creates and displays an instance of our `AppComponent`
@ -379,8 +386,11 @@ a(id="component-import")
Angular创建和显示`AppComponent`组件的一个实例。 Angular创建和显示`AppComponent`组件的一个实例。
然后把它放在宿主页面的一个`my-app`元素中。 然后把它放在宿主页面的一个`my-app`元素中。
**template**用于指定组件的模板。 The **template** specifies the component's companion template,
它使用一种增强的HTML格式写成用来告诉Angular如何渲染此组件的视图。 written in an enhanced form of HTML that tells Angular how to render this component's view.
**template**字段指定了此组件的模板。
它用一种增强的HTML格式写成用来告诉Angular如何渲染此组件的视图。
>Our template is a single line of HTML announcing "*My First Angular App*". >Our template is a single line of HTML announcing "*My First Angular App*".
@ -391,8 +401,8 @@ a(id="component-import")
These templates might identify yet other components. These templates might identify yet other components.
In this way an Angular application becomes a tree of components. In this way an Angular application becomes a tree of components.
>更高级的模板可能包含到组件属性的数据绑定。还可能包含其它应用组件,这些组件还可以有自己的模板。 >更高级的模板还可以包含到组件属性的数据绑定。还可以包含其它组件,这些组件还可以有自己的模板。
这些模板中还可以进一步包含其它组件。从这种意义上讲,Angular应用就是一棵组件树。 这些模板中还可以进一步包含其它组件。从这个意义上讲,一个Angular应用就是一棵组件树。
a(id="component-class") a(id="component-class")
:marked :marked
@ -408,12 +418,12 @@ a(id="component-import")
Our `AppComponent` class is empty because we don't need it to do anything in this QuickStart. Our `AppComponent` class is empty because we don't need it to do anything in this QuickStart.
当我们打算构建一个真实的应用时,可以通过添加属性和应用逻辑来扩展这个类。 当我们打算构建一个真实的应用时,可以通过添加属性和应用逻辑来扩展这个类。
但我们不需要在这个QuickStart中做这些事,所以这里的`AppComponent`类是空的。 但我们不需要在这个QuickStart中做这些事所以这里的`AppComponent`类是空的。
We **export** `AppComponent` so that we can **import** it elsewhere in our application, We **export** `AppComponent` so that we can **import** it elsewhere in our application,
as we'll see when we create `main.ts`. as we'll see when we create `main.ts`.
我们 **导出** `AppComponent`,以便我们可以在应用的其它地方 **导入** 它 —— 比如我们创建`main.ts`时。 我们**导出**`AppComponent`,以便我们可以在应用的其它地方**导入**它 —— 比如我们创建`main.ts`时。
a(id="main") a(id="main")
.l-main-section .l-main-section
:marked :marked
@ -421,7 +431,7 @@ a(id="main")
## 通过 *main.ts* 显示它 ## 通过 *main.ts* 显示它
Now we need something to tell Angular to load the root component Now we need something to tell Angular to load the root component
现在我们还需要做点什么来让Angular加载这个根组件root component 现在我们还需要做点什么来让Angular加载这个根组件
Add a new file , `main.ts`, to the `app/` folder as follows: Add a new file , `main.ts`, to the `app/` folder as follows:
@ -432,12 +442,12 @@ a(id="main")
:marked :marked
We import the two things we need to launch the application: We import the two things we need to launch the application:
我们引入了两个类来启动这个应用: 我们引入了两样东西来启动本应用:
1. Angular's browser `bootstrap` function 1. Angular's browser `bootstrap` function
1. Angular的浏览器`bootstrap`启动)函数 1. Angular的浏览器`bootstrap`引导)函数
1. The application root component, `AppComponent`. 1. The application root component, `AppComponent`.
1. 应用的根组件:`AppComponent` 1. 应用的根组件:`AppComponent`
Then we call `bootstrap` with `AppComponent`. Then we call `bootstrap` with `AppComponent`.
@ -448,13 +458,13 @@ a(id="main")
Notice that we import the `bootstrap` function from `@angular/platform-browser-dynamic`, Notice that we import the `bootstrap` function from `@angular/platform-browser-dynamic`,
not `@angular/core`. not `@angular/core`.
注意,我们是从`@angular/platform-browser-dynamic`中引入的`bootstrap`函数,而不是`@angular2/core`中。 注意,我们是从`@angular/platform-browser-dynamic`中引入的`bootstrap`函数,而不是`@angular2/core`中。
Bootstrapping isn't core because there isn't a single way to bootstrap the app. Bootstrapping isn't core because there isn't a single way to bootstrap the app.
True, most applications that run in a browser call the bootstrap function from True, most applications that run in a browser call the bootstrap function from
this library. this library.
启动”不是核心的一部分,是因为没有单一的途径来启动应用。诚然,大部分应用都是在浏览器中调用`bootstrap`函数的。 引导”不是核心的一部分,因为没有单一的途径来启动应用。诚然,大部分应用都是在浏览器中调用`bootstrap`函数的。
But it is possible to load a component in a different environment. But it is possible to load a component in a different environment.
We might load it on a mobile device with [Apache Cordova](https://cordova.apache.org/) or [NativeScript](https://www.nativescript.org/). We might load it on a mobile device with [Apache Cordova](https://cordova.apache.org/) or [NativeScript](https://www.nativescript.org/).
@ -462,9 +472,10 @@ a(id="main")
to improve launch performance or facilitate to improve launch performance or facilitate
[SEO](http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf). [SEO](http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf).
但从其它环境中加载组件仍然是可能的。 但从其它环境中加载组件是可能的。
我们可能通过[Apache Cordova](https://cordova.apache.org/) 或 [NativeScript](https://www.nativescript.org/) 在移动设备中加载它。 我们可能通过[Apache Cordova](https://cordova.apache.org/) 或 [NativeScript](https://www.nativescript.org/) 在移动设备中加载它。
我们可能希望在服务器中渲染我们的第一个页面来提高启动效率或让[SEO](http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf)更加容易。 我们可能希望在服务器中渲染我们的第一个页面来提高启动效率或
让[SEO](http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf)更加容易。
These targets require a different kind of bootstrap function that we'd import from a different library. These targets require a different kind of bootstrap function that we'd import from a different library.
@ -477,7 +488,7 @@ a(id="main")
We could have folded its few lines into the `app.component` file We could have folded its few lines into the `app.component` file
and spared ourselves some complexity. and spared ourselves some complexity.
*main.ts* 文件非常小。它只是一个`QuickStart`。它没几行代码,我们可以把它装进`app.component`文件来减少不必要的复杂度。 *main.ts* 文件非常小。它只是一个`QuickStart`,没几行代码。我们本可以把它装进`app.component`文件来减少不必要的复杂度。
We'd rather demonstrate the proper way to structure an Angular application. We'd rather demonstrate the proper way to structure an Angular application.
App bootstrapping is a separate concern from presenting a view. App bootstrapping is a separate concern from presenting a view.
@ -486,10 +497,10 @@ a(id="main")
Testing the component is much easier if it doesn't also try to run the entire application. Testing the component is much easier if it doesn't also try to run the entire application.
Let's make the small extra effort to do it *the right way*. Let's make the small extra effort to do it *the right way*.
我们应该用正确的方式组织Angular应用的文件结构。 我们应该用正确的方式组织Angular应用的文件结构。
启动App与展现视图是两个相互分离的关注点。 启动App与展现视图是两个相互分离的关注点。
把这些关注点混在一起会增加不必要的难度。 把这些关注点混在一起会增加不必要的难度。
我们可以通过使用不同的启动bootstraper来在不同的环境中启动`AppComponent`。 我们可以通过使用不同的引导bootstraper来在不同的环境中启动`AppComponent`。
测试组件也变得更容易,因为不需要再运行整个程序才能跑测试。 测试组件也变得更容易,因为不需要再运行整个程序才能跑测试。
让我们多花一点精力来用*“正确的方式”*实现它。 让我们多花一点精力来用*“正确的方式”*实现它。
@ -500,25 +511,25 @@ a(id="index")
## 添加`index.html` ## 添加`index.html`
The `index.html` is the web page that hosts the application The `index.html` is the web page that hosts the application
`index.html`是此应用中的宿主页面。 `index.html`是存放本应用的宿主页面。
Navigate to the **project root folder**. Navigate to the **project root folder**.
浏览 **项目根目录** 切换到 **项目根目录**。
code-example(format=""). code-example(format="").
cd .. cd ..
:marked :marked
Create an`index.html` file in this root folder and paste the following lines: Create an`index.html` file in this root folder and paste the following lines:
在根目录下创建`index.html`文件并粘贴下列代码 在根目录下创建`index.html`文件并粘贴下列代码:
+makeExample('quickstart/ts/index.html', null, 'index.html')(format=".") +makeExample('quickstart/ts/index.html', null, 'index.html')(format=".")
.l-verbose-section .l-verbose-section
:marked :marked
There are three noteworthy sections of HTML There are three noteworthy sections of HTML
HTML中有三点值得注意 HTML中有三点值得注意
1. The JavaScript [libraries](#libraries) 1. The JavaScript [libraries](#libraries)
@ -531,7 +542,7 @@ code-example(format="").
3. The [&lt;my-app>](#my-app) tag in the `<body>` which is *where our app lives!* 3. The [&lt;my-app>](#my-app) tag in the `<body>` which is *where our app lives!*
3. `<body>`中的[&lt;my-app>](#my-app)标记是*我们的应用“生活”的地方。* 3. `<body>`中的[&lt;my-app>](#my-app)标签是*供我们的应用“生活”的地方。*
a(id="libraries") a(id="libraries")
:marked :marked
@ -550,7 +561,7 @@ code-example(format="").
should run in Internet Explorer. //TODO es6-shim are not IE polyfills or they are? should run in Internet Explorer. //TODO es6-shim are not IE polyfills or they are?
一开始我们先进行IE的polyfill译注指填充用js来弥补浏览器原本不具备的能力 一开始我们先进行IE的polyfill译注指填充用js来弥补浏览器原本不具备的能力
IE需要填充才能正确运行依赖ES2015 promise译注ES2015的新特性用于支持异步代码和动态模块加载特性的应用程序。 IE需要填充才能正确运行依赖ES2015 Promise译注ES2015的新特性用于支持异步代码和动态模块加载特性的应用程序。
大多数应用还是得运行在IE中所以我们需要这些能力。 大多数应用还是得运行在IE中所以我们需要这些能力。
Next are the polyfills for Angular2, `zone.js` and `reflect-metadata`. Next are the polyfills for Angular2, `zone.js` and `reflect-metadata`.
@ -567,15 +578,15 @@ code-example(format="").
when working with observables. when working with observables.
We added the library here in QuickStart so we don't forget later.//TODO this subsection needs to be moved for when we cover the systemjs.config.js We added the library here in QuickStart so we don't forget later.//TODO this subsection needs to be moved for when we cover the systemjs.config.js
我们的QuickStart不会用到响应式扩展但是大量的应用需要它们来提供observable译注响应式编程的核心特性指监听数据的变更以便做出响应特性。 我们的QuickStart不会用到响应式扩展但是大量的应用需要它们来提供Observable译注响应式编程的核心特性指监听数据的变更以便做出响应特性。
我们把它加到QuickStart中以免将来忘了。//TODO this subsection needs to be moved for when we cover the systemjs.config.js 我们把它加到QuickStart中以免将来忘了。//TODO 当我们覆盖到systemjs.config.js时我们得把这些内容移过去。
:marked :marked
We'll make different choices as we gain experience and We'll make different choices as we gain experience and
become more concerned about production qualities such as become more concerned about production qualities such as
load times and memory footprint. load times and memory footprint.
一旦我们更有经验、对产品质量更加关注(如加载时间、内存脚印等),我们也可以做出不同的选择 如果我们变得更有经验、更关心产品质量(如加载时间、内存足迹等),将来也可以做出不同的选择。
a(id="systemjs") a(id="systemjs")
:marked :marked
@ -588,9 +599,9 @@ code-example(format="").
<a href="https://webpack.github.io/" target="_blank">webpack</a>. <a href="https://webpack.github.io/" target="_blank">webpack</a>.
SystemJS happens to be a good choice but we want to be clear that it was a choice and not a preference. SystemJS happens to be a good choice but we want to be clear that it was a choice and not a preference.
这个QuickStart使用<a href="https://github.com/systemjs/systemjs" target="_blank">SystemJS</a>来加载应用和库模块。 QuickStart使用<a href="https://github.com/systemjs/systemjs" target="_blank">SystemJS</a>来加载应用和库模块。
还有一些其它候选者也能很好地工作,比如备受推崇的<a href="https://webpack.github.io/" target="_blank">webpack</a>。 还有一些其它候选者也能很好地工作,比如备受推崇的<a href="https://webpack.github.io/" target="_blank">webpack</a>。
SystemJS是一个好的选择但要清楚它是我们给你的是一个“选择”,而不是“推荐”。 SystemJS是一个好的选择但要清楚是我们给你的“选择之一”,而不是“推荐”。
All module loaders require configuration and all loader configuration All module loaders require configuration and all loader configuration
becomes complicated rather quickly as soon as the file structure diversifies and becomes complicated rather quickly as soon as the file structure diversifies and
@ -603,7 +614,7 @@ code-example(format="").
<a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">here</a>. <a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">here</a>.
我们建议你要精通你所选的loader。 我们建议你要精通你所选的loader。
学习如何配置SystemJS的更多知识<a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">这里</a>。 学习如何配置SystemJS的更多知识<a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">这里</a>。
With those cautions in mind, what are we doing in this QuickStart configuration? With those cautions in mind, what are we doing in this QuickStart configuration?
@ -636,8 +647,8 @@ code-example(format="").
In the live example on plunker we transpile (AKA compile) to JavaScript in the browser In the live example on plunker we transpile (AKA compile) to JavaScript in the browser
on the fly. That's fine for a demo. That's not our preference for development or production. on the fly. That's fine for a demo. That's not our preference for development or production.
在plunker上的在线例子live example我们在浏览器中随时转译也可以叫编译到JavaScript。对于范例来说,这足够了。 在plunker上的在线例子中我们在浏览器中随时转译也可以叫编译到JavaScript。对于演示来说,这足够了。
但这并不是用在开发环境或产品环境的推荐方式。 但这并不是用在开发环境或产品环境的推荐方式。
We recommend transpiling (AKA compiling) to JavaScript during a build phase We recommend transpiling (AKA compiling) to JavaScript during a build phase
before running the application for several reasons including: before running the application for several reasons including:
@ -646,7 +657,7 @@ code-example(format="").
* We see compiler warnings and errors that are hidden from us in the browser. * We see compiler warnings and errors that are hidden from us in the browser.
* 我们可以看到编译器的警告和错误,但浏览器中看不到 * 我们可以看到编译器的警告和错误,但浏览器中不行
* Pre-compilation simpifies the module loading process and * Pre-compilation simpifies the module loading process and
it's much easier to diagnose problems when this is a separate, external step. it's much easier to diagnose problems when this is a separate, external step.
@ -660,11 +671,11 @@ code-example(format="").
* We iterate development faster because we only re-compile changed files. * We iterate development faster because we only re-compile changed files.
We notice the difference as soon as the app grows beyond a handful of files. We notice the difference as soon as the app grows beyond a handful of files.
* 我们的迭代开发会更快,因为我们只需要重新编译那些有变化的文件。当应用程序快速膨胀成一大堆文件时,你会体到这些差异。 * 我们的迭代开发会更快,因为我们只需要重新编译那些有变化的文件。当应用程序快速膨胀成一大堆文件时,你会体到这些差异。
* Pre-compilation fits into a continuous integration process of build, test, deploy. * Pre-compilation fits into a continuous integration process of build, test, deploy.
* 预编译更适应CI持续集成过程编译、测试、部署。 * 预编译更适应CI持续集成过程构建、测试、部署。
:marked :marked
The `System.import` call tells SystemJS to import the `main` file The `System.import` call tells SystemJS to import the `main` file
@ -679,7 +690,7 @@ code-example(format="").
All other modules are loaded upon request All other modules are loaded upon request
either by an import statement or by Angular itself. either by an import statement or by Angular itself.
在接下来的请求中,所有其它模块都会被加载不管是被import语句还是Angular自身。 在接下来的请求中,所有其它模块都会被加载 —— 不管是被import语句还是Angular自身。
a(id="my-app") a(id="my-app")
:marked :marked
@ -688,7 +699,7 @@ code-example(format="").
metadata, finds the `my-app` selector, locates an element tag named `my-app`, metadata, finds the `my-app` selector, locates an element tag named `my-app`,
and loads our application between those tags. and loads our application between those tags.
当Angular在`main.ts`中调用`bootstrap`函数时,它读取`AppComponent`的元数据metadata,发现选择器是`my-app`,于是它定位到一个元素名是`my-app`的DOM元素并且把我们的应用加载到这个标记中。 当Angular在`main.ts`中调用`bootstrap`函数时,它读取`AppComponent`的元数据,发现选择器是`my-app`,于是它定位到一个元素名为`my-app`的DOM元素并且把我们的应用加载到这个标签中。
.l-main-section .l-main-section
:marked :marked
## Add some style ## Add some style
@ -700,7 +711,7 @@ code-example(format="").
Create a `styles.css` in the root folder and start styling, perhaps with this set: Create a `styles.css` in the root folder and start styling, perhaps with this set:
在根目录下创建一个`styles.css`文件来加上样式,这个文件也许是这样的: 在根目录下创建一个`styles.css`文件来加上样式,这个文件可能是这样的:
+makeExample('quickstart/ts/styles.1.css', null, 'styles.css (摘录)')(format=".") +makeExample('quickstart/ts/styles.1.css', null, 'styles.css (摘录)')(format=".")
@ -710,6 +721,7 @@ code-example(format="").
## 编译和运行 ## 编译和运行
Open a terminal window and enter this command: Open a terminal window and enter this command:
打开terminal终端窗口并且敲如下命令 打开terminal终端窗口并且敲如下命令
code-example(format=""). code-example(format="").
npm start npm start
@ -727,7 +739,7 @@ code-example(format="").
In a few moments, a browser tab should open and display In a few moments, a browser tab should open and display
稍后,一个浏览器页标签就会打开并显示出来。 稍后,一个浏览器页标签就会打开并显示出来。
figure.image-display figure.image-display
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="QuickStart应用的输出") img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="QuickStart应用的输出")
@ -742,7 +754,7 @@ figure.image-display
Try changing the message to "My SECOND Angular 2 app". Try changing the message to "My SECOND Angular 2 app".
试着把消息改成“我的第二个Angular2应用”。 试着把消息内容改成“我的第二个Angular2应用”。
The TypeScript compiler and `lite-server` are watching. The TypeScript compiler and `lite-server` are watching.
They should detect the change, recompile the TypeScript into JavaScript, They should detect the change, recompile the TypeScript into JavaScript,
@ -817,13 +829,13 @@ figure.image-display
## 完工! ## 完工!
Our first application doesn't do much. It's basically "Hello, World" for Angular 2. Our first application doesn't do much. It's basically "Hello, World" for Angular 2.
我们的第一个应用没做什么它只是Angular 2的“Hello, World” 我们的第一个应用没做什么它只是Angular 2的“Hello, World”
We kept it simple in our first pass: we wrote a little Angular component, We kept it simple in our first pass: we wrote a little Angular component,
we added some JavaScript libraries to `index.html`, and launched with a we added some JavaScript libraries to `index.html`, and launched with a
static file server. That's about all we'd expect to do for a "Hello, World" app. static file server. That's about all we'd expect to do for a "Hello, World" app.
我们让自己的Angular 2航保持简单我们写一个小的Angular组件添加一些JavaScript库到`index.html`,并且启动一个静态文件服务器。 我们让自己的Angular 2处女航保持简单我们写一个小的Angular组件添加一些JavaScript库到`index.html`,并且启动一个静态文件服务器。
这就是我们想通过“Hello, World”应用去表现的一切。 这就是我们想通过“Hello, World”应用去表现的一切。
**We have greater ambitions.** **We have greater ambitions.**
@ -836,7 +848,7 @@ figure.image-display
好消息是:准备阶段已经结束了。 好消息是:准备阶段已经结束了。
我们将来可能只是修改`package.json`来升级依赖库。 我们将来可能只是修改`package.json`来升级依赖库。
如果我们需要添加一些库或一些css样式表我们可打开`index.html`。 如果需要添加一些库或一些css样式表我们可打开`index.html`。
We're about to take the next step and build a small application that We're about to take the next step and build a small application that
demonstrates the great things we can build with Angular 2. demonstrates the great things we can build with Angular 2.