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打印纸函数代码(递归)
Jun 18 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
vue eslint简要配置教程详解
Jul 26 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
js实现飞机大战游戏
Aug 26 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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中的traits简单使用实例
2015/05/13 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
vue移动端实现红包雨效果
2020/06/23 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
人力资源部经理助理岗位职责
2014/03/04 职场文书
学生操行评语大全
2014/04/24 职场文书
门店业绩提升方案
2014/06/08 职场文书
出租房屋协议书
2014/09/14 职场文书
python数字转对应中文的方法总结
2021/08/02 Python
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技