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 相关文章推荐
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
php查询操作实现投票功能
2016/05/09 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python并行分布式框架Celery详解
2018/10/15 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
python实现经典排序算法的示例代码
2021/02/07 Python
美国Max仓库:Max Warehouse
2020/05/31 全球购物
教师绩效考核方案
2014/01/21 职场文书
社区戒毒工作方案
2014/06/04 职场文书
师德师风事迹材料
2014/12/20 职场文书
华山导游词
2015/02/03 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
python 中yaml文件用法大全
2021/07/04 Python
python元组打包和解包过程详解
2021/08/02 Python