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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
js调试工具Console命令详解
Oct 21 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
实现无刷新联动例子汇总
May 20 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
微信小程序签到功能
Oct 31 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
JS实现字体选色板实例代码
2013/11/20 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
原生JS实现自定义滚动条效果
2020/10/27 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
python2.7实现邮件发送功能
2018/12/12 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
详解python itertools功能
2020/02/07 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
恶意软件的定义
2014/11/12 面试题
接口可以包含哪些成员
2012/09/30 面试题
服务承诺书怎么写
2014/05/24 职场文书
宣传普通话标语
2014/06/27 职场文书
庆七一宣传标语
2014/10/08 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
开票证明
2015/06/23 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
解决Oracle数据库用户密码过期
2022/05/11 Oracle