详解如何使用webpack+es6开发angular1.x_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-11 02:49:16 点击率：次

虽然，现在越来越多的人选择使用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>

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

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

# angular # es6 # webpack # angular1 # 详解webpack+es6+angular1.x项目构建 # es6+angular1.X+webpack 实现按路由功能打包项目的示例 # 加载 # 就不 # 自定义 # 的人 # 要在 # 第二个 # 写了 # 大同小异 # 报错 # 或者其他 # 那是因为 # 如何使用 # 创建一个 # 大家多多 # 器中 # 目录下 # html # raw # exclude # node_modules

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：了解常见的Linux服务器攻击类型：防范策略和建议

下一篇：怎么把Win11降级到Win10 Win11回退到Win10

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：了解常见的Linux服务器攻击类型：防范策略和建议

下一篇：怎么把Win11降级到Win10 Win11回退到Win10