如何使用webpack+es6开发angular1

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

1.webpack配置

2.模块定义与引用

3.控制器定义与引用

4.服务的定义

5.指令

6.路由

6.demo 使用 oclazyLoad实现动态加载

1.webpack

webpack.config.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

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

模块与模块之间引用

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

import angularfrom 'angular';
export default  angular.module('header',[]).name

修改app.js

import header from './header'
angular.module('app',[ uirouter，ocLazyLoad , header])

模块的引用完成

3.控制器

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

header/controller.js

export default class HeaderController {
         consturctor(){
                 this.home = 'header'
           }
}

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

import  HeaderController from './controller'
export default  angular.module('header',[ ])
     .controller('HeaderController',HeaderController)
     .name

4.服务

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

所以第一步应该注入服务

header/controller.js

export default class HeaderController {
      consturctor($scope){
             this.home = 'header'
             $scope.component = 'head'
       }
}
HeaderController.$inject = ['$scope']

那么如何自定义服务呢？

新建 header.server.js

class HeaderServices {
         constructor(){
                   this.name = 'cxh'
          }
          getName(){
                   return  this.name
          }
}

header/index.js

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

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

header/controller.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

export default class Footer {
          constructor(){
                   this.restrict = 'E',
                   this.scope = {},
                   this.template = "<div  ng-click='alert()'>footer</div>"
                   this.controller = Foot
                   this.link = (scope, element, attr) => {}
         }
}
class Foot{
             constructor(){
                  $scope.alert = () => {  alert(1) }  
              }
}
Header.$inject = ['$scope']

footer/index.js

export default angular.module('footer',[])
.directive('footerDirective',()=> new Footer)
.name

6.路由

router.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

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

export default function routing($stateProvider, $urlRouterProvider) {
  'ngInject';  //注入服务 就不需要使用$inject了
  $stateProvider
     .state("home",{
            url:"/home",
            templateProvider: ($q) => {      //动态引入html模板
               'ngInject';
               let deferred = $q.defer();
               require.ensure([], function () {
                   let template = require('./home/home.html');
                   deferred.resolve(template);
                });
                return deferred.promise;
             },
             controller: "HomeController",
             controllerAs:"HMC",
             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",
          templateProvider: ($q) => {      //动态引入html模板
               'ngInject';
                let deferred = $q.defer();
                require.ensure([], function () {
                       let template = require('./router/router.html');
                       deferred.resolve(template);
                 });
                 return deferred.promise;
           },
           controller: "routerController",
           controllerAs:"RTC",
           resolve: {           //动态加载模块
                 loadMyCtrl: function ($q, $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

import angular from "angular";
import header from './directive';
export default angular.module('app_header',[])
         .directive('header', () => new header)
         .name;

header/directive.js

class Header {
  constructor($scope){
    'ngInject';
    $scope.isshow = false;
  }
}
export default class header {
    constructor() {
       this.restrict = 'E',
       this.scope = {},
       this.template = require(./header.html) 
       this.controller = Header
       this.link = (scope, element, attr) => {}
   }
}

header/header.html

<div>
     <a href="#home" >home</a>
     <a href="#router">router</a>
</div>

4.home

home/index.js

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

home/controller.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

<div>home {{HMC.eage}} -- {{edg}}</div>

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