虽然，现在越来越多的人选择使用react、vue以及ng2，但是依然存在相当一部分人在使用angular1.x开发。本文将介绍如何使用webpack+es6+angular1.x+$oclazyLoad实现动态加载。
1.webpack
webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
home: [
'babel-polyfill','./app/app.js' //引入文件
],common: [
'babel-polyfill','angular','angular-ui-router','oclazyload'
]
},output: {
path: path.join(__dirname,'/wap'),filename: '[name].js',chunkFilename: '[id].build.js?[chunkhash]',publicPath: '/wap/',},module: {
loaders: [
{
test:/.js?$/,loader:'ng-annotate-loader!babel-loader',exclude:/node_modules/
},{
test: /.html$/,loader: 'raw-loader',exclude: /node_modules/
},]
},resolve: {
root: ['node_modules'],extensions: ['','.js','.html','.json'],modulesDirectories: ['node_modules'],alias: {}
},externals: {},plugins: [
new webpack.HotModuleReplacementPlugin(),new ExtractTextPlugin('[name].[contenthash:20].css'),new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false},sourceMap: true
}),new webpack.optimize.CommonsChunkPlugin('common','common.js')
]
}
2.Module
第一步，先引入angular ，以及相关模块，然后像es5中那样定义一个模块
app.js
模块与模块之间引用
我们建立第二个模块 header/index.js
修改app.js
模块的引用完成
3.控制器
假设在header目录下新增一个控制器
header/controller.js
引用控制器 修改 header/index.js
4.服务
如果要在控制器内使用$scope,或者其他服务肯定是报错的,那是因为我们在使用之前没有注入服务
所以第一步应该注入服务
header/controller.js
那么如何自定义服务呢？
新建 header.server.js
header/index.js
在控制器中使用自定义服务
header/controller.js
5.指令
新建 footer/index.js 大致和 header/index.js相同
将 footer模块 引入到 app.js
新建footer/directive.js