基于webpack构建的angular 1.x工程(angular篇)
基于webpack构建的angular 1.x工程(angular篇)??上一篇基于webpack构建的angular 1.x 工程(一)webpack篇里我们已经成功构建了整个项目的打包配置。接下来我们要继续让angular在工程里跑起来。 首先要知道怎么改写之前的工程由于是用gulp打包的,具体原理我不太懂,不过貌似会把所有的js自动注入到index.html中。由于js很多,所以为了不互相干扰,产生全局变量污染的问题,它里面所有angular都是用立即执行函数表达式(IIFE)来写的: (function(){ 'use strict'; angular.module("app.core",[ 'ngCookies','angular-cache' ]); })(); ??这样的写法在webpack是不必要的了,webpack是根据js之间的依赖关系来加载打包项目的。不同的模块之间webpack都会有标识来标志,所以不会说存在干扰和污染的问题。那我们应该怎么写呢?要写成AMD/CMD规范形式的。为了方便理解,我们把立即执行函数表达式去掉,改成这样的: const ngCookies = require('angular-cookies') const ngCache = require('angular-cache') module.exports = angular.module("app.core",[ ngCookies,ngCache ]); ??这个是符合webpack要求的写法。首先先引入我们需要的模块,然后编写我们的模块,最后输出我们要暴露给外部调用的接口。于是我就把所有IIFE都改成了这种形式。 controller那些要怎么办?接下来问题就来了,在同一个angular应用模块(module)中,各个控制器(controller)、过滤器(filters)、服务(services)等之间都是并列的兄弟关系,都是从属于模块。那我们应该来处理这些关系呢?经过查阅过别人的项目之后,我发现其实有两种写法:
module.exports =function mainCtrl($scope,$http,$stateParams,$state,$rootScope,$filter) { // your controller goes here }
angular.module("app",[]) .controller("mainCtrl",[$scope,$filter,require('./main.controller')]); ??这样的其实也可以输出一个数组,像这样:
module.exports =[[$scope,function mainCtrl($scope,$filter) { // your controller goes here }] ??相对应的,主要入口要这样写:
angular.module("app",require('./main.controller')); ??这样的写法适合从头开始的项目,好处是分的比较清晰。
每个模块在angular里注册之后,都会在angular里找得到。 angular.module("app") .controller("mainCtrl",mainCtrl($scope){ // your controller goes here }]); ??也就是说,我只要引用了这段代码,也算把这段代码运行了。
module.exports = angular.module("app") .controller("mainCtrl",mainCtrl($scope){ // your controller goes here }]);
angular.module("app",[]) require('./main.controller') ??在 module.exports = angular.module("app",[]); //把所有js文件引入 function importAll (r) { r.keys().forEach(r); } importAll(require.context('./',true,/.js$/)); ??这样就解决了那些controller,filters等的问题。具体 模块之间引用的问题??当我们往我们的模块注入其他模块(自己写的或者angular插件)的时候,这个环节也有些要注意的地方。
module.exports = angular.module("app.core",[]) ??这里其实输出的是angular的模块,并不是模块的名字。如果我们直接引用的话,像这样:
var appCore = require('./modules/appCore.module.js') module.exports = angular.module("app",[appCore]); ??这样的话,angular就会报错: Error: [ng:areq] Argument 'module' is not a function,got Object ??要解决这个问题其实很简单,只要调用angular的
module.exports = angular.module("app.core",[]).name ??或者这样改:
var appCore = require('./modules/appCore.module.js') module.exports = angular.module("app",[appCore.name]); ??两种方法选一个执行即可。 ??其实如果是插件的话,你在 插件注入的另一种问题??上面提到的是插件注入可能会遇到的问题之一。然而还有一种情况。 以上就是用webpack打包angular 1.x 的时候写angular所需要注意的地方。如果想看webpack的配置可以查看我前一篇文章: 基于webpack构建的angular 1.x 工程(一)webpack篇 用于参考的一位前辈的类似项目,让大家也参考一下: 想看详细代码,可以访问我的项目地址 有什么问题或者不对的地方欢迎指出,谢谢阅读! 本文原创,未经授权请勿转载。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |