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 连续列表实现代码
Dec 21 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
jquery 插件学习(二)
Aug 06 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
JS实现使用POST方式发送请求
Aug 30 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
js自定义回调函数
2015/12/13 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python操作 hbase 数据的方法
2016/12/18 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
np.dot()函数的用法详解
2020/01/17 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
学生自我鉴定
2013/12/18 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
个人工作保证书
2015/02/28 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
MySQL索引是啥?不懂就问
2021/07/21 MySQL