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 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
简述vue中的config配置
Jan 23 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
vue实现分页加载效果
Dec 24 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 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随机数生成代码与使用实例分析
2011/04/08 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
广告显示判断
2006/08/31 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
antd Upload 文件上传的示例代码
2018/12/14 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
python实现键盘控制鼠标移动
2020/11/27 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
应届生会计电算化求职信
2013/10/03 职场文书
企业法人授权委托书
2014/04/03 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
工程部主管岗位职责
2015/02/12 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2015年防汛工作总结
2015/05/15 职场文书