5 分钟快速入门 Angular 2 （官方文档翻译）

让我们通过本文从 0 开始使用 TypeScript 创建一个 Angular 2 应用。

先看看运行效果？

如果想先看看运行效果，可以点击访问我们在 Plunker 上面准备的示例，应用其实做的事情很简单，打开页面之后，开始加载程序代码，当程序代码加载完成之后，在页面中显示应用组件，该组件包含 My First Angular 2 App 字符。

其文件目录结构如下：

angular2-quickstart
|-app/
|-|-app.component.ts
|-|-main.ts 
|
|-index.html
|-license.md

功能文件包括一个 index.html 文件以及 app/ 目录下面的两个 TypeScript 文件。

当然了，我们开发不仅仅只是想在 Plunker 上面可以运行就可以了的，而是需要做一个真正的应用，包括：

配置我们的开发环境
创建 Angular 应用的根组件
启动它以让其接管整个页面
创建主页面 index.html

开发环境

我们首先需要一个地方存储整个应用的程序文件（应用项目目录），一些 TypeScript 配置以及一些开发与运行时需要的库。

创建新的项目目录

mkdir angular2-quickstart
cd angular2-quickstart

配置 TypeScript

我们必须要对 TypeScript 编译器进行一上结特殊的设置。

在项目目录下面添加一个名为 tsconfig.json 的文件，并复制/粘贴以下代码：

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

TypeScript Typings

许多 JavaScript 库对 JavaScript 的功能与语法进行了扩展，而这些扩展很多是 TypeScript 编译器本身不识别的，我们需要通过 TypeScript 类型定义文件 —— d.ts 教会编译器如何编译这些扩展，在项目目录下面新建一个名为 typings.json 的文件，编辑复制并粘贴下面的代码片段：

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
  }
}

添加项目必要的第三方库

我们推荐使用 npm 包管理工具管理第三方库。在项目目录中添加一个名为 package.json 的文件，复制并粘贴下面的代码片段：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "npm run typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "typings" : "typings"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.6",
    "systemjs": "0.19.20",
    "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.14"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^2.0.1",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

然后在项目目录中执行下面的命令以安装必要的第三方库：

npm install

第一个 Angular 组件

组件(Component) 是 Angular 最基本的概念，组件管理视图——用于显示网页内容或者对用户的反馈作出响应，技术上讲，一个组件就是一个类或者一个视频模板，我们在创建 Angular 应用的过程中，就是创建很多个组件的过程。

创建一个子目录

我们希望整个应用的代码都保存在项目根目录下名为 app/ 的子目录下，在终端中执行下面的命令即可：

mkdir app
cd app

创建组件文件

现在，添加一个名为 app.component.ts 的文件，复制并粘贴以下代码：

import { Component } from 'angular2/core';

@Component({
  selector: 'my-app',
  template: '<h1>我的第一个 Angular 2 应用</h1>'
})
export class AppComponent {

}

组件类（Component class）

在该文件的最下方，我们添加了一个空的，不做什么事情的名为 AppComponent 的类，当我们需要去做一个具有实质性功能的应用时，可以去扩展该类，但是在快速入门这个项目中，它不需要做任何事情。

模块

Angular 应用是模块化的，它们会使用很多个不同的模块去实现特定的功能，绝大多数应用的文件都会导出一个事物，比如一个组件，我们的 app.component 文件导出了 AppComponent 类。

export class AppComponent {

}

导出使得这个文件变成了一个模块，而这个文件的名称一般就是模块的名称，如上所述， app.component 就是我们的第一个模块。