Angular2 快速入门（TypeScript + Webpack）

2016年9月底，谷歌发布了 Angular2 的正式版，可谓众望所归。相比 Angular1.x，Angular2 有了质的改变，组件化（Component）是它的核心灵魂。

本文将从一个简单的 QuickStart 开始，带你进入 Angular2 的世界。内容以 Angular 官网的快速指南为准，不同之处是我们在这里使用了 webpack 作为模块加载器对源码编译打包，而不是官网使用的 System.js，如果你有选择困难症千万别纠结，只要达到目的尽管使用你熟悉的模块加载器吧。

下面我们一起来搭建这个 QuickStart 应用，让页面显示一条消息：”My First Angular App”。整个示例过程需要你有一些耐心，打开你的编辑器开始 coding 吧。

本文源码：angular2-quickstart

1. 开发环境和工具准备

关于 IDE，我用的是公认的前端开发神器 Webstrom，当然 Atom 或 Sublime 也很不错。命令行工具推荐使用 git-bash。

环境方面需要 node v5.x.x 或更高版本以及 npm 3.x.x 或更高版本，

如果你还没有安装 node.js，去 node.js官网下载。

2. 创建本地项目目录

mkdir angular2-quickstart
cd angular2-quickstart

3. 创建 package.json

npm init

npm init 命令会创建一个默认的 package.json 文件，如果你没用过，没关系只需要根据命令行提示一步一步填上相关信息，或直接每次按回车就行。

在IDE里修改默认的 package.json 内容，如下：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "./node_modules/.bin/typings install"
  },
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "@angular/upgrade": "~2.1.0",

    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "ts-loader": "^0.8.2",
    "typescript": "^2.0.3",
    "typings": "^1.4.0",
    "path": "^0.12.7",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  }
}

简单解释下，dependencies 是运行时所需要的依赖，devDependencies 是开发时所需要的依赖，@angular 是 Angular 的核心库，Angular2 将它分成了很多包，这样方便开发者灵活的按需引入。

reflect-metadata、rxjs、zone.js 这些都是为 Angular 提供核心功能支持，这里就不做详细说明了。

webpack-dev-server 是支持 webpack 的静态服务器调试工具，它可以实时监控项目中文件，文件改动后使浏览器自动刷新或进行热替换。

ts-loader 是 webpack 将 TypeScript 编译成 ES5 的编译器，本文里我们使用 TypeScript 来写例子，它也是 Angular 官方推荐的开发语言。

typings 是 TypeScript 定义的文件管理系统

4. 创建其他配置文件：tsconfig.json 和 typings.json

创建 tsconfig.json（定义 TypeScript 编译成 ES5 的参数）：

touch tsconfig.json

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

创建 typings.json

touch typings.json

{
  "globalDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504"
  }
}

5. 安装所有依赖包

OK，现在运行 npm install 安装 package.json 里所有的依赖包，过程可能会有些慢（如果你开了 VPN 就不存在这问题），这里推荐使用淘宝镜像命令加快安装速度 cnpm install

npm install

安装完后，你的项目目录应该是这样：

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

npm run typings install

6. 创建应用入口

NgModules 把 Angular 应用组织成了一些功能相关的代码块。 Angular 本身也被拆成了一些独立的 Angular 模块。这让你可以只导入你应用中所需的 Angular 部件，以得到较小的文件体积。每个 Angular 应用都至少有一个模块：根模块，在这里它叫做 AppModule 。

在项目目录中创建 app 子目录，接着在 app 目录下创建 app.module.ts

mkdir app
touch app/app.module.ts

在刚创建的 app.module.ts 文件中添加下面代码：

// zone 为异步任务提供hook支持，主要应用于提高脏检查效率和降低性能损耗
// reflect-metadata 为Decorator提供反应射API，注意:Decorator是ES6的提案
import \'zone.js/dist/zone\';
import \'reflect-metadata\';

// 引入NgModule装饰器
import { NgModule } from \'@angular/core\';

// 引入浏览器模块
import { BrowserModule } from \'@angular/platform-browser\';

@NgModule({
    imports: [ BrowserModule ]
})

export class AppModule {}

这个文件是整个应用的入口，由于应用需要运行在浏览器中，所以需要从 @angular/platform-browser 中导入BrowserModule，并将它添加到 imports 数组中。

7. 创建组件，并添加到应用中

每个 Angular 应用都至少有一个根组件，整个应用由一个个组件组成，而组件化（Component）则是 Angular 的核心灵魂。

创建组件 AppComponent，即文件 app.component.ts，在其中添加代码：

touch app/app.component.ts

import { Component } from \'@angular/core\';

// 为 AppComponent 组件类添加注解
@Component({
  selector: \'my-app\',
  template: \'<h1>My First Angular App</h1>\'
})

export class AppComponent {}

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

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

class AppComponent 之所以是空的，因为我们的例子不需要应用逻辑。

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

// zone 为异步任务提供hook支持，主要应用于提高脏检查效率和降低性能损耗
// reflect-metadata 为Decorator提供反应射API，注意:Decorator是ES6的提案
import \'zone.js/dist/zone\';
import \'reflect-metadata\';

// 引入NgModule装饰器
import { NgModule } from \'@angular/core\';

// 引入浏览器模块
import { BrowserModule } from \'@angular/platform-browser\';

// 引入组件AppComponent
import { AppComponent } from \'./app.component\';

@NgModule({
    imports: [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})

export class AppModule {}

8. 启动应用

创建 main.ts 让 Angular 加载这个根组件，在其中添加如下代码：

touch app/main.ts

// 引入启动器
import { platformBrowserDynamic } from \'@angular/platform-browser-dynamic\';

// 引入入口文件
import { AppModule } from \'./app.module\';

// 启动应用
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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

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

9. 创建应用的宿主页面 index.html

在目录下创建 index.html 文件：

touch index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular2 QuickStart</title>
</head>
<body>
    <!-- 对应 @Component({ selector: \'my-app\', ... }) -->
    <my-app></my-app>

    <!-- 编译打包后的文件 -->
    <script src="dist/bundle.js"></script>
</body>
</html>

10. 创建 webpack.config.js

我们使用 webpack 作为编译打包工具，就需要创建 webpack.config.js

touch webpack.config.js

在 webpack.config.js 中添加代码：

var path = require(\'path\');

module.exports = {
    entry: {
        main: \'./app/main.ts\'
    },
    output: {
        path: path.resolve(__dirname, \'dist\'),
        publicPath: \'/dist/\',
        filename: \'bundle.js\'
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: \'ts\'
            }
        ]
    },
    // require 文件时可省略后缀 .js 和 .ts
    resolve: {
        extensions: [\'\', \'.js\', \'.ts\']
    },
    // 配置 webpack-dev-server
    devServer:{
        historyApiFallback: true,
        hot: true,
        inline: true,
        port: 9090 // 修改端口，一般默认是8080
    }
};

修改 package.json 在其中添加 start 命令：

( package.json 的其他部分这里做了省略 )

{
  "scripts": {
    "start": "webpack-dev-server --inline --hot --colors --progress",
    "postinstall": "./node_modules/.bin/typings install"
  },
}

一切就绪，先不急着启动 webpack-dev-server，初学者经常遇到的坑，关于 webpack-dev-server 无法让浏览器在代码修改后进行热替换，首页要确保是否全局安装了 webpack-dev-server，如果没有就运行下面命令：

npm install webpack-dev-server -g

更重要的是 webpack-dev-server 只会将静态文件打包在内存中而非你的磁盘里这是为了方便开发环境调试，所以初学者会疑惑为什么运行了 webpack-dev-server，dist 文件夹下确无文件产生，想产生文件就运行 webpack。

10. 大工告成，走起！

在命令行输入：

npm start

git-bash 显示：

在浏览器打开 http://localhost:9090/index.html，就会看到我们的第一个 angular2 应用了：

你也可以尝试在 app.component.ts 中将 “My First Angular App” 修改成别的文字，浏览器会自动进行热替换，是不是有一些成就感。

相信通过这个快速指南，你已经对 Angular2 产生了兴趣。

Angular2 快速入门（TypeScript + Webpack） - Jean-Xu