AngularJS2.0旧版

本文的内容已经过期了，Angular2现在已经完全基于TypeScript开发了

环境搭建

疑问：Angular不就是一个框架么，搞什么环境搭建，不是像angular1那样引入一个angular.js就搞定了么？

Angular2.x与Angular1.x是雷锋与雷峰塔的区别
Angular2.x是不兼容Angular1.x的，所在在框架的构造上，它们是完全不同的
在Angular2.x中，因为其是基于ES6来开发的，所以会有很多第三方依赖。由于很多浏览器还不支持ES6，所以Angular2引入了很多polyfill或者shim, 导致我们引入了第三方依赖。
通俗的讲：就是通过一些第三方依赖，将基于ES6的语法文件解析成ES5语法文件，使浏览器能支持Angular2.X。

Hello World

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Angular2 Hello world</title>
</head>

<body>

    <sample-app>正在加载中...</sample-app>

    <!-- ES6-related imports -->
    <script src="lib/traceur-runtime.js"></script>
    <script src="lib/es6-module-loader-sans-promises.src.js"></script>
    <script src="lib/extension-register.js"></script>
    <script src="lib/reflect.js"></script>
    <script>
    register(System);
    </script>

    <!-- Angular2-related imports -->
    <script src="lib/zone.js"></script>
    <script src="lib/long-stack-trace-zone.js"></script>
    <script src="lib/angular2.js"></script>

    <!-- Application bootstrap logic -->
    <script>
    System.import('app')
        .then(function(app) {
            app.main();
        }, function(e) {
            console.error('Boostrap angular2 failed!', e);
        });
    </script>
</body>
</html>

运行Angular2不容易

官方的文档，不知道写的什么，你按照那个，很难跑起来。而且和Angular2的版本还不同步，因为它在不断更新中，官方文档会相对比较旧点。

现在我们关注的是：这些乱七八糟的js文件从哪里来的？我应该从哪里找到这些玩意。

gulp

首先先解释一下gulp。
按照官方的说法，它是基于数据流的构建系统，主要增强工作流程的自动化。
通过gulp，我们可以自动化这些过程，一个命令，就全部搞定了

详情见gulp开发教程
或者gulp的中文站点都是不错的文章

要使用gulp，首先得安装gulp。gulp 是基于node.js开发的，必须先配置好node.js环境，然后才能安装gulp。只需要：
npm install gulp -g

也就是说，我们得有一个gulpfile.js，这个文件定义了我们需要完成的任务，然后通过执行gulp命令即可。

gulpfile.js定义的任务都是靠gulp.task这个函数来完成的。如下：
‘use strict’;

var gulp = require('gulp'),
    del = require('del'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename'),
    traceur = require('gulp-traceur');


var connect = require('gulp-connect'),
    open = require('gulp-open'),
    port = 3456;

var PATHS = {
    src: {
        js: 'src/**/*.js',
        html: 'src/**/*.html'
    },
    lib: [
        'node_modules/gulp-traceur/node_modules/traceur/bin/traceur-runtime.js',
        'node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.src.js',
        'node_modules/systemjs/lib/extension-register.js',
        'node_modules/angular2/node_modules/zone.js/dist/zone.js',
        'node_modules/angular2/node_modules/zone.js/dist/long-stack-trace-zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/reflect-metadata/Reflect.js.map',
    ]
};


gulp.task('watch', function() {
    gulp.watch(PATHS.src.js, ['js']);
    gulp.watch(PATHS.src.html, ['html']);
});

gulp.task('js', function() {
    return gulp.src(PATHS.src.js)
        .pipe(rename({
            extname: ''
        })) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
        .pipe(plumber())
        .pipe(traceur({
            modules: 'instantiate',
            moduleName: true,
            annotations: true,
            types: true,
            memberVariables: true
        }))
        .pipe(rename({
            extname: '.js'
        })) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
        .pipe(gulp.dest('dist'));
});

gulp.task('html', function() {
    return gulp.src(PATHS.src.html)
        .pipe(gulp.dest('dist'));
});

gulp.task('angular2', function() {

    var buildConfig = {
        paths: {
            "angular2/*": "node_modules/angular2/es6/prod/*.es6",
            "rx": "node_modules/angular2/node_modules/rx/dist/rx.js"
        },
        meta: {
            // auto-detection fails to detect properly here - https://github.com/systemjs/builder/issues/123
            'rx': {
                format: 'cjs'
            }
        }
    };

    var Builder = require('systemjs-builder');
    var builder = new Builder(buildConfig);

    return builder.build('angular2/angular2', 'dist/lib/angular2.js', {});
});

gulp.task('libs', ['angular2'], function() {
    var size = require('gulp-size');
    return gulp.src(PATHS.lib)
        .pipe(size({
            showFiles: true,
            gzip: true
        }))
        .pipe(gulp.dest('dist/lib'));
});



gulp.task('connect', function() {
    connect.server({
        root: __dirname + '/dist',
        port: port,
        livereload: true
    });
});

gulp.task('open', function() {
    var options = {
        url: 'http://localhost:' + port,
    };
    gulp.src('./index.html')
        .pipe(open('', options));
});

gulp.task('build', ['js', 'html'])
gulp.task('default', ['build', 'libs']);
gulp.task('serve', ['connect', 'open']);
gulp.task('clean', function(done) {
    del(['dist'], done);
});

上面这个gulpfile.js文件，我简单说下它的功能：

对angular2源码进行转换，将es6代码转换为es5代码，然后合并成angular2.js，放入dest/lib目录
将angular2的第三方依赖放入dest/lib目录
自动监测用户写的代码，当文件发生修改时，自动将其编译为es5代码，然后放入dest目录
开启一个本地服务器，让用户访问http://localhost:3456/ 就可以看到页面效果
删除dest目录

如果我们想构建angular2及其所有的依赖文件，只需要在命令行下输入以下代码：
gulp // gulp其实相当于运行gulp default, Gulp有一个默认的任务就是default

gulp serve // 在新一个终端运行该命令，开启本地服务器

运行上面的命令，大家会看到错误。因为在Gulpfile.js中引入一些第三方插件，而且还没有看到angular2的代码。所以接下来，我们需要下载angular2代码和第三方依赖。

2.下载相关文件

直接定义一个package.json文件，定义好所需的依赖和版本。
然后在目录下运行 npm install，程序就会自动下载好相关文件，并且放到 node_modules文件夹。
再运行gulp命令就可以正常运行了，这样运行Angular2所需要的必要条件都满足了。

package.json文件：

{
  "name": "angular2-seed",
  "version": "0.2.0",
  "description": "",
  "main": "index.js",
  "author": "flyingzl(flyingzl@gmail.com)",
  "repository": {
    "type": "git",
    "url":  "https://github.com/flyingzl/angular2-seed"
  },
  "license": "MIT",
  "devDependencies": {
    "del": "~1.1.1",
    "gulp": "~3.8.10",
    "gulp-connect": "^2.2.0",
    "gulp-plumber": "^1.0.0",
    "gulp-open": "^0.3.2",
    "gulp-rename": "~1.2.0",
    "gulp-size": "^1.2.1",
    "gulp-traceur": "0.17.*",
    "systemjs-builder": "^0.10.3",
    "through2": "~0.6.3"
  },

  "dependencies": {
    "angular2": "2.0.0-alpha.25",
    "es6-module-loader": "0.16.5",
    "systemjs": "0.16.7",
    "reflect-metadata": "0.1.0"
  }
}

运行结果：

其实 webpack 更佳 systemjs 不推荐