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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
js验证密码强度解析
Mar 18 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/21 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
Python-基础-入门 简介
2014/08/09 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
解析Python3中的Import
2019/10/13 Python
Django通过json格式收集主机信息
2020/05/29 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
高级文秘工作总结的自我评价
2013/09/28 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
食品安全承诺书范文
2014/08/29 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
谢师宴学生答谢词
2015/09/30 职场文书