AngularJS压缩JS技巧分析

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • AngularJS 应用身份认证的技巧总结

    在web中很多时候都能应用到身份认证,本文介绍了AngularJS 应用身份认证的技巧,废话不多说了一起往下看吧. 身份认证 最普遍的身份认证方式就是用用户名(或 email)和密码做登陆操作.这就意味要实现一个登陆的表单,以便用户能够用他们个人信息登陆.这个表单看起来是这样的: <form name="loginForm" ng-controller="LoginController" ng-submit="login(credentials)&q

  • Web性能优化系列 10个提升JavaScript性能的技巧

    Nicholas Zakas是一位 JS 大师,Yahoo! 首页的前端主程.他是<高性能 Javascript>的作者,这本书值得每个程序员去阅读. 当谈到 JS 性能的时候,Zakas差不多就是你要找的,2010年六月他在Google Tech Talk发表了名为<Speed Up Your Javascript>的演讲. 但 Javascript 性能优化绝不是一种书面的技术,Nicholas 的技术演进列出了10条建议,帮助你写出高效的 JS 代码. 1. 定义局部变量 当

  • javascript函数中的3个高级技巧

    前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本文将再深入一步,介绍函数的3个高级技巧 技巧一:作用域安全的构造函数 构造函数其实就是一个使用new操作符调用的函数 function Person(name,age,job){ this.name=name; this.age=age; this.job=job; } var person=new Person('match',28,'Software E

  • JS常用函数和常用技巧小结

    学习和工作的过程中总结的干货,包括常用函数.常用js技巧.常用正则表达式.git笔记等.为刚接触前端的童鞋们提供一个简单的查询的途径,也以此来缅怀我的前端学习之路. Ajax请求 jquery ajax函数 我自己封装了一个ajax的函数,代码如下: var Ajax = function(url, type success, error) { $.ajax({ url: url, type: type, dataType: 'json', timeout: 10000, success: fu

  • 利用Node.js获取项目根目录的小技巧

    利用Node.js获取项目根目录的小技巧

    假设我们的js文件写在server目录中,但是我们的资源文件存储在app/img目录中. 实现功能 如下图,我们需要在server/index.js文件中使用fs读取app/img/favicon.ico文件. 实现方法 在node.js只提供了一个 dirname全局变量.通过 dirname可以获得"C:\wwwroot\yidata\server".这时需要用到path. 首先 import path from 'path'; (ES6)或var path = require (

  • 12个非常有用的JavaScript技巧

    在这篇文章中,我将分享12个非常有用的JavaScript技巧.这些技巧可以帮助你减少并优化代码. 1) 使用!!将变量转换成布尔类型 有时,我们需要检查一些变量是否存在,或者它是否具有有效值,从而将它们的值视为true.对于做这样的检查,你可以使用||(双重否定运算符),它能自动将任何类型的数据转换为布尔值,只有这些变量才会返回false:0,null,"",undefined或NaN,其他的都返回true.我们来看看这个简单的例子: function Account(cash) {

  • AngularJS压缩JS技巧分析

    本文实例讲述了AngularJS压缩JS的操作技巧.分享给大家供大家参考,具体如下: 大多数web项目在发布时候都会对js代码进行压缩,目的是为了减少js文件的大小,节省一点流量. 它的原理很简单,就是对参数及部分变量名和函数进行重命名. 但是这种工作方式在AngularJS的应用中会有例外. 由于AngularJS的依赖注入是根据参数名进行注入的,显然,对参数进行重命名会破坏这个机制. 如果不进行特殊处理,进行压缩(minify)之后,在执行时将会出现这样的错误 Unknow provider

  • PHP实现动态压缩js与css文件的方法

    本文实例讲述了PHP实现动态压缩js与css文件的方法.分享给大家供大家参考,具体如下: 正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用 只需要在头部引入一下代码即可: <meta charset="utf-8"/> <title>demo</title> <?php //定义需要压缩的文件 $css = array( CSS_PATH . 'base.css', CSS_PATH . '

  • 使用ANT与YUI压缩js的实现方法

    由于项目使用的js很多,为了提高系统效率,将js做压缩处理.成功的对多个js进行压缩,必须经历下面两步.1.合并多个js成为一个js.2.将和并过后的js进行压缩处理.使用的ant配置主要有: 复制代码 代码如下: <property  name="root" value="WebRoot"></property> <property  name="js" value="${root}/js"&g

  • 使用grunt合并压缩js和css文件的方法

    需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件合并,并压缩. --src/ ajax.js assets.js callbacks.js data.js deferred.js detect.js event.js form.js fx.js fx_methods.js gesture.js ie.js ios3.js selector.js

  • Yii2中使用asset压缩js,css文件的方法

    官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets.php 生成assets.php,这是一个配置模板,并修改如下 <?php /** * Configuration file for the "yii asset" console command. */ // In the console environment, some pat

  • webpack 打包压缩js和css的方法示例

    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令 webpack -p 即表示调用UglifyJS来压缩代码,还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS. uglify-js的发行版本只支持ES5,如果你要压缩ES6+代码请使用开发分支. UglifyJS可用的选项有: parse      

  • Vue.js原理分析之nextTick实现详解

    前言 tips:第一次发技术文章,篇幅比较简短,主要采取文字和关键代码表现的形式,希望帮助到大家.(若有不正确还请多多指正) nextTick作用和用法 用法:nextTick接收一个回调函数作为参数,它的作用是将回调延迟到下一次DOM更新之后执行,如果没有提供回调函数参数且在支持Promise的环境中,nextTick将返回一个Promise. 适用场景:开发过程中,开发者需要在更新完数据之后,需要对新DOM做一些操作,其实我们当时无法对新DOM进行操作,因为这时候还没有重新渲染,这时候nex

  • 分享一些不常见却很实用的JS技巧

    分享一些不常见却很实用的JS技巧

    前言 编程语言通常暗藏着各种技巧,熟练使用这些技巧可以提高开发效率.JavaScript 就是一门技巧性很强的语言,掌握常见的语法技巧不但可以加深对语言特性的理解,还可以简化代码,提高编码效率. 下面是列出一些 JavaScript 有用的技巧,相信总有一天会对你有所帮助. 1.数组去重 const numbers = [1, 2, 3, 4, 4, 1] console.log([...new Set(numbers)]) // [1, 2, 3, 4] 2.从数组中过滤所有虚值 const 

  • 今天分享几个少见却很有用的 JS 技巧

    今天分享几个少见却很有用的 JS 技巧

    1. "返回"按钮 使用 history.back() 可以创建一个浏览器"返回"按钮. <button onclick="history.back()"> 返回 </button> 2. 数字分隔符 为了提高数字的可读性,您可以使用下划线作为分隔符: const largeNumber = 1_000_000_000; console.log(largeNumber); // 1000000000 3. 事件监听器只运行

  • JS技巧多状态页面中的mock方案详解

    目录 引言 技术选型 业务逻辑改造 Eruda 插件 Mock 数据整理 引言 我们有时候会遇到一个业务页面存在很多个状态,甚至子状态,比如订单详情就是其中的典型,涉及从订单创建到订单结束,以及售后等流程.维护起来每个状态对应一份数据,虽然我们 QA 提供了数据构造平台,但构造一份对应状态的数据还是需要花费不少时间,而且串行流程一旦出错的话只能重新来一遍. 后期维护阶段也不容易构造对应状态的数据,导致排查页面问题比较耗时. 另外一个问题就是从头熟悉业务的话成本比较高,如果有一个直观的页面能够看到

随机推荐