大佬教程收集整理的这篇文章主要介绍了基于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都改成了这种形式。
接下来问题就来了,在同一个angular应用模块(module)中,各个控制器(controller)、过滤器(filters)、服务(services)等之间都是并列的兄弟关系,都是从属于模块。那我们应该来处理这些关系呢?经过查阅过别人的项目之后,我发现其实有两种写法:
@H_183_7@module.exports =function mainCtrl($scope,$http,$stateParams,$state,$rootScope,$filter) { // your controller goes here }angular.module("app",[]) .controller("mainCtrl",[$scope,$filter,require('./main.controller')]);@H_183_7@module.exports =[[$scope,function mainCtrl($scope,$filter) { // your controller goes here }]
相对应的,主要入口要这样写:
angular.module("app",require('./main.controller'));
这样的写法适合从头开始的项目,好处是分的比较清晰。
但是对于我这个重构的项目,就会有麻烦:要改写的文件有太多了。
这么麻烦,我只能抛弃这种方式。
每个模块在angular里注册之后,都会在angular里找得到。
这样的话,只要确保运行下面这段@L_674_20@即可:
angular.module("app") .controller("mainCtrl",mainCtrl($scopE){ // your controller goes here }]);
也就是说,我只要引用了这段@L_674_20@,也算把这段@L_674_20@运行了。
那这样的我就可以这样写:
angular.module("app",[]) require('./main.controller')
在@H_338_57@main.controller.js我直接输出的是angular声明app模块的controller,然后在index.js
定义模块之后,把这个文件引入之后,就相当于同时声明了这个controller,免去大量改动@L_674_20@的麻烦。不过另一个问题出现了:我这里虽然免去了大量改动@L_674_20@的麻烦,但是我那么多的controller,真的要一一写路径来引用吗?这样还是麻烦啊。不要惊慌。webpack已经预想到你这有这个问题了,特意写了一个可以引用大量文件的方法给你:require.context
。这个方法可以让你查询指定路径的指定文件类型,然后引用进来。我们这里由于已经分类放好了,所有的controller都放在/app/module
目录下面,因此查找也是轻而易举的事。所以我们的index.js
可以写成这样:
这样就解决了那些controller,filters等的问题。具体require.context
的用法[参考这里]()
当我们往我们的模块注入其他模块(自己写的或者angular插件)的时候,这个环节也有些要注意的地方。
首先,我们知道,angular注入其他模块的时候,其实只需要写注入模块的名字就可以了,angular可以自行去寻找相应的模块。这样的话,我们像上面那样写的模块声明,直接输出其实会有问题:
这里其实输出的是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的.name
方法就可以了,所以上面可以改写成这样:
或者这样改:
var appCore = require('./modules/appCore.module.js') module.exports = angular.module("app",[appCore.name]);
其实如果是插件的话,你在npm
安装的插件一般都不用担心这个问题,毕竟人家早就想到会有这个问题了。但是如果是其他途径弄来的话,这个就复杂了。
上面提到的是插件注入可能会遇到的问题之一。然而还有一种情况。
这种情况就是插件也使用了IIFE(立即执行函数表达式)。听起来就很烦。自己的@L_674_20@,自己知道怎么写的,所以改起来不会怎么出问题,但是别人的@L_674_20@的话就不一定了。为了避免错误,我选择不改动插件的@L_674_20@。而是,直接在打包的时候分开打包,然后直接注入的时候写上插件名字即可以注入成功。详细可以看我的webpack配置。
以上就是用webpack打包angular 1.x 的时候写angular所需要注意的地方。如果想看webpack的配置可以查看我前一篇文章:
基于webpack构建的angular 1.x 工程(一)webpack篇
用于参考的一位前辈的类似项目,让大家也参考一下:
https://github.com/IamBusy/webpack-angular
想看详细@L_674_20@,可以访问我的项目地址
@L_772_62@
有什么问题或者不对的地方欢迎指出,谢谢阅读!
本文原创,未经授权请勿转载。
以上是大佬教程为你收集整理的基于webpack构建的angular 1.x工程(angular篇)全部内容,希望文章能够帮你解决基于webpack构建的angular 1.x工程(angular篇)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。