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 产生了兴趣。
请发表评论