From bf9eed942d917b0edbb2bb9c94550a1393e9e89b Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Mon, 7 Mar 2016 21:42:10 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=88=E7=BF=BB=E8=AF=91=E4=BA=86=E4=B8=80?= =?UTF-8?q?=E9=83=A8=E5=88=86QuickStart?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/ts/latest/quickstart.jade | 107 ++++++++++++++++++++++---- 1 file changed, 90 insertions(+), 17 deletions(-) diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index 2a91ddbe0a..c6b21dc48d 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -3,7 +3,7 @@ include _util-fns :marked Our QuickStart goal is to build and run a super-simple Angular 2 application in TypeScript. - 在“快速开始”中，我们的目标是构建和运行一个超简单的Angular 2应用 —— 使用TypeScript语言 + 在“QuickStart”中，我们的目标是构建和运行一个超简单的Angular 2应用 —— 使用TypeScript语言 # Download the code # 下载代码 @@ -148,6 +148,7 @@ a(id="typings") a(id="package-json") :marked Add a **package.json** file to the project folder and copy/paste the following: + 添加一个 **package.json** 文件到项目文件夹，并且拷贝/粘贴下列内容： +makeJson('quickstart/ts/package.1.json', null, 'package.json')(format=".") @@ -294,115 +295,187 @@ a(id="app-component") Components are the basic building blocks of Angular applications. A component controls a portion of the screen — a *view* — through its associated template. + 组件是Angular程序最基本的构造块儿。组件通过它所关联的模板，控制屏幕的一部分 — 这就是 *视图* 。 + This QuickStart has only one, extremely simple component. But it has the essential structure of every component we'll ever write: + + 这个QuickStart只有一个非常简单的组件，但它具备我们以后要写的组件的基本结构。 * One or more import - statements to reference the things we need. + statements to reference the things we need. + + * 一个或多个import语句来引入我们所需的文件。 * A @Component decorator that tells Angular what template to use and how to create the component. - + + * 一个@Component装饰器 + 来告诉Angular，使用哪个模板，以及怎样创建这个组件。 + * A component class that controls the appearance and behavior of a view through its template. - - a(id="component-import") + + * 一个component类 + 来通过它的模板控制一个视图的外观和行为。 + +a(id="component-import") :marked ### Import Angular apps are modular. They consist of many files each dedicated to a purpose. + + Angular的应用都是模块化的。他们由很多职责明确的文件组成。 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. + + Angular本身也是模块化的。它包括一系列的库模块，这些模块包括了一系列相关的特性，以便我们可以拿来构建自己的应用。 When we need something from a module, we import it. Here we import the Angular `Component` decorator function from the main Angular library module because we need it to define our component. + + 当我们需要一个模块中的某些东西时，我们引入（import）它。 + 在这里，我们从Angular的主模块中引入了`Component`装饰器，我们需要它来定义我们的组件。 + +makeExample('quickstart/ts/app/app.component.ts', 'import', 'app/app.component.ts (import)')(format=".") a(id="component-decorator") :marked ### @Component decorator + ### @Component装饰器 `Component` is a **decorator** function that takes a *metadata* object. The metadata tell Angular how to create and use this component. - + + `Component`是一个 **装饰器** 函数，它用来获得一个 *metadata* 对象。 + `metadata`会告诉Angular，如何创建和使用这个组件。 + We apply this function to the component class by prefixing the function with the **@** symbol and invoking it with the metadata object just above the class: + + 我们通过给这个组件类加上 **@Component** 前缀，并且传入metadata对象来使用它。 + +makeExample('quickstart/ts/app/app.component.ts', 'metadata', 'app/app.component.ts (metadata)')(format=".") :marked This particular metadata object has two fields, a `selector` and a `template`. + 这里的metadata对象具有两个字段：`selector`和`template`。 + 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`. Angular creates and displays an instance of our `AppComponent` wherever it encounters a `my-app` element in the host HTML. - The **template** specifies the component's companion template, - written in an enhanced form of HTML that tells Angular how to render this component's view. + >在此组件中，这个元素被命名为`my-app`。 + Angular创建和显示`AppComponent`组件的一个实例。 + 然后把它放在宿主页面的一个`my-app`元素中。 + + **template**用于指定组件的模板。 + 它使用一种增强的HTML格式写成，用来告诉Angular如何渲染此组件的视图。 >Our template is a single line of HTML announcing "*My First Angular App*". + + >我们的模板中只有一行HTML：“*My First Angular App*” >A more advanced template could contain data bindings to component properties - and might identify other application components which have their own templates. + 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应用就是一棵组件树。 + a(id="component-class") :marked ### Component class + ### Component类 At the bottom of the file is an empty, do-nothing class named `AppComponent`. + + 文件的最底下，是一个空的，什么也不做的类，叫做`AppComponent`。 +makeExample('quickstart/ts/app/app.component.ts', 'export', 'app/app.component.ts (class)')(format=".") :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. - + + 当我们打算构建一个真实的应用时，可以通过添加属性和应用逻辑来扩展这个类。 + 但我们不需要在这个QuickStart中做这些事情，所以这里的`AppComponent`类是空的。 + We **export** `AppComponent` so that we can **import** it elsewhere in our application, as we'll see when we create `main.ts`. - + + 我们 **导出** `AppComponent`，以便我们可以在应用的其他地方 **导入** 它 —— 比如我们创建`main.ts`时。 a(id="main") .l-main-section :marked ## Show it with *main.ts* + ## 通过 *main.ts* 显示它 Now we need something to tell Angular to load the root component + + 现在，我们还需要做点什么来让Angular加载这个根组件（root component） Add a new file , `main.ts`, to the `app/` folder as follows: + + 添加一个新文件，`main.ts`，到`app/`目录下，比如： +makeExample('quickstart/ts/app/main.ts', null, 'app/main.ts')(format=".") .l-verbose-section :marked We import the two things we need to launch the application: + 我们引入了两个类来启动这个应用： + 1. Angular's browser `bootstrap` function + 1. Angular的浏览器`bootstrap`（启动）函数 1. The application root component, `AppComponent`. + 1. 应用的根组件：`AppComponent` Then we call `bootstrap` with `AppComponent`. + + 然后，我们调用`bootstrap`函数，并且把`AppComponent`传进去。 ### Bootstrapping is platform-specific + ### “启动”是平台相关的 Notice that we import the `bootstrap` function from `angular2/platform/browser`, not `angular2/core`. - + + 注意，我们是从`angular2/platform/browser`中引入的`bootstrap`函数，而不是`angular2/core`中。 + 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. - - But it is possible to load a component in a different environment. + + “启动”不是核心的一部分，是因为没有单一的途径来启动应用。诚然，大部分应用都是在浏览器中调用`bootstrap`函数的。 + + 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 wish to render the first page of our application on the server to improve launch performance or facilitate [SEO](http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf). + 但从其它环境中加载组件仍然是可能的。 + 我们可能通过[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)更加容易。 + These targets require a different kind of bootstrap function that we'd import from a different library. + + 要达成这些目标，我们需要从其它库中引入一个不同类型的`bootstrap`函数。 ### Why create a separate ***main.ts*** file? - + ### 为什么创建一个分离的 ***main.ts*** 文件？ + The *main.ts* file is tiny. This is just a QuickStart. We could have folded its few lines into the `app.component` file and spared ourselves some complexity. - + + *main.ts* 文件非常小。它只是一个`QuickStart`。我们可以 + We'd rather demonstrate the proper way to structure an Angular application. App bootstrapping is a separate concern from presenting a view. Mixing concerns creates difficulties down the road.