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


Posted in Javascript onAugust 16, 2017

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
jQuery实现滚动效果
Nov 17 jQuery
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
微信小程序自定义组件
Aug 16 #Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 #Javascript
微信小程序多列选择器range-key使用详解
Mar 30 #Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 #jQuery
微信小程序tabBar底部导航中文注解api详解
Aug 16 #Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 #Javascript
微信小程序开发animation心跳动画效果
Aug 16 #Javascript
You might like
用PHP产生动态的影像图
2006/10/09 PHP
php5新改动之短标记启用方法
2008/09/11 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
php查询内存信息操作示例
2019/05/09 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
js TextArea的选中区域处理
2010/12/28 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
Python for循环与range函数的使用详解
2019/03/23 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
python中比较两个列表的实例方法
2019/07/04 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
违反校纪校规检讨书
2014/02/15 职场文书
我的求职择业计划书
2014/04/04 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers