iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'remotes/angular.io/master' 

# Conflicts:
#	public/docs/ts/latest/quickstart.jade
This commit is contained in:
Zhimin(Rex) YE 2016-06-02 22:29:17 +01:00
parent 1774a1df4e 7570dc53ea
commit ce299be58b
6 changed files with 152 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
public/_includes/_util-fns.jade
View File

@ -54,10 +54,10 @@ mixin ifDocsFor(langPattern)
block
//- Use to map inlined (prose) TS paths into, say, Dart paths via the
//- adjustExamplePath transformer function.
//- adjustTsExamplePathForDart transformer function.
mixin adjExPath(path)
if adjustExamplePath
| #{adjustExamplePath(path)}
if adjustTsExamplePathForDart
| #{adjustTsExamplePathForDart(path)}
else
| #{path}
@ -66,8 +66,9 @@ mixin includeShared(filePath, region)
!=partial(newPath)
mixin makeExample(_filePath, region, _title, stylePatterns)
- var filePath = adjustExamplePath ? adjustExamplePath(_filePath) : _filePath;
- var title = adjustExampleTitle ? adjustExampleTitle(_title) : _title;
- var adjustments = adjustExamplePathAndTitle({filePath:_filePath, title:_title});
- var filePath = adjustments.filePath;
- var title = adjustments.title;
- var language = attributes.language || getExtn(filePath);
- var frag = getFrag(filePath, region);
- var defaultFormat = frag.split('\n').length > 2 ? "linenums" : "";
@ -83,35 +84,21 @@ mixin makeExample(_filePath, region, _title, stylePatterns)
code-example(language="#{language}" format="#{format}")
!= styleString(frag, stylePatterns)
//- Like makeExample, but the first argument is a path that is
//- relative to the project root. Unless title is defined,
//- the project relative path will be used.
mixin makeProjExample(projRootRelativePath, region, title, stylePatterns)
- var relPath = projRootRelativePath.trim();
- var filePath = getExampleName() + '/ts/' + relPath;
- if (!title) {
- // Is path like styles.1.css? Then drop the '.1' qualifier:
- var matches = relPath.match(/^(.*)\.\d(\.\w+)$/);
- title = matches ? matches[1] + matches[2] : relPath;
- }
+makeExample(filePath, region, title, stylePatterns)
//- Like makeExample, but doesn't show line numbers, and the first
//- argument is a path that is relative to the example project root.
//- Unless title is defined, the project relative path will be used.
//- Title will always end with a phrase in parentheses; if no such
//- ending is given, then the title will be suffixed with
//- either "(excerpt)", or "(#{region})" when region is defined.
mixin makeExcerpt(projRootRelativePath, region, title, stylePatterns)
- var relPath = projRootRelativePath.trim();
- var filePath = getExampleName() + '/ts/' + relPath;
- if (!title) {
- // Is path like styles.1.css? Then drop the '.1' qualifier:
- var matches = relPath.match(/^(.*)\.\d(\.\w+)$/);
- title = matches ? matches[1] + matches[2] : relPath;
- }
- var excerpt = region || 'excerpt';
- if (title && !title.match(/\([\w ]+\)$/)) title = title + ' (' + excerpt + ')';
//- Like makeExample, but: (1) doesn't show line numbers. (2) If region
//- is omitted and title is 'foo (r)' then region is taken as 'r'.
//- (3) Title will always end with a phrase in parentheses; if no such
//- ending is given or is just (), then the title will be suffixed with
//- either "(excerpt)", or "(#{_region})" when _region is defined.
mixin makeExcerpt(_filePath, _region, _title, stylePatterns)
- var matches = _filePath.match(/(.*)\s+\(([\w ]*)\)$/);
- var parenText;
- if (matches) { _filePath = matches[1]; parenText = matches[2]; }
- var adjustments = adjustExamplePathAndTitle({filePath:_filePath, title:_title});
- var filePath = adjustments.filePath;
- var title = adjustments.title;
- var region = _region || parenText;
- var excerpt = !region || parenText === '' ? 'excerpt' : region;
- if (title) title = title + ' (' + excerpt + ')';
+makeExample(filePath, region, title, stylePatterns)(format='.')
//- Extract the doc example name from `current`.
@ -122,10 +109,10 @@ mixin makeExcerpt(projRootRelativePath, region, title, stylePatterns)
mixin makeTabs(filePaths, regions, tabNames, stylePatterns)
- filePaths = strSplit(filePaths);
- if (adjustExamplePath) filePaths = filePaths.map(adjustExamplePath);
- if (adjustTsExamplePathForDart) filePaths = filePaths.map(adjustTsExamplePathForDart);
- regions = strSplit(regions, filePaths.length);
- tabNames = strSplit(tabNames, filePaths.length);
- if (adjustExampleTitle) tabNames = tabNames.map(adjustExampleTitle);
- if (adjustTsExampleTitleForDart) tabNames = tabNames.map(adjustTsExampleTitleForDart);
code-tabs
each filePath,index in filePaths
@ -217,6 +204,43 @@ script.
return CCSstyle[style] = value
}
//---------------------------------------------------------------------------------------------------------
//- Converts the given project-relative path (like 'app/main.ts')
//- to a doc folder relative path (like 'quickstart/ts/app/main.ts')
//- by prefixing it with '<example-name>/ts/'. If title is not given,
//- then the project-relative path is used, adjusted to remove numeric
//- file version qualifiers; e.g. 'styles.1.css' becomes 'styles.css'.
- var adjExampleProjPathAndTitle = function(ex/*:{filePath,title}*/) {
- // E.g. of a project relative path is 'app/main.ts'
- if (ex.title === null || ex.title === undefined) {
- // Title is not given so take it to be ex.filePath.
- // Is title like styles.1.css? Then drop the '.1' qualifier:
- var matches = ex.filePath.match(/^(.*)\.\d(\.\w+)$/);
- ex.title = matches ? matches[1] + matches[2] : ex.filePath;
- }
- ex.filePath = getExampleName() + '/' + _docsFor + '/' + ex.filePath;
- return ex;
- };
//- If the given path is project relative, then first convert it using
//- adjExampleProjPathAndTitle(ex). Then the path is adjusted to match
//- the documentation language.
- var adjustExamplePathAndTitle = function(ex/*:{filePath,title}*/) {
- // Not a doc folder relative path? Assume that it is app project relative.
- if(isProjRelDir(ex.filePath)) adjExampleProjPathAndTitle(ex);
- // Adjust doc folder relative paths if adjustment functions exist.
- if(adjustTsExamplePathForDart) ex.filePath = adjustTsExamplePathForDart(ex.filePath);
- if(adjustTsExampleTitleForDart) ex.title = adjustTsExampleTitleForDart(ex.title);
- return ex;
- };
//- Returns truthy iff path is example project relative.
- var isProjRelDir = function(path) {
- return !path.match(/\/(js|ts|dart)(-snippets)?\//) && !path.endsWith('e2e-spec.js');
- // Last conjunct handles case for shared project e2e test file like
- // cb-component-communication/e2e-spec.js (is shared between ts & dart)
- // TODO: generalize: compare start with getExampleName(); which needs to be fixed.
- };
- var translatePath = function(filePath, region) {
- filePath = filePath.trim();
- var regionPad = (region && region.length) ? '-' + region.toString() : '';

8
public/docs/dart/latest/_util-fns.jade
View File

@ -32,7 +32,7 @@ mixin liveExampleLink2(linkText, exampleUrlPartName)
- var href = 'http://github.com/angular-examples/' + ex;
span #[+liveExampleLink(linkText, ex)] (#[a(href='#{href}' target="_blank") #{srcText}])
- var adjustExamplePath = function(_path) {
- var adjustTsExamplePathForDart = function(_path) {
- if(!_path) return _path;
- var path = _path.trim();
- var folder = getFolder(path);
@ -52,15 +52,15 @@ mixin liveExampleLink2(linkText, exampleUrlPartName)
- return (folder ? folder + '/' : '') + baseNameNoExt + (extn ? '.' + extn : '');
- };
- var adjustExampleTitle = function(_title) {
- if(!_title || !adjustExamplePath) return _title;
- var adjustTsExampleTitleForDart = function(_title) {
- if(!_title || !adjustTsExamplePathForDart) return _title;
- var title = _title.trim();
- // Assume title is a path if it ends with an extension like '.foo',
- // optionally followed by some comment in parentheses.
- var matches = title.match(/(.*\.\w+)($|\s*\([\w ]+\)$)/);
- if(matches && matches.length == 3) {
- // e.g. matches == ['abc.ts (excerpt)', 'abc.ts', ' (excerpt)']
- var path = adjustExamplePath(matches[1]);
- var path = adjustTsExamplePathForDart(matches[1]);
- title = path + matches[2];
- }
- return title;

1
public/docs/dart/latest/api/api-list.json
View File

@ -1 +0,0 @@
{}

45
public/docs/dart/latest/api/overview-dump.html
View File

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
max-width: 1000px;
}
h2 {
margin-top: 20px;
margin-bottom: 0;
border-bottom: solid 1px black;
}
h3 {
margin-top: 10px;
margin-bottom: 0;
padding-left: 20px;
}
h4 {
padding-left: 30px;
margin: 0;
}
.not-documented::after {
content: "(not documented)";
font-size: small;
font-style: italic;
color: red;
}
a {
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Module Overview</h1>
</body>
</html>

2
public/docs/dart/latest/guide/server-communication.jade
View File

@ -35,7 +35,7 @@ block http-providers
[ng2dtri]: https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer#resolved_identifiers
- var stylePattern = { pnk: /(resolved_identifiers:|Browser.*)/gm, otl: /(- angular2:)|(transformers:)/g };
+makeExcerpt('pubspec.yaml', 'transformers', 'pubspec.yaml (transformers)', stylePattern)
+makeExcerpt('pubspec.yaml', 'transformers', null, stylePattern)
block getheroes-and-addhero
:marked

173
public/docs/ts/latest/quickstart.jade
View File

@ -11,7 +11,7 @@ block includes
Angular 2 application in #{_Lang}, and
establish a development environment for the remaining documentation samples
that also can be the foundation for real world applications.
这份“快速起步”的目标是基于#{_Lang}构建并运行一个超级简单的Angular应用，
并为文档其余部分的范例代码建立开发环境。
同时，它还可以作为构建真实应用的基础。
@ -72,17 +72,17 @@ block setup-tooling
:marked
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
if they are not already on your machine.
如果你的机器上还没有**[Node.js®和npm](https://nodejs.org/en/download/)**，请安装它们。
.l-sub-section
:marked
**Verify that you are running at least node `v5.x.x` and npm `3.x.x`**
by running `node -v` and `npm -v` in a terminal/console window.
Older versions produce errors.
**在终端窗口运行`node -v`和`npm -v`，来确认你的node版本为`v5.x.x`，npm版本为`3.x.x`**。
老版本会出错。
block download-source
.l-main-section
@ -93,7 +93,7 @@ block download-source
Instead of following each step of these instructions, we can
[download the QuickStart source](https://github.com/angular/quickstart/blob/master/README.md)
from github and follow its brief instructions.
如果不想跟着这里的操作指南来一步步儿做，我们也可以从github[下载“快速起步”的源码](https://github.com/angular/quickstart/blob/master/README.md)，这样只要注意那些操作要点就行了。
.l-main-section
@ -109,18 +109,18 @@ button(class="verbose on md-primary md-button md-ink-ripple", type="button", onc
:marked
*Explanations* describe the concepts and reasons behind the instructions.
Explanations have a thin border on the left like *this* block of text.
*解释*，负责描述概念和操作指南背后的理由。解释在左侧有一个细边框，就像*这块儿文字*。
Click *Hide Explanations* to show only the instructions.
Click *View Explanations* to see everything again.
点击*隐藏解释*按钮把*解释*隐藏掉，点击*显示解释*按钮再把它显示出来。
.l-sub-section
:marked
We'll see many code blocks as we build the QuickStart app. They're all easy to copy and paste:
当我们构建这个“快速起步”应用时，会看到很多代码块儿。它们都很方便拷贝和粘贴：
code-example(format="nocode").
点击右侧的图标，来把代码片段拷贝到剪贴板 ==>
@ -134,7 +134,7 @@ h2#create-and-configure 步骤1：创建并配置项目
:marked
In this step we:
在这一步，我们将：
* [(a) Create the project folder](#create-the-project-folder)
* [(a) 创建项目目录](#create-the-project-folder)
@ -204,7 +204,7 @@ block install-packages
:marked
We install the packages listed in `package.json` using `npm`. Enter the
following command in a terminal window (command window in Windows):
我们使用`npm`命令来安装`package.json`中列出的依赖包。请在终端窗口（或Windows的cmd窗口）中输入下列命令：
code-example(language="sh").
@ -214,7 +214,7 @@ block install-packages
:marked
Scary <span style="color:red; font-weight: bold">error messages in red</span> may appear **during** install.
The install typically recovers from these errors and finishes successfully.
在安装期间，可能会出现恐怖的<span style="color:red; font-weight: bold">红色错误信息</span>。
别担心，安装通常都能从这些错误中自行恢复，并最终成功。
.l-verbose-section(class="l-verbose-inherit")
@ -224,7 +224,7 @@ block install-packages
All is well if there are no console messages starting with `npm ERR!` *at the end* of **npm install**.
There might be a few `npm WARN` messages along the way &mdash; and that is perfectly fine.
只要没在*npm install*的*末尾*出现以`npm ERR!`开头儿的控制台信息，那就没事。
可能会出现一些`npm WARN`消息，这些都不用管。
@ -232,26 +232,26 @@ block install-packages
Ignore them. A package may try to recompile itself using `node-gyp`.
If the recompile fails, the package recovers (typically with a pre-built version)
and everything works.
我们通常会在一系列`gyp ERR!`消息后面看到一个`npm WARN`消息。直接忽略即可。
有些依赖包可能会尝试用`node-gyp`重新编译它自己。
如果重新编译失败了，这个包就会自行恢复（通常是下载一个预编译版本），最终不会影响使用。
Just make sure there are no `npm ERR!` messages at the end of `npm install`.
只要确认在`npm install`输出的末尾没有`npm ERR!`消息就行了。
.l-verbose-section
:marked
#### Adding the libraries and packages we need with *npm*
#### 用*npm*添加我们需要的库和依赖包
Angular application developers rely on the _[npm](https://docs.npmjs.com)_
package manager to install the libraries and packages their apps require.
The Angular team recommends the starter-set of packages specified in the
`dependencies` and `devDependencies` sections.
See the [npm packages](guide/npm-packages.html) chapter for details.
Angular应用开发者依靠_[npm](https://docs.npmjs.com)_包管理器来安装应用所需的库和依赖包。
Angular开发组建议的那组初学者包是通过`dependencies`和`devDependencies`指定的。
要了解详情，参见[npm包](guide/npm-packages.html)一章。
@ -259,41 +259,41 @@ block install-packages
#### Helpful scripts
#### 有用的脚本
We've included a number of npm scripts in our suggested `package.json` to handle common development tasks:
在我们推荐的这个`package.json`中，包含了几个npm脚本，用来处理常用的开发任务：
+makeJson('quickstart/ts/package.1.json',{ paths: 'scripts'}, 'package.json (脚本)')(format=".")
:marked
We execute most npm scripts in the following way: `npm run` followed by a *script-name*.
Some commands (such as `start`) don't require the `run` keyword.
我们执行大多数npm脚本的方式都差不多：`npm run`后面跟着*脚本名*。
有些命令（比如`start`）不需要`run`关键字。
Here's what these scripts do:
这些脚本的用途如下：
* `npm start` - runs the compiler and a server at the same time, both in "watch mode"
* `npm start` - 同时运行编译器和一个服务器，它们都工作在“监视模式”下。
* `npm run tsc` - runs the TypeScript compiler once
* `npm run tsc` - 运行一次TypeScript编译器
* `npm run tsc:w` - runs the TypeScript compiler in watch mode;
the process keeps running, awaiting changes to TypeScript files and recompiling when it sees them
* `npm run tsc:w` - 在“监视模式”下运行TypeScript编译器，进程持续运行，等待TypeScript文件的变化，一旦变化，就重新编译它们。
* `npm run lite` - runs the <a href="https://www.npmjs.com/package/lite-server" target="_blank">lite-server</a>,
a light-weight, static file server with excellent support for Angular apps that use routing
* `npm run lite` - 运行<a href="https://www.npmjs.com/package/lite-server" target="_blank">lite-server</a> —— 一个轻量级、静态的文件服务器，对使用路由的Angular应用提供了优秀的支持。
* `npm run typings` - runs the [*typings* tool](#{_typingsUri}) separately
* `npm run typings` - 单独运行[*typings*工具](#{_typingsUri})
* `npm run postinstall` - called by *npm* automatically *after* it successfully completes package installation.
@ -302,7 +302,7 @@ block install-packages
* `npm run postinstall` - 当*npm*安装完当前包时，它会被自动调用。这里的这个脚本会安装`typings.json`中定义的[TypeScript定义文件](#{_typingsUri})
:marked
**We're all set.** Let's write some code.
**全部设置完了。** 我们来写点代码吧。
.l-main-section
@ -310,11 +310,11 @@ h2#root-component Step 2: Our first Angular component
h2#root-component 步骤2：我们的第一个Angular组件
:marked
Let's create a folder to hold our application and add a super-simple Angular component.
我们来创建一个文件夹，用于保存我们的应用，并且添加一个超级简单的Angular组件。
**Create #{_an} #{_appDir} subfolder** off the project root directory:
在项目的根目录下**创建一个#{_appDir}子目录**：
code-example.
@ -328,7 +328,7 @@ p.
#[b 创建组件文件]
#[code #[+adjExPath('app/app.component.ts')]] (在新建的这个目录中)，内容如下：
+makeProjExample('app/app.component.ts')
+makeExample('app/app.component.ts')
.l-verbose-section
:marked
@ -345,7 +345,7 @@ p.
This QuickStart has only one, extremely simple component.
But it has the essential structure of every component we'll ever write:
这个“快速起步”只有一个非常简单的组件，但麻雀虽小，五脏俱全 —— 它具备了我们将来写的组件的基本结构。
* One or more [import](#component-import)
@ -387,14 +387,14 @@ p.
`Component` is a *decorator function* that takes a *metadata object* as argument.
We apply this function to the component class by prefixing the function with the
**@** symbol and invoking it with a metadata object, just above the class.
`Component`是一个*装饰器函数*，它接受一个*元数据对象*作为参数。
通过给这个函数加上**@**前缀，我们就可以把这个函数加到组件类上，比如上面这个类。
:marked
`@Component` is #{_a} *#{_decorator}* that allows us to associate *metadata* with the
component class.
The metadata tells Angular how to create and use this component.
`@Component` 是一个*#{_decoratorCn}*，它允许我们把*元数据*关联到组件类上。这些元数据会告诉Angular如何创建和使用我们的类。
+makeExcerpt('app/app.component.ts', 'metadata')
@ -402,11 +402,11 @@ p.
block annotation-fields
:marked
This particular metadata object has two fields, a `selector` and a `template`.
这里的这个元数据对象有两个字段：一个`selector`，一个`template`。
:marked
The **selector** specifies a simple CSS selector for an HTML element that represents the component.
**selector**字段指定了一个简单的CSS选择器，用于指出放置此组件的HTML元素。
>The element for this component is named `my-app`.
@ -422,16 +422,16 @@ p.
**template**字段指定了此组件的模板。
它用一种增强的HTML形式写成，用来告诉Angular如何渲染此组件的视图。
>Our template is a single line of HTML announcing "*My First Angular 2 App*".
>我们的模板中只有一行HTML：“*My First Angular App*”。
>A more advanced template could contain data bindings to component properties
and might identify other application compoents which have their own templates.
These templates might identify yet other components.
In this way an Angular application becomes a tree of components.
>更高级的模板还可以包含到组件属性的数据绑定。还可以包含其它组件，这些组件还可以有自己的模板。
这些模板中还可以进一步包含其它组件。从这个意义上讲，一个Angular应用就是一棵组件树。
@ -439,14 +439,14 @@ p.
### Component class
### Component类
At the bottom of the file is an empty, do-nothing class named `AppComponent`.
文件的最底下，是一个空的，什么也不做的类，叫做`AppComponent`。
+makeExcerpt('app/app.component.ts', 'class')
:marked
When we're ready to build a substantive application,
we can expand this class with properties and application logic.
Our `AppComponent` class is empty because we don't need it to do anything in this QuickStart.
当我们打算构建一个真实的应用时，可以通过添加属性和应用逻辑来扩展这个类。
但我们不需要在这个“快速起步”中做这些事，所以这里的`AppComponent`类是空的。
+ifDocsFor('ts')
@ -466,7 +466,8 @@ block create-main
p.
现在，我们还需要做点什么来让Angular加载这个根组件。
添加一个新文件#[code #[+adjExPath('app/main.ts')]]，内容如下：
+makeProjExample('app/main.ts')
+makeExample('app/main.ts')
.l-verbose-section
:marked
@ -480,7 +481,7 @@ block create-main
1. 应用的根组件：`AppComponent`。
Then we call `bootstrap` with `AppComponent`.
然后，我们调用`bootstrap`函数，并且把`AppComponent`传进去。
### Bootstrapping is platform-specific
@ -490,7 +491,7 @@ block create-main
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
this library.
注意，我们是从`#{_angular_browser_uri}`中引入的`bootstrap`函数，而不是从`#{_angular_core_uri}`中。
“引导”不是核心的一部分，因为没有单一的途径来启动应用。诚然，大部分应用都是在浏览器中调用`bootstrap`函数的。
@ -500,7 +501,7 @@ block create-main
to improve launch performance or facilitate
[SEO](http://www.google.com/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.
但从其它环境中加载组件也是可能的。
我们可能通过[Apache Cordova](https://cordova.apache.org/) 或 [NativeScript](https://www.nativescript.org/) 在移动设备中加载它。
我们可能希望在服务器中渲染我们的第一个页面来提高启动效率或
@ -514,7 +515,7 @@ block create-main
This is just a QuickStart.
We could have merged these two files into one
and spared ourselves some complexity.
无论是`main.#{_docsFor}`还是组件的文件都非常小。
它只是一个“快速起步”而已。
我们本可以把这两个文件装进`app.component`文件来减少一点复杂度。
@ -525,7 +526,7 @@ block create-main
We might launch the `AppComponent` in multiple environments with different bootstrappers.
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*.
但我们应该用正确的方式组织Angular应用的文件结构。
启动App与展现视图是两个相互分离的关注点。
把这些关注点混在一起会增加不必要的难度。
@ -539,21 +540,21 @@ h2#index 步骤4：添加#[code index.html]
:marked
In the *#{_indexHtmlDir}* folder
create an `index.html` file and paste the following lines into it:
在*#{_indexHtmlDirCn}*目录下创建一个`index.html`文件，并粘贴下列内容：
+makeProjExample('index.html')
+makeExample('index.html')
.l-verbose-section
:marked
The `index.html` file defines the web page that hosts the application.
`index.html`是存放本应用的宿主页面。
block index-html-commentary-for-ts
:marked
The noteworthy sections of HTML are:
这段儿HTML值得注意的有：
1. The JavaScript [libraries](#libraries)
@ -568,14 +569,14 @@ h2#index 步骤4：添加#[code index.html]
### Libraries
### 库
We loaded the following scripts
我们加载下列脚本：
+makeExcerpt('index.html', 'libraries')
:marked
We begin with `core-js`'s ES2015/ES6 shim which monkey patches the global context (window) with essential features of ES2015 (ES6).
Next are the polyfills for Angular2, `zone.js` and `reflect-metadata`.
Then the [SystemJS](#systemjs) library for module loading.
我们首先引入es6-shim，它会给全局对象window打上补丁，使其支持ES2015(ES6)的必备特性。
然后是Angular 2的polyfills，以及`zone.js`和`reflect-metadata`。
然后是用于模块加载的[SystemJS](#systemjs)库。
@ -583,7 +584,7 @@ h2#index 步骤4：添加#[code index.html]
We'll make different choices as we gain experience and
become more concerned about production qualities such as
load times and memory footprint.
等我们变得更有经验、更关心产品质量（如加载时间、内存足迹等），也可以做出不同的选择。
h3#systemjs SystemJS
:marked
@ -594,7 +595,7 @@ h2#index 步骤4：添加#[code index.html]
[webpack](guide/webpack.html).
SystemJS happens to be a good choice.
But we want to be clear that it was a *choice* and not a *preference*.
本“快速起步”使用<a href="https://github.com/systemjs/systemjs" target="_blank">SystemJS</a>来加载应用和库模块。
[以前](#add-config-files)我们曾把`systemjs.config.js`文件添加到项目的根目录。
还有一些其它候选者也能很好地工作，比如备受推崇的[webpack](guide/webpack.html)。
@ -603,14 +604,14 @@ h2#index 步骤4：添加#[code index.html]
All module loaders require configuration and all loader configuration
becomes complicated rather quickly as soon as the file structure diversifies and
we start thinking about building for production and performance.
所有loader（模块加载器）都需要配置，并且文件结构很快就会变得多样，
loader的配置也会变得复杂，那时候我们就要开始考虑产品构建和性能问题了。
We suggest becoming well-versed in the loader of your choice.
Learn more about SystemJS configuration
<a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">here</a>.
我们建议你要精通你所选的loader。
要学习如何配置SystemJS的更多知识，参见<a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">这里</a>。
@ -619,7 +620,7 @@ h2#index 步骤4：添加#[code index.html]
First, we create a map to tell SystemJS where to look when we import some module.
Then, we register all our packages to SystemJS:
all the project dependencies and our application package, `app`.
把这些记在心里，我们再来看看加在“快速起步”中的[`systemjs.config.js`配置文件](#config-files)都做了什么。
首先，创建了一个映射表，来告诉SystemJS当想要引入某些模块的时候，该到哪里去找。
然后，我们把自己的所有包注册到SystemJS中：
@ -630,21 +631,21 @@ h2#index 步骤4：添加#[code index.html]
Our QuickStart doesn't use all of the listed packages
but any substantial application will want many of them
and all of the listed packages are required by at least one of the documentation samples.
这份“快速起步”不会用到这里列出的所有依赖包，但是大量应用都会用到它们，而且本文档的范例中至少有一个用到了这里列出的所有依赖包。
There is no runtime harm in listing packages that we don't need as they will only be loaded when requested.
列出那些不需要的包也不会损害应用的运行期表现，因为只有被实际用到的包才会被加载。
:marked
The `app` package tells SystemJS what to do when it sees a request for a
module from the `app/` folder.
`app`包告诉SystemJS，当有人请求`app/`目录下的某个模块时，它应该怎么做。
Our QuickStart makes such requests when one of its
application TypeScript files has an import statement like this:
在我们的“快速起步”中，当应用中的一个TypeScript文件有这样的一个导入语句时：
+makeExcerpt('app/main.ts', 'import')
:marked
@ -652,7 +653,7 @@ h2#index 步骤4：添加#[code index.html]
:marked
Notice that the module name (after `from`) does not mention a filename extension.
In the configuration we tell SystemJS to default the extension to `js`, a JavaScript file.
注意，模块名（`from`后面）并不包含文件的扩展名。
`package:`配置项告诉SystemJS使用'js'扩展名，也就是加载一个JavaScript文件。
@ -666,36 +667,36 @@ h2#index 步骤4：添加#[code index.html]
#### 在浏览器中转译
In the live example on plunker we transpile (AKA compile) to JavaScript in the browser
on the fly. _That's fine for a demo_.
在plunker上的在线例子中，我们在浏览器中随时转译（也可以叫编译）到JavaScript。对于演示来说，这足够了。
**Do not transpile in the browser during development or for production**.
**但不要开发环境或产品环境中使用浏览器中转译的方式**。
We strongly recommend transpiling (AKA compiling) to JavaScript during a build phase
before running the application for several reasons including:
我们强烈建议在运行应用之前的build阶段转译（编译）到JavaScript，理由包括：
* We see compiler warnings and errors that are hidden from us in the browser.
* 我们可以看到编译器的警告和错误，但浏览器中不行。
* Precompilation simplifies the module loading process and
it's much easier to diagnose problems when this is a separate, external step.
* 预编译简化了模块加载过程，而且当它成为分离、外部的步骤时，更容易诊断问题。
* Precompilation means a faster user experience because the browser doesn't waste time compiling.
* 预编译意味着更快的用户体验，因为浏览器不用浪费时间去编译了。
* We iterate development faster because we only recompile changed files.
We notice the difference as soon as the app grows beyond a handful of files.
* 我们的迭代开发会更快，因为我们只需要重新编译那些有变化的文件。当应用程序快速膨胀成一大堆文件时，你会体验到这些差异。
* Precompilation fits into a continuous integration process of build, test, deploy.
* 预编译更适应CI（持续集成）过程：构建、测试、部署。
@ -705,7 +706,7 @@ h2#index 步骤4：添加#[code index.html]
(`main.js` ... after transpiling `main.ts`, remember?);
`main` is where we tell Angular to launch the application.
We also catch and log launch errors to the console.
`System.import`调用告诉SystemJS引入`main`文件。（`main.js`，从`main.ts`转译而来的，还记得吧？）
`main`是我们让Angular启动应用的地方。
我们还会把启动过程中的错误捕获并记录到控制台中。
@ -730,13 +731,13 @@ h2#index 步骤4：添加#[code index.html]
### 添加一些样式
Styles aren't essential but they're nice, and `index.html` assumes we have
a stylesheet called `styles.css`.
样式不是必备的，但是它让我们的应用更漂亮。`index.html`假设我们有一个名叫`styles.css`的样式表。
Create a `styles.css` file in the *#{_indexHtmlDir}* folder and start styling, perhaps with the minimal
styles shown below. For the full set of master styles used by the documentation samples,
see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css).
在*#{_indexHtmlDirCn}*目录下创建一个`styles.css`文件来加上样式，可能是像下面这样的最小化版本。
要查看本文档中所用到的主样式表的完整集合，参见
[styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css)
@ -748,13 +749,13 @@ h2#build-and-run 步骤5：构建并运行本应用！
block run-app
:marked
Open a terminal window and enter this command:
打开终端窗口，并输入如下命令：
code-example.
npm start
:marked
That command runs two parallel node processes
这个命令运行两个并行的node进程
1. The TypeScript compiler in watch mode
1. TypeScript编译器，运行在监视（watch）模式
@ -762,10 +763,10 @@ block run-app
and refreshes the browser when application files change
1. 一个名叫 **lite-server** 的静态服务器，它把`index.html`加载到浏览器中
这样，当应用的文件发生变化时，它会自动刷新浏览器。
In a few moments, a browser tab should open and display
稍后，一个浏览器页标签就会打开并显示出来。
figure.image-display
@ -773,7 +774,7 @@ figure.image-display
:marked
**Great job!**
**干得好！**
block build-app
@ -784,7 +785,7 @@ block build-app
### 做点改变
Try changing the message to "My SECOND Angular 2 app".
试着把消息内容改成“我的第二个Angular2应用”。
block server-watching
:marked
@ -792,13 +793,13 @@ block server-watching
They should detect the change, recompile the TypeScript into JavaScript,
refresh the browser, and display the revised message.
It's a nifty way to develop an application!
TypeScript编译器和`lite-server`都在监视。
它们会检测到文件的变化，重新把这个TypeScript文件编译成JavaScript文件，刷新浏览器，并且显示修改过的消息。
这就是我们开发应用程序的方式，多漂亮！
We close the terminal window when we're done to terminate both the compiler and the server.
当终止了编译器和服务器之后，我们可以关闭terminal窗口。
.l-main-section
:marked
@ -806,7 +807,7 @@ block server-watching
# 完工！
Our final project folder structure looks like this:
最终的项目目录结构是这样的：
block project-file-structure
.filetree
@ -826,7 +827,7 @@ block project-file-structure
.file typings.json
:marked
Here are the file contents:
这里是这些文件的内容：
block project-files
@ -853,27 +854,27 @@ block project-files
:marked
## What next?
## 下一步做什么？
Our first application doesn't do much. It's basically "Hello, World" for Angular 2.
我们的第一个应用没做什么，它只是Angular 2的“Hello, World”。
We kept it simple in our first pass: we wrote a little Angular component,
created a simple `index.html`, and launched with a
static file server. That's about all we'd expect to do for a "Hello, World" app.
我们让自己的Angular 2处女航保持简单：我们写了一个小的Angular组件，添加一些JavaScript库到`index.html`，并且启动一个静态文件服务器。
这就是我们想通过“Hello, World”应用去表现的一切。
**We have greater ambitions!**
**我们还有更宏伟的目标！**
block what-next-ts-overhead
:marked
The good news is that the overhead of setup is (mostly) behind us.
We'll probably only touch the `package.json` to update libraries.
We'll likely open `index.html` only if we need to add a library or some css stylesheets.
好消息是：准备阶段（几乎）已经结束了。
我们将来可能只是修改`package.json`来升级依赖库。
如果需要添加一些库或一些css样式表，我们可以打开`index.html`。