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 validator 插件增加日期比较方法
Feb 21 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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中文本数据翻页(留言本翻页)
2006/10/09 PHP
php实现的MySQL通用查询程序
2007/03/11 PHP
PHP n个不重复的随机数生成代码
2009/06/23 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
分享python数据统计的一些小技巧
2016/07/21 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
Python 串口通信的实现
2020/09/29 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
Champion官网:美国冠军运动服装
2017/01/25 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
逃课上网检讨书
2014/02/20 职场文书
护士医德考评自我评价
2015/03/03 职场文书
《落花生》教学反思
2016/02/16 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL