使用 webpack 写 angular

webpack 是一款 js 模块管理工具, 能使用 commonjs 或者 es6 方式来管理 js 模块, 利用其 loader 插件还能做一些炫酷的事情, 比如利用 babel-loader 就能放心大胆的使用 es6 的新特性, 或者利用 jsx-loader 自动转换 jsx 为 js 文件.

配置 webpack

主要配置 babel-loader, 能让 webpack 自动把 es6 代码转换为 es5 代码

module.exports = {
    ...
    resolveLoader: {
        modulesDirectories: ['node_modules']
    },
    resolve: {
        extensions: ['', '.js']
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel?presets[]=es2015',
                exclude: /(node_modules|lib)/
            }
        ]
    }
    ...
}

如果你打算把 angular 作为单独的库文件在页面中引入的话, 别忘了加入 externals 配置中

...
externals: {
    'angular': 'angular'
}
...

使用 es6 class 作为 controller

es6 终于加入了 class 关键词, 可以愉快的使用 class 了

export default class HomeController {
  constructor() {
    this.name = "home";
  }

  getName() {
    return this.name;
  }
}

angular.module("app", []).controller("HomeController", HomeController);

异步加载 controller

angular.module('app', []).config(function($locationProvider){
    $locationProvider
    .when('/', function(){
        templateUrl: require('file!../templates/index.html'),
        resolve: {
            load: function(){
                return new Promise(function(resolve, reject){
                    require.ensure([], function(require){
                        require('../controllers/home.js');
                        resolve();
                    });
                });
            },
        },
        controller: 'HomeController',
        controllerAs: 'vm'
    })
})