AngularJS压缩JS技巧分析


Posted in Javascript onNovember 08, 2016

本文实例讲述了AngularJS压缩JS的操作技巧。分享给大家供大家参考,具体如下:

大多数web项目在发布时候都会对js代码进行压缩,目的是为了减少js文件的大小,节省一点流量。

它的原理很简单,就是对参数及部分变量名和函数进行重命名。

但是这种工作方式在AngularJS的应用中会有例外。

由于AngularJS的依赖注入是根据参数名进行注入的,显然,对参数进行重命名会破坏这个机制。

如果不进行特殊处理,进行压缩(minify)之后,在执行时将会出现这样的错误

Unknow provider: aProvider<-a

对于这种错误的官方解释是:找不到依赖的服务

也就是说这种依赖注入会出现错误。

好在AngularJS内置了一种标准机制来处理这个问题.

最简单也最常见的方式就是用数组代替函数。如:

.controller('RegisterCtrl', ['$scope', '$interval', '$timeout', function ($scope, $interval, $timeout) {
  //do something
}]);

数组的最后一个元素始终是一个函数,而前面几个参数都是字符串,和这个函数中的参数一一对应。

另一种形式便是所谓的Annotation方式。

var objCtrl = function($scope, $timeout, $interval){
  // do something
}
//给objCtrl函数增加一个$inject属性,它是一个数组,定义了需要被注入的对象
objCtrl.$inject = ['$scope', '$interval', '$timeout'];

这里的依赖注入形式不仅限于Controller,一切需要DI(依赖注入的directive、factory、services等)都可以采用这两种方式。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 #Javascript
bootstrap fileinput完整实例分享
Nov 08 #Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 #Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 #Javascript
Javascript数组循环遍历之forEach详解
Nov 07 #Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 #Javascript
jQuery webuploader分片上传大文件
Nov 07 #Javascript
You might like
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
CentOS安装php v8js教程
2015/02/26 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
php通过各种函数判断0和空
2020/07/04 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
js获取域名的方法
2015/01/27 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
Python+Wordpress制作小说站
2017/04/14 Python
Python中的默认参数实例分析
2018/01/29 Python
Python 中的lambda函数介绍
2018/10/10 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Python阶乘求和的代码详解
2020/02/14 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
小学生演讲稿大全
2014/04/25 职场文书
学习方法演讲稿
2014/05/10 职场文书
学校欢迎标语
2014/06/18 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
辞职信怎么写
2015/02/27 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
Python实战之疫苗研发情况可视化
2021/05/18 Python