使用webpack+es6开发angular1.x的案例

这篇文章给大家分享的是有关使用webpack+es6开发angular1.x的案例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

虽然，现在越来越多的人选择使用react、vue以及ng2，但是依然存在相当一部分人在使用angular1.x开发。本文将介绍如何使用webpack+es6+angular1.x+$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" rel="external nofollow" >home</a>    <a href="#router" rel="external nofollow" >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>

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

感谢各位的阅读！关于“使用webpack+es6开发angular1.x的案例”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！