angular2初入眼帘之－搭个环境

angular2是什么？我猜不容我赘述，各位一定略有耳闻，无论是曾经AngularJS的拥趸，亦或是React的粉丝，都或多或少的对她有过一点了解。未见其物、先闻其声，angular2在问世之前已经做足了宣传，想必诸位也一定被下面各种词汇所震慑，什么：TypeScript、 ES5、 ES6、 Dart、 Immutable、 Unidirectional Data Flow、 Reactive Programming、 Decorators、 System.js、 webpack...，天花乱坠，美不胜收！但我们不禁要问，“都说AngularJS学习曲线陡峭，也没陡出这些个莫名词汇！”，angular2究竟该如何上手？看了这些个知识点，有木有吓得手抖，都搞不清从何处入手了！？

本教程主旨：多些操作、少点说教(理论是进阶必须的，千万不要误读)，让我们从实践中追寻真理吧！

本章源码：environment

本章使用angular2版本为：2.4.5, webpack版本为: 2.2.0

创建项目

mkdir environment
cd environment
npm init

根据npm init提问，创建package.json文件，创建后去掉不必要的字段，像这样即可：

{
  "name": "environment",
  "version": "1.0.0",
  "description": "I will show you how to set up angular2 development environment",
  "keywords": [
    "angular2",
    "environment"
  ],
  "scripts": {
    "start": "webpack-dev-server --hot--host 0.0.0.0"
  },
  "author": "Howard.Zuo",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^2.4.5",
    "@angular/compiler": "^2.4.5",
    "@angular/core": "^2.4.5",
    "@angular/platform-browser": "^2.4.5",
    "@angular/platform-browser-dynamic": "^2.4.5",
    "@angular/forms": "^2.4.5",
    "core-js": "^2.4.1",
    "rxjs": "5.0.3",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.35",
    "ts-loader": "^2.0.0",
    "typescript": "^2.1.5",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

安装依赖

npm install

@angular: 这个必须的，没意见吧？之所以分了多个包，这是最新2.1.2的变化，可以按需引入，增加灵活性
core-js: javascript的一个标准库实现，包含了大量ES2015, ES2016的ES5实现
rxjs: 一个Reactive Programming的JavaScript实现。这里对她的依赖是因为angular2支持多种数据更新模式，比如：flux、Rx.js
zone.js: 用来对异步任务提供Hooks支持，使得在异步任务运行之前/之后做额外操作成为可能。在angular2里的主要应用场景是提高脏检查效率、降低性能损耗。
webpack: 我们这里使用webpack2对源码进行编译、打包，而不是用官网介绍的System.js的运行时加载、解释、执行。合并打包的好处不用我多说吧？减少请求数、uglify、预检查...
webpack-dev-server: 一个轻量级的，支持webpack编译的静态服务器(调试工具)，本章节我们就用它启动程序
ts-loader: TypeStrong出品的TypeScript加载器，通过该加载器，TypeScript源码可以顺利被编译成ES5代码
typescript: angular2官方推荐的开发语言，我们在教程里也将使用该语言进行代码编写
@types/core-js: 自typescript 2.0.0以后，使用@types管理声明文件，由于angular2依赖ES2015的诸多特性，譬如：Promise、Map等，所以需要引入这些API的声明

第一个示例

创建`index.html`

touch index.html

向刚才创建的index.html里添加如下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>environment</title>
</head>
<body>
    <!--这里引用我们的第一个component-->
    <my-app></my-app>
    <!--加载使用webpack编译后的bundle-->
    <script type="text/javascript" src="/dist/bundle.js"></script>
</body>
</html>

创建`app.ts`

mkdir ts
touch ts/app.ts

向刚才创建的ts/app.ts里添加如下内容：

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

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

创建`index.ts`

touch ts/index.ts

向刚才创建的ts/index.ts里添加如下内容：

//不显示引入，你会得到"Uncaught reflect-metadata shim is required when using class decorators"的错误
import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

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

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

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

//引入我们刚才创建的第一个component
import { AppComponent }  from './app';

//声明一个应用模块
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
class AppModule { }

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

创建`webpack.config.js`

touch webpack.config.js

向刚才创建的webpack.config.js里添加如下内容：

const {resolve} = require('path');

module.exports = {
    entry: {
        index: './ts/index.ts'
    },
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        exprContextCritical: false,
        rules: [
            {
                test: /\.ts$/,
                use: ['ts-loader']
            }
        ]
    },
    resolve: {
        extensions: [
            '.js',
            '.ts'
        ]
    }
};

创建`tsconfig.json`

touch tsconfig.json

向刚才创建的tsconfig.json里添加如下内容：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "declaration": false
    },
    "buildOnSave": false,
    "compileOnSave": false,
    "exclude": [
        "node_modules"
    ]
}

运行

好了，到目前为止，我们第一个示例的开发/运行环境就基本搭好了，现在启动试试看：

npm start

你会看到：

图片描述

下回预告：牛刀小试component

angular2初入眼帘之－搭个环境

推荐开发工具

vscode

创建项目

安装依赖

第一个示例

创建`index.html`

创建`app.ts`

创建`index.ts`

创建`webpack.config.js`

创建`tsconfig.json`

运行

leftstick

引用和评论

输出一个JavaScript在线机试小工具

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

angular2初入眼帘之－搭个环境

推荐开发工具

vscode

创建项目

安装依赖

第一个示例

创建index.html

创建app.ts

创建index.ts

创建webpack.config.js

创建tsconfig.json

运行

leftstick

引用和评论

输出一个JavaScript在线机试小工具

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

创建`index.html`

创建`app.ts`

创建`index.ts`

创建`webpack.config.js`

创建`tsconfig.json`