快速构建AngularJs 2.0 教程

• 环境准备 : 安装 Node.js and npm 。
• 步骤 1 ：创建并配置此项目。
• 步骤 2 ：创建应用
• 步骤 3 ：创建一个组件并添加到应用程序中。
• 步骤 4 ：启动应用程序。
• 步骤 5 ：定义一个页面作为该应用的宿主。
• 步骤 6 ：构建并运行此应用。
• 步骤 7 ：做一些修改，并立即查看效果。
• 收工，下一步

如果你的机器上还没有 Node.js 和 npm ，  安装它们  。 我们的例子需要 node  v5.x.x 或更高版本以及 npm  3.x.x  或更高版本。 要检查你正在使用的版本，请在终端窗口中运行  node -v  和  npm -v  命令。

使用终端窗口，为项目创建目录，并进入此目录。

mkdir angular2-quickstart
cd    angular2-quickstart

典型的 Angular 项目需要一系列配置文件

• package.json 用来标记出本项目所需的 npm 依赖包。
• tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
• typings.json 为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。
• systemjs.config.js 为模块加载器提供了该到哪里查找应用模块的信息，并注册了所有必备的依赖包。 它还包括文档中后面的例子需要用到的包。
• systemjs.config.js provides information to a module loader about where to find application modules, and registers all the necessary packages. It also contains other packages that will be needed by later documentation examples.

在你的项目根目录中创建这些文件，并从下面的例子框中拷贝粘贴文本来填充它们。

package.json

app/main.ts

{   "name": "angular2-quickstart",   "version": "1.0.0",   "scripts": {     "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",     "lite": "lite-server",     "postinstall": "typings install",     "tsc": "tsc",     "tsc:w": "tsc -w",     "typings": "typings"   },   "license": "ISC",   "dependencies": {     "@angular/common": "2.0.0",     "@angular/compiler": "2.0.0",     "@angular/core": "2.0.0",     "@angular/forms": "2.0.0",     "@angular/http": "2.0.0",     "@angular/platform-browser": "2.0.0",     "@angular/platform-browser-dynamic": "2.0.0",     "@angular/router": "3.0.0",     "@angular/upgrade": "2.0.0",     "core-js": "^2.4.1",     "reflect-metadata": "^0.1.3",     "rxjs": "5.0.0-beta.12",     "systemjs": "0.19.27",     "zone.js": "^0.6.23",     "angular2-in-memory-web-api": "0.0.20",     "bootstrap": "^3.3.6"   },   "devDependencies": {     "concurrently": "^2.2.0",     "lite-server": "^2.2.2",     "typescript": "^2.0.2",     "typings":"^1.3.2"   } }

tsconfig.json

app/app.module.ts

{   "compilerOptions": {     "target": "es5",     "module": "commonjs",     "moduleResolution": "node",     "sourceMap": true,     "emitDecoratorMetadata": true,     "experimentalDecorators": true,     "removeComments": false,     "noImplicitAny": false   }

}

typings.json

app/app.module.ts

{

  "globalDependencies": {

    "core-js": "registry:dt/core-js#0.0.0+20160725163759",

    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",

    "node": "registry:dt/node#6.0.0+20160909174046"

  }

}

systemjs.config.js

app/app.module.ts

/**

 * System configuration for Angular 2 samples

 * Adjust as necessary for your application needs.

 */

(function (global) {

  System.config({

    paths: {

      // paths serve as alias

      'npm:': 'node_modules/'

    },

    // map tells the System loader where to look for things

    map: {

      // our app is within the app folder

      app: 'app',

      // angular bundles

      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',

      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',

      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',

      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',

      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',

      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',

      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',

      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries

      'rxjs':                       'npm:rxjs',

      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',

    },

    // packages tells the System loader how to load when no filename and/or no extension

    packages: {

      app: {

        main: './main.js',

        defaultExtension: 'js'

      },

      rxjs: {

        defaultExtension: 'js'

      },

      'angular2-in-memory-web-api': {

        main: './index.js',

        defaultExtension: 'js'

      }

    }

  });

})(this);

虽然我们这里使用了 SystemJS 来达到目标，不过它也只是加载模块的选项之一。尽管用你喜欢的模块加载器吧。关于 Webpack 和 Angular ，参见  Webpack 简介  。 或者到  这里 学习关于 SystemJS 配置的知识。

安装依赖包

使用 npm 命令来安装 package.json 中列出的依赖包。请在终端窗口 ( 或 Windows 的 cmd 窗口 ) 中输入下列命令：

npm install

在安装期间可能出现红色的错误信息，你还会看到  npm WARN  信息。不过不用担心，只要末尾处没有  npm ERR!  信息就算成功了。

你现在应该得到了如下结构：

angular2-quickstart

--node_modules ...

--typings ...

--package.json

--systemjs.config.js

--tsconfig.json

--typings.json

如果在运行  npm install  之后没有出现  typings  目录，你就需要通过命令手动安装它：

npm run typings install

现在，你可以开始写代码了！

步骤 2 ：创建应用

我们用 NgModules 把 Angular 应用组织成了一些功能相关的代码块。 Angular 本身也被拆成了一些独立的 Angular 模块。 这让你可以只导入你应用中所需的 Angular 部件，以得到较小的文件体积。

每个 Angular 应用都至少有一个模块： 根模块 ，在这里它叫做 AppModule 。

** 在应用的根目录下创建一个 app 子目录：

mkdir app

使用下列内容创建 app/app.module.ts 文件：

app/app.module.ts

import { NgModule }      from '@angular/core';import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports:      [ BrowserModule ]})export class AppModule { }

这里是应用的入口点。

由于 QuickStart 是一个运行在浏览器中的 Web 应用，所以根模块需要从@angular/platform-browser 中导入 BrowserModule 并添加到 imports 数组中。

这是要让一个最小的应用在浏览器中运行时，对 Angular 的最低需求。

QuickStart 应用不做别的，也就先不需要其他模块。在真实的应用中，我们可能还得导入 FormsModule 、 RouterModule 和 HttpModule 。这些会在 英雄指南教程 中引入。

步骤 3 ：创建组件并添加到应用中

每个 Angular 应用都至少有一个组件： 根组件 ，这里名叫 AppComponent 。

组件是 Angular 应用的基本构造块。每个组件都会通过与它相关的模板来控制屏幕上的一小块（视图）。

使用下列内容创建组件文件 app/app.component.ts:

app/app.component.ts

1. import { Component } from '@angular/core';
2. @Component({
3. selector: 'my-app',
4. template: '

   My First Angular 2 App

   '
5. })
6. export class AppComponent { }

QuickStart 应用具有和其它 Angular 组件相同的基本结构：

• 一个 import 语句 。它让你能访问 Angular 核心库中的 @Component 装饰器函数 。

• 一个 @Component 装饰器 ，它会把一份 元数据 关联到 AppComponent 组件类上：

• • selector 为用来代表该组件的 HTML 元素指定一个简单的 CSS 选择器。
  • template 用来告诉 Angular 如何渲染该组件的视图。

• 组件类 通过它的模板来控制视图的外观和行为

  through its template. Here, you only have the root component, AppComponent. Since you don't need any application logic in the simple QuickStart example, it's empty.

  这里，你只有一个根组件 AppComponent 。由于这个简单的 QuickStart 范例中并不需要应用逻辑，因此它是空的。

我们还要 导出 这个 AppComponent 类，以便让刚刚创建的这个应用导入它。

编辑 app/app.module.ts 文件，导入这个新的 AppComponent ，并把它添加到NgModule 装饰器中的 declarations 和 bootstrap 字段：

app/app.module.ts

1. import { NgModule } from '@angular/core';
2. import { BrowserModule } from '@angular/platform-browser';
3. import { AppComponent } from './app.component';
4. @NgModule({
5. imports: [ BrowserModule ],
6. declarations: [ AppComponent ],
7. bootstrap: [ AppComponent ]
8. })
9. export class AppModule { }

步骤 4 ：启动应用

现在，我们还需要做点什么来让 Angular 加载这个根组件。

添加一个新文件

，内容如下：

app/main.ts

1. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2. import { AppModule } from './app.module';
3. const platform = platformBrowserDynamic();
4. platform.bootstrapModule(AppModule);

这些代码初始化了应用所在的平台，然后使用此平台引导你的 AppModule 。

为什么要分别创建 main.ts 、应用模块 和应用组件的文件呢？

应用的引导过程与 创建模块或者 展现视图是相互独立的关注点。如果该组件不会试图运行整个应用，那么测试它就会更容易。

引导过程是与平台有关的

但我们应该用正确的方式组织 Angular 应用的文件结构。 启动 App 与展现视图是两个相互分离的关注点。 把这些关注点混在一起会增加不必要的难度。 可以通过使用不同的引导器 (bootstraper) 来在不同的环境中启动 AppComponent 。 测试组件也变得更容易，因为不需要再运行整个程序才能跑测试。 让我们多花一点精力来用 “正确的方式” 实现它。

步骤 5 ：定义该应用的宿主页面

在 目录下创建一个 index.html 文件，并粘贴下列内容：

index.html

4. charset="UTF-8">
5. name="viewport" content="width=device-width, initial-scale=1">
6. rel="stylesheet" href="styles.css">
9. src="node_modules/core-js/client/shim.min.js">
10. src="node_modules/zone.js/dist/zone.js">
11. src="node_modules/reflect-metadata/Reflect.js">
12. src="node_modules/systemjs/dist/system.src.js">
14. src="systemjs.config.js">
19. Loading...

这里值得注意的地方有：

• JavaScript 库： core-js 是为老式浏览器提供的填充库， zone.js 和 reflect-metadata 库是 Angular 需要的，而 SystemJS 库是用来做模块加载的。
• SystemJS 的配置文件和一段脚本，它导入并运行了我们刚刚在 main 文件中写的 app 模块。
•  中的  标签是 应用程序生活的地方！

添加一些样式

样式不是必须的，但能让应用更漂亮。 index.html 中假定有一个叫做 styles.css 的样式表。

在 project root 目录下创建一个 style.css 文件，并且用下面列出的最小化样式作为初始样式。

styles.css (excerpt)

/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;}
body {
  margin: 2em;}

要查看本文档中所用到的主样式表的完整集合，参见 styles.css

Step 6: Build and run the application

打开终端窗口，并输入如下命令：

npm start

到 这里 了解更多关于 package.json 中其它脚本的知识。

该命令会同时运行两个并行的 node 进程：

• TypeScript 编译器运行在监听模式。
• 一个名叫 lite-server 的静态文件服务器，它把 index.html 加载到浏览器中，并且在该应用中的文件发生变化时刷新浏览器。

稍后，一个浏览器页标签就会打开并显示出来。

Step 7: Make some live changes

尝试把 app/app.component.ts 中的消息修改成 "My SECOND Angular 2 App" 。

TypeScript 编译器和 lite-server 将会检测这些修改，重新把 TypeScript 编译成 JavaScript ，刷新浏览器，并显示修改过的消息。

当终止了编译器和服务器之后，可以关闭 terminal 窗口。

收工，下一步

项目的最终目录结构看起来是这样的：

angular2-quickstart

app

app.component.ts

app.module.ts

main.ts

node_modules ...

typings ...

index.html

package.json

styles.css

systemjs.config.js

tsconfig.json

typings.json

要查看文件的内容，请打开 live example 。

下一步干什么？

第一个应用没做什么，它只是一个 Angular 2 的 "Hello, World" 而已。

我们写了一个很小的 Angular 组件，创建了一个简单的 index.html ，并且启动了一个静态文件服务器。

我们还设置了一个基本的应用环境，你可以把它用在本指南的其它部分。以后，我们对  package.json 和  index.html 的修改将仅限于添加库或一些 css 样式，不用再需要修改模块加载部分。