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 相关文章推荐
js控制浏览器全屏示例代码
Feb 20 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP正确配置mysql(apache环境)
2011/08/28 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP7新增函数
2021/03/09 PHP
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
python打开网页和暂停实例
2014/09/30 Python
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
20招让你的Python飞起来!
2016/09/27 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
对Python中画图时候的线类型详解
2019/07/07 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
精神文明建设标语
2014/06/16 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
MySql分区类型及创建分区的方法
2022/04/13 MySQL
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python