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 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
围观tangram js库
Dec 28 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
实例详解带参数的 npm script
May 28 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
vue数据响应式原理知识点总结
Feb 16 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往windows中添加用户
2006/12/06 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
js运动事件函数详解
2016/10/21 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
python中for用来遍历range函数的方法
2018/06/08 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
python离线安装外部依赖包的实现
2020/02/13 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
求高于平均分的学生学号及成绩
2016/09/01 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
前台接待的工作职责
2013/11/21 职场文书
二手房买卖协议书
2014/04/10 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
市场调查策划方案
2014/06/10 职场文书
语文教研活动总结
2014/07/02 职场文书
入党现实表现材料
2014/12/23 职场文书
SQL Server实现分页方法介绍
2022/03/16 SQL Server
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫