详解如何使用webpack+es6开发angular1.x

虽然，现在越来越多的人选择使用react、vue以及ng2，但是依然存在相当一部分人在使用angular1.x开发。本文将介绍如何使用webpack+es6+angular1.x+$oclazyLoad实现动态加载。

1.webpack

webpack.config.js

rush:js;"> var path = require('path');

var webpack = require('webpack');

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

rush:js;"> import angular from 'angular'; import uirouter from 'angular-ui-router'; import ocLazyLoad from 'oclazyLoad'; angular.module('app',[ uirouter，ocLazyLoad ])

模块与模块之间引用

我们建立第二个模块 header/index.js

rush:js;"> import angularfrom 'angular'; export default angular.module('header',[]).name

修改app.js

rush:js;"> import header from './header' angular.module('app',[ uirouter，ocLazyLoad,header])

模块的引用完成

3.控制器

假设在header目录下新增一个控制器

header/controller.js

rush:js;"> export default class HeaderController { consturctor(){ this.home = 'header' } }

引用控制器 修改 header/index.js

rush:js;"> import HeaderController from './controller' export default angular.module('header',[ ]) .controller('HeaderController',HeaderController) .name

4.服务

如果要在控制器内使用$scope,或者其他服务肯定是报错的,那是因为我们在使用之前没有注入服务

所以第一步应该注入服务

header/controller.js

rush:js;"> export default class HeaderController { consturctor($scope){ this.home = 'header' $scope.component = 'head' } } HeaderController.$inject = ['$scope']

那么如何自定义服务呢？

新建 header.server.js

rush:js;"> class HeaderServices { constructor(){ this.name = 'cxh' } getName(){ return this.name } }

header/index.js

rush:js;"> import HeaderService from './service'; export default angular.module('header',[ ]) .controller('HeaderController',HeaderController) .service('HeaderService',HeaderService) .name

在控制器中使用自定义服务

header/controller.js

rush:js;"> export default class HeaderController { consturctor($scope,HeaderService){ this.home = 'header' $scope.component = 'head' $scope.name = HeaderService.getName } } HeaderController.$inject = ['$scope','HeaderService']

5.指令

新建 footer/index.js 大致和 header/index.js相同

将 footer模块 引入到 app.js

新建footer/directive.js

rush:js;"> export default class Footer { constructor(){ this.restrict = 'E',this.scope = {},this.template = "

footer

" this.controller = Foot this.link = (scope,element,attr) => {} } } class Foot{ constructor(){ $scope.alert = () => { alert(1) } } } Header.$inject = ['$scope']

footer/index.js

new Footer) .name

6.路由

router.js

rush:js;"> export default router ($stateProvider,$urlRouterProvider) { $stateProvider.state("home",{ url:"/home",templateUrl:'app/home/home.html',controller: "HomeController",controllerAs:"HMC",}) $urlRouterProvider.otherwise('/home'); } router.$inject = [ '$stateProvider','$urlRouterProvider']

DEMO 实现动态加载

1.第一步，新建app.js创建一个module

rush:js;"> import angular from 'angular'; import uirouter from 'angular-ui-router'; import ocLazyLoad from 'oclazyLoad'; //引用创建头部 组件 import Header from './header'; //路由 import routing from "./router.js"; //引入两个子模块 import Home from "./homes"; import Router from "./router";

angular.module('app',[uirouter,Header,ocLazyLoad,Home,Router])
.config(routing)

2.配置路由 ./route.js

{ //动态引入html模板 'ngInject'; let deferred = $q.defer(); require.ensure([],function () { let template = require('./home/home.html'); deferred.resolve(template); }); return deferred.promise; },resolve: { //动态加载模块 loadMyCtrl: function ($q,$ocLazyLoad) { 'ngInject'; let deferred = $q.defer(); require.ensure([],() => { let module = require("./home").default; $ocLazyLoad.load({name: module.name}); deferred.resolve(module.controller) }); return deferred.promise; } } }),.state("route",{ url:"/route",function () { let template = require('./router/router.html'); deferred.resolve(template); }); return deferred.promise; },controller: "routerController",controllerAs:"RTC",$ocLazyLoad) { 'ngInject'; let deferred = $q.defer(); require.ensure([],() => { let module = require("./router").default; $ocLazyLoad.load({name: module.name}); deferred.resolve(module.controller) }); return deferred.promise; } } }） $urlRouterProvider.otherwise('/home'); }

3.header

header/index.js

new header) .name;

header/directive.js

{} } }

header/header.html

rush:xhtml;">

home router

4.home

home/index.js

rush:js;"> import angular from "angular"; import HomeController from './controller'; export default angular.module('app_home',[]) .controller('HomeController',HomeController)

home/controller.js

rush:js;"> export default class HomeController { constructor($scope) { 'ngInject'; this.isshow = false; this.eage = 'sds'; $scope.edg = 'sma' } change(){ this.isshow = !this.isshow; console.log(this.isshow); } }

home/home.html

rush:xhtml;">

home {{HMC.eage}} -- {{edg}}

其余的模块大同小异就不依依去写了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。