翻译：Angular 2 - TypeScript 5 分钟快速入门

原文地址：https://angular.io/docs/ts/latest/quickstart.html

Angular 2 终于发布了 beta 版。这意味着正式版应该很快就要发布了。

让咱们使用 TypeScript 语言从头建立一个超级简单的 Angular 2 应用。

若是不喜欢 Typescript，你也可使用 JavaScript 来完成这个演练。

See It Run!

官方提供了一个在线的演示，地址在这里：live example，不过你可能不能正常访问。仍是让咱们本身来实践一下算了。不过，能够先看一下运行的结果。

你很快就能够本身完成它。

这是最终的文件结构：

app
    +app.component.ts
    +boot.ts
index.html 

也就是说，根目录下有一个 index.html 文件，在 app 目录下，有两个 Typescript  文件。

咱们须要以下的 4 个步骤来完成它。

1. 建立开发环境
2. 为咱们的应用编写 root component
3. 启动 root component 控制主页面
4. 编写主页面 (index.html)

若是咱们忽略掉那些旁支末节的说明，按照这些步骤，咱们真的能够在 5 分钟以内就完成这个演练的。固然了，多数人对 why 和 how 同样感兴趣，因此，时间可能会长一点。  

建立开发环境

首先，咱们须要一个地方来做为项目文件夹，保存一些库文件，一些 TypeScript 配置，以及一个你喜欢的 TypeScript 编辑器。若是没有的话，其实文本编辑器就能够了。

建立项目文件夹

mkdir angular2-quickstart
cd    angular2-quickstart

添加须要的库

推荐使用 npm  来获取和管理咱们开发所使用的库。

尚未安装 npm? 如今就安装它，咱们立刻就会使用，并且在这个文档中会不断使用它。这里有安装 NPM 的介绍。

添加名为 package.json 的文件，将下面的内容粘贴到文件中。:

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

想知道为何这个写吗? 在这里有详细的说明： appendix below

使用下面的命令来安装这些 packages. 打开一个终端窗口，在 Windows 中使用 command window 就能够，而后执行下面的 npm 命令。

npm install

在安装过程当中，会看到一些吓人的红色错误信息，无视它们就能够，安装将会成功，在  appendix below  有详细的说明。

配置 TypeScript

TypeScript 并不能直接在浏览器中执行，因此咱们须要使用 TypeScript 编译器进行处理，咱们必须对 TypeScript 编译器进行一些特殊的配置。

添加名为 tsconfig.Json 的文件到项目文件夹中，将下面的内容粘贴到文件中。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

仍是在 appendix below 中有详细的说明。

咱们已经准备好了，如今开始编写一些代码。

第一个 Angular Component

Component 是 Angular 中的基础概念，一个 Component 管理一个视图 View， View 是页面中的一个片断，咱们用来显示信息给用户而且响应用户的反馈。

从技术上说，Component 是一个用来控制 View 模板的类。在建立 Angular App 的时候，咱们会编写大量的 Component。这是咱们的第一次尝试，因此，咱们会保持这个组件惊人的简单。

建立保存应用源码子文件夹

咱们会将应用代码保存在名为 app 的子文件夹中，在控制台窗口中执行下面的命令建立文件夹。

mkdir app cd app

添加 Component 文件

如今，咱们建立名为 app.component.ts 的文件，将下面的代码粘贴进来。

app/app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

 

咱们把上面的代码详细分析一下。先从最后一行的定义类开始。

The Component class

在代码的最后一行，是名为 AppComponent 的什么都没有作的类，在咱们开始建立一个应用的时候，咱们能够扩展这个类的属性和业务逻辑。因为咱们还不须要在这个 QuickStart 中作什么，咱们的 AppComponent 类目前仍是空的。

Modules

Angular 应用是模块化的，其中包含一系列各有用途的独立文件。

多数应用文件导出一些东西，相似 Component，咱们的 app.component 导出 AppComponent.

app/app.component.ts (export)

export class AppComponent { }

这个导出的行为将这个文件转化为了一个模块 module，文件的名称（不包含扩展名）一般做为模块的名称，根据这个规则，'app.component' 就是咱们第一个模块的名称。

一个精巧的应用将会在一个组件构成的虚拟树中包含一些子组件，更加复杂的应用将会包含更多的文件和模块。

Quickstart 不复杂，咱们只须要一个组件，在咱们这个小应用中，组件还扮演着组织应用的角色。

模块依赖其它的模块。在 TypeScript 版本的 Angular 应用中，当咱们须要其余模块提供服务的时候，咱们将须要的模块导入到当前模块中。当其它的模块须要使用 AppComponent 的时候，可使用下面的语法导入 AppComponent ，以下所示：

app/boot.ts (import)

import {AppComponent} from './app.component'

Angular 也是模块化的，它自己是一系列库模块的集合，每一个库就是一个提供服务的模块，被将来的模块所使用。

当咱们须要 Angular 中提供的服务的时候，咱们就从 Angular 的库模块中导入。如今咱们就须要 Angular 帮助咱们，以便定义咱们 Component 中的元数据。

Component Metadata

在咱们为 Class 提供元数据以后，它才会成为 Angular Component. Angular 须要元数据来理解如何构造视图，以及这个组件如何同应用中的其余部分进行互动。

咱们使用 Angular 提供的 Component 函数来定义 Component 的元数据，经过导入 Angular 的基础库 angular2/core， 咱们能够访问这个函数。 

app/app.component.ts (import)

import {Component} from 'angular2/core';

在 TypeScript 中，咱们将这个函数应用到类的前缀来装饰这个类，使用 @ 符号，在组件类的上方调用这个函数。

app/app.component.ts (metadata)

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})

@Component 告诉 Angular 这个类是一个组件 Componet，配置对象传递给了 @Compoent 函数，包含两个字段，selector 和 template.

selector 指定了一个简单的 CSS 选择器，选择名为 my-app 的 HTML 元素。在 Angular 遇到页面中的 my-app 元素的时候， Angular 将会建立咱们的 AppComponent 实例并显示它。

记住这个 my-app 选择器，在咱们编写 index.html 的时候，咱们须要这些信息。

template 属性保存伴随的模板，模板来自 HTML, 告诉 Angular 如何渲染视图，咱们的视图只有一行 "My First Angular App"

如今咱们须要告诉 Angular 如何加载组件。

Give it the boot

在 app 文件夹中，添加一个新文件 boot.rs，以下所示。

app/boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

咱们须要两件事情来启动应用：

1. Angular 的浏览器函数 bootstrap
2. 咱们刚刚编写的根组件

咱们把它们导入进来，而后调用 bootatrap，将 AppComponent 组件做为参数传递给 bootstrap.

能够在 appendix below 中学习为何咱们从 angular2/platform/browser 导入 bootstrap ，以及为何要建立独立的 boot.ts 文件。

咱们已经请求 Angular 将咱们的组件做为根来启动应用。Angular 将会把它放在哪里呢？ 

Add the index.html

Angular 在咱们 index.html 中特定的位置显示咱们的应用，如今是建立这个文件的时候了。

咱们不会将 index.html 保存在 app/ 文件夹中，咱们将它保存在上一级文件夹中，就在项目的根目录中。

cd ..

如今建立 index.html 文件，将下面的内容粘贴到文件中。

index.html

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

 

这个文件由三个主要的部分组成:

1. 加载咱们须要的脚本文件，. Angular 2 须要 angular2-polyfills.js 和 Rx.js .

2. 咱们配置了 System, 而后经过它来导入和加载咱们刚刚编写的启动文件。.

3. 在 <body> 标记中添加了  <my-app> . 这就是咱们应用执行的位置!

须要一些东西来定位和加载咱们的应用模块，咱们这里使用 SystemJS 作这件事。还有没有提到的方式也能够，可是 SystemJS 是最好的选择。咱们喜欢使用它，它也能正常工做。

关于 SystemJS 配置的说明已经超出了今天的内容范围，咱们将在  appendix below 中进行简单的介绍。

当 Angular 在 boot.ts 中调用 bootstrap 函数的时候，它将会读取 AppComponent 的元数据，发现 my-app 选择器，定位名为 my-app 的元素，而后在这个元素的标记之间加载咱们的应用。

Compile and run!

打开一个终端窗口，输入下面的命令：

npm start

 

这个命令执行两个并行的 node 进程。

1.  TypeScript 编译器运行在监控模式。
2. 称为  lite-server 的静态文件服务器，它会将 index.html 加载到浏览器中，当应用文件刷新的时候自动从新刷新浏览器。

稍等一下，一个浏览器的 Tab 页会被打开，而后显示出：

祝贺你！咱们上路了。

若是你看到 Loading... ，而不是上述内容，查看：Browser ES6 support appendix.

Make some changes

将显示的信息修改成、 "My SECOND Angular 2 app".

TypeScript 编译器和 Lite-server 将会监控文件，它们将会检测到这些变化，自动从新编译 TypeScript 到 JavaScript ，刷新浏览器，显示修改以后的信息。

这是开发应用极好的方式。

 完成以后，咱们能够关闭中断窗口。

Final structure

最终的项目结构看起来以下所示：

angular2-quickstart

node_modules

app

     app.component.ts

     boot.ts

index.html

package.json

tsconfig.json

下面是文件的内容：

 

app/app.component.ts

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

 

app/boot.ts

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

 

index.html

<html>
    <head>
        <title>Angular 2 QuickStart</title>
        <!-- 1. Load libraries -->
        <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.js"></script>
        <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
        <!-- 2. Configure SystemJS -->
        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/boot')
                  .then(null, console.error.bind(console));
        </script>
    </head>
    <!-- 3. Display the application -->
    <body>
        <my-app>Loading...</my-app>
    </body>
</html>

 

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

 

tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules"
    ]
}

 

Wrap Up

咱们的第一个应用没有作多少事，就是一个基本 Angular 2 版本的 "Hello, World" 

咱们保持第一个应用足够简单：咱们编写了一点 Angular 组件，添加在一些 JavaScript 库到 index.html 中，而且使用一个静态文件服务器启动了应用。这就是咱们指望 “Hello,World " 所作的事情。

咱们有更大的目标

好消息是更大的目标在等着咱们，咱们将只须要更新 package.json 来更新库。只在须要的时候，咱们打开 index.html 文件来添加库或者是 css 样式表。

 咱们会使用 Angular 2 来建立一个小的应用来演示更多的内容。

来继续学习  Tour of Heroes Tutorial!

Appendices

最后是一系列咱们涵盖内容中涉及的知识点的速览。

这里没有基础的资料，对于好奇者来讲能够继续读下去。 

Appendix: Browser ES6 support

 Angular 2 基于一些 ES2015 特性，大多数在流行的浏览器中能够找到。有些浏览器（包括 IE11 ) 须要一个垫片来支持须要的功能。试着在 index.html 文件的其余脚本以前加载垫片库。

<script src="node_modules/es6-shim/es6-shim.js"></script>

Appendix: package.json

npm 是流行的包管理程序，Angular 应用开发者依赖它来获取和管理应用所使用的库。

咱们在 npm 的 package.json 文件中，指定咱们须要使用的包。

Angular 团队建议使用的包列在 dependencies 和 devDependencies 配置节中。

package.json (dependencies)

{
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

还有一些其它的包选择，咱们建议使用这些包，由于它们在一块儿工做的很好。如今使用它们，之后能够根据你的爱好和习惯使用其它的包。

在 package.json 中，包含一个可选的 scripts 配置节，咱们能够定义一些有用的命令来执行开发和构建任务。咱们已经在建议的 package.json 中包含了一些命令。

package.json (scripts)

{
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  }
}

咱们已经看到了如何同时执行编译器和服务器的监控任务。

npm start

咱们可使用下面的方式来执行 npm 脚本： npm run + script-name. 下面是三个脚本的目的:

• npm run tsc - 执行一次 TypeScript 编译器 

• npm run tsc:w - 在监控模式执行 TypeScript 编译器; 进程保持执行。等到 TypeScript 文件变化以后，从新编译它。

• npm run lite - 执行 lite-server, 一个轻量级的，静态文件服务器。, 由 John Papa 编写和维护，对 Angular 使用路由的应用有着杰出的支持.

Appendix: Npm errors and warnings

当执行 npm install 没有错误的时候一切都好， 会有一些 npm 警告信息，一切彻底没有问题。

咱们常常在一系列的 gyp 错误信息以后看到 Npm 的警告信息。忽略它们吧，包可能试图使用 node-gyp 从新编译本身。若是从新编译失败，包会进行恢复（典型地使用上一个 build 版本）并且正常工做。 

Appendix: TypeScript configuration

咱们添加了一个 TypgeScript 配置文件 tscofnig.json 到咱们的项目，在编译生成 JavaScript 的时候来指导编译器。能够从 TypeScript 官方的 TypeScript wiki 来获取关于 tsconfig.json 的详细说明。

咱们使用的选项和标志都是基本的。

咱们花一点时间来讨论 noImplicitAny 标志。TypeScript 开发者不一样意它到底应该是 true 仍是 false。这里没有正确的答案，咱们之后也能够修改它。可是咱们如今的选择会在大的项目中形成很大的不一样，因此，它值得讨论一下。

当 noImplicitAny 标志为 false 的时候，若是编译器不能根据变量的使用来推断变量的类型，直接默认为 any 类型。这就是为何称为 "implicitly any "，

当 noImplicitAny 标志为 true 的时候，TypeScript 编译器不能推断类型，它仍然生成 JavaScript 文件，可是报告一个错误。

在这个 QuickStart 和其它的开发示例手册中，咱们将 noImplicitAny 标志设置为 false.

但愿强制类型检查的开发者可能会设置 noImplicitAny 标志为 true。咱们仍然能够将变量的类型设置为 any，若是这是更好的选择的话。

若是咱们将 noImplicitAny 标志设置为 true，咱们会获得一个显式的索引错误。若是咱们以为没有用，而是被困扰了，可使用下面的标志来抑制它们。

1. "suppressImplicitAnyIndexErrors":true

Appendix: SystemJS Configuration

QuickStart 使用 SystemJS 加载应用和库模块。还有一些替代库页能够作的很比如如著名的 webpack 。SystemJS 在须要简单清楚的时候是一个好的选择。

各类模块加载器都须要进行配置，一旦文件变多，咱们开始考虑生产力和性能的时候，全部的配置都变得复杂。

咱们建议你精通所选择的加载器。

更多关于 SystemJS 的配置信息参考这里 here

因为以上的考虑，咱们这里做了什么呢？

index.html (System configuration

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

package 节点告诉 SystemJS 当遇到一个来自 app 文件中的模块请求的时候如何去作。

当应用中的一个 TypeScript 文件有相似下面的导入语句时，咱们的 QuickStart 会发出一些请求。

boot.ts (excerpt)

import {AppComponent} from './app.component'

注意，from 后面的模块名称没有包含扩展名，package 的配置告诉 SystemJS 默认的扩展名是 ‘js'，JavaScript 文件。

这是说的通的，由于咱们会在编译 TypeScript 到 JavaScript 以后运行应用。

在 plunker 网站上的动态演示中，咱们在浏览器中即时编译，演示没有问题，可是对于开发或者生产环境就不适合。

有许多因素咱们建议在运行应用以前的 build 阶段编译成 JavaScript 代码:

• 在浏览器中，咱们能够看到隐藏在后面的编译警告和错误信息。We see compiler warnings and errors that are hidden from us in the browser.

• 预编译简化了模块加载过程，并且当它是一个独立的外部步骤的时候更容易检测问题.

• 因为浏览器不用浪费时间进行编译，预编译意味着更快的用户体验.

• 迭代开发过程会更快，由于咱们只须要编译变化的文件。一旦应用超过必定的量，咱们就会注意到区别。

• 预编译适应持续集成，测试，发布。

System.import 调用告诉 SystemJS 导入 boot 文件（boot.js ... 等到编译以后，记得吗？）boot 是咱们告诉 Angular 启动应用的地方，咱们同时也捕获和记录启动中的错误信息到控制台中。

其它的模块或者由 Angular 自身或者由前面的模块加载。

Appendix: boot.ts

Bootstrapping is platform-specific

咱们从 angular2/platform/browser 中导入 bootstrap 函数，而不是 angular2/core, 有一些缘由。

咱们只在但愿跨全部平台目标的时候调用 "core" ，是的，多数 Angular 应用仅仅运行在浏览器中，多数状况下咱们调用这个库的函数，若是咱们老是为浏览器的话，这是一个很好的选择。

可是，有可能在不一样的环境下加载组件，咱们可能在移动设备中使用  Apache Cordova ,咱们但愿在服务器渲染首页，以便提升加载性能或者便于 SEO。

这些目标须要咱们从其它库中导入不一样的函数。

为何建立独立的 boot.ts 文件?

boot.ts 文件很小，仅仅是一个 QuickStart，咱们能够将仅有的几行合并到 app.component 文件中，减小一些复杂度。

下面的缘由使咱们没有这样作：

1. 很容易写好。
2. 可测试
3. 可重用
4. 关注点分离
5. 能够学到更多的导入和导出

容易

确实是额外的步骤和额外的文件，有多难呢？

咱们会在更多的应用中看到独立的 boot.ts 的优势，让咱们用很低的代价学到更多好的习惯。

Testability

即便咱们知道咱们永远不会测试这个 QuckStart ，咱们也应该从一开始考虑到可测试性。

若是同一个组件文件中包含了 bootstrap 调用的话，它是很难测试的。一旦咱们加载这个组件文件进行测试，bootstrap 函数就会试图加载应用到浏览器中。因为咱们并不但愿运行整个应用，它会报错，

将 bootstrap 功能移到独立的 boot.ts 文件中，能够避免这个错误，保持组件文件的清晰。

Reusability

在应用开发过程当中，咱们重构，重命名文件，若是文件中调用了 bootstrap，咱们不能就不能作这些事情。咱们不能移动，不能在其它应用中重用组件，不能为了更好的性能在服务区端预先渲染。

Separation of concerns

组件的职责是呈现和管理视图。

启动应用对视图来讲彻底无关。

Import/Export

在分离的 boot.ts 文件中，咱们学到了 Angular 的基本技能：如何从模块导出，如何导入到其它模块。在学习 Angular 的过程当中，咱们会作大量的此类工做。