详解如何使用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 相关文章推荐
Javascript Object.extend
May 18 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
微信小程序自定义组件
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中的生成XML文件的4种方法分享
2012/10/06 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
javascript中的new使用
2010/03/20 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python实现简单温度转换的方法
2015/03/13 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Python如何根据时间序列数据作图
2020/05/12 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
个人租房协议书
2014/04/09 职场文书
机械机修工岗位职责
2014/08/03 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫