文档章节

angularJS依赖注入时候的顺序问题

MingjunYang
 MingjunYang
发布于 2014/06/26 22:22
字数 752
阅读 3997
收藏 10

遇到问题

刚开始接触angularJS也就三个月,这期间大量的工作都是频繁的编码、调试和继续编码。这期间也没有遇到过什么大问题,angularJS这货也是学的稀里糊涂的。
这两天倒是发现一个问题,我需要一个上传文件功能,使用了 angular-file-upload 这个module。按照文档里的例子写入依赖注入

angular.module('myapp', ['mapDir', 'mapsrv', 'angularFileUpload'])
    .controller("MapsCtrl", ["$scope", "$http", "$rootScope", '$upload', "lmapsrv",
        function($scope, $http, $rootScope, $location, lmapsrv,$upload) {
          …………………………
        })
])

那两个map有关的是我自己的module,其中一个是directive,$upload是上传文件有关的。我遇到的问题是在调试代码的时候总是$upload为null,用到这的时候总是报错。检查依赖和文件都没用错,引用也没发现有什么特别的问题。昨天发现这个问题之后因为忙着其他事情,暂时搁置上传文件这个功能。当时觉得这真奇怪。

解决问题

今天终于腾出手了想这个事情了,先考虑的是不是angularJS版本不一样了(可笑),以前用的1.2.6,现在用的1.2.18。但是换过版本还是问题依旧,最后只有一招了,打断点看堆栈和变量。不打不要紧,一打还真看出问题了。发现一个奇怪的现象,明明已经执行过了'angularFileUpload'相关的代码,但是$upload变量雷打不动的还是null。真是百思不得其解。在测试寻找问题根源的过程中,无意间将 "$http", "$rootScope"两个依赖的位置调换了,突然发现我的$http.get()开始报错了,这时候断点看见的变量更是奇怪$http在firebug里出现的居然是$$ 的结构。突然才明白过来

.controller("MapsCtrl", ["$scope", "$http", "$rootScope", '$upload', "lmapsrv",
        function($scope, $http, $rootScope, $location, lmapsrv,$upload) {}])

上面中括号里面的依赖和function的参数列表是顺序对应的关系
正确的顺序是如下的:

.controller("MapsCtrl", ["$scope", "$http", "$rootScope", '$upload', "lmapsrv",
        function($scope, $http, $rootScope, lmapsrv,$upload, **$location**) {}])

问题出现的原因

问题出现的原因还是对angularJS不了解,不知道注入依赖还有顺序的问题。之前没有暴露这个问题应该是我每次添加新的module的时候都是在尾部添加,而这次自己写的module,而且随意放置位置了,才导致这个我问题的出现。不过有了这次问题,倒是长进了不少!我这里还潜藏了一个问题,function的最后一个参数也会是空值,原则上应该是我不用就不要写进来。这时候,感觉angularJS真的是很有意思的东西,我这个写python后台应用的,用bootstrap看看参考就能搞一对对漂亮的界面出来,伪前端装逼也没人发现。


© 著作权归作者所有

共有 人打赏支持
MingjunYang

MingjunYang

粉丝 34
博文 19
码字总数 10421
作品 0
上海
架构师
私信 提问
加载中

评论(3)

cnlinjie
cnlinjie
这种写法在代码混淆的情况下依赖可以运行。
MingjunYang
MingjunYang

引用来自“逆尘”的评论

angular 使用这种注入方式,并不要求方法变量与注入名称完全相同,调用的时候会按顺序赋值然后调用就行
还是写的可读一点的好。
逆尘
逆尘
angular 使用这种注入方式,并不要求方法变量与注入名称完全相同,调用的时候会按顺序赋值然后调用就行
  AngularJS中serivce,factory,provider的区别

一、service引导 刚开始学习Angular的时候,经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别。This is where we'll start the twenty-five days ...

武文海
2015/04/29
0
0
AngularJS 常见面试问题

问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, 在后面表达式为 true 的时候才创建这个 dom 节点, 是初始时就创建了,用 和 来控制显示...

阿K1225
2017/10/25
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
05/19
0
0
Angular项目构建指南 - 不再为angular构建而犹豫不决

前言 接触Angular也有小半个月了,虽然没有使劲折腾,不过正所谓"no zuo no die".学一门新东西,不好好折腾一下总觉得对不起祖国,最不起人民...好像扯远了,想写前言来着.为什么要写这篇构建指南...

顽Shi
2014/06/16
0
16
ng-animate和ng-cookies用法

———ng-animate 本文讲一下Angular中动画应用的部分。 首先,Angular本生不提供动画机制,需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制,Angular也不提供具体的动画...

sidney_c
04/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day150-2018-11-17-英语流利阅读-待学习

歪果仁也疯狂:海外版抖音的征途 毛西 2018-11-17 1.今日导读 海外版抖音 TikTok 于 2017 年 5 月上线海外,至今覆盖全球 150 多个国家和地区,月活跃用户数已突破 5 亿。然而,“出海”的抖...

飞鱼说编程
今天
4
0
分布式学习最佳实践:从分布式系统的特征开始(附思维导图)

什么是分布式系统 回到顶部   分布式系统是由一组通过网络进行通信、为了完成共同的任务而协调工作的计算机节点组成的系统。分布式系统的出现是为了用廉价的、普通的机器完成单个计算机无法...

dragon_tech
今天
4
0
TOKEN设计

TOKEN设计 Api_Token 首先需要知道API是什么? API(Application Programming Interface)即应用程序接口。你可以认为 API 是一个软件组件或是一个 Web 服务与外界进行的交互的接口。而我们在...

DrChenXX
今天
3
0
浅谈“李氏代换”——从纪念金庸和斯坦李说起

李氏代换(LSP)简介 李氏代换是软件设计的一个原则,又名依赖倒转原则或依赖倒置原则,其衍生原则有接口分离原则等。该原则由Barbara Liskov于1988年提出。 该原则指出,程序中高级别的元素...

SamYjy
今天
33
0
JavaScript实现在线websocket WSS测试工具 -toolfk程序员工具网

本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。T...

toolfk
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部