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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
node.js使用express-fileupload中间件实现文件上传
Jul 16 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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 程式大小
2006/12/06 PHP
写出高质量的PHP程序
2012/02/04 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Python整数对象实现原理详解
2019/07/01 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
python生成随机红包的实例写法
2019/09/02 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Python远程方法调用实现过程解析
2020/07/28 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
大学运动会通讯稿
2014/01/28 职场文书
活动总结新闻稿
2014/08/30 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技