文档章节

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

MingjunYang
 MingjunYang
发布于 2014/06/26 22:22
字数 752
阅读 4005
收藏 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
【前端】—聊聊我认识的Angular

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

zt15732625878
2018/05/19
0
0
AngularJS 常见面试问题

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

阿K1225
2017/10/25
0
0
Angular 1 vs. Angular 2 深度比较

AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。 Angular 2 当前仍处于 Alpha/开发预览阶段,但是主要功能和...

oschina
2015/10/14
41.2K
36
AngularJS 生命周期管理、懒加载和其他高级 DI 技术

Angular 中我最喜欢的一个特点是它的依赖注入(dependency injection)。和我读到的一些质疑不同,我觉得它非常灵活并且非常强大,足以满足商业应用生产线的需求。我在 Dependency Injection E...

oschina
2014/08/29
2.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

Nextjs+React非页面组件SSR渲染

@随风溜达的向日葵 Nextjs Nextjs是React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见Next.js入门)...

随风溜达的向日葵
48分钟前
0
0
如何在 Linux 系统查询机器最近重启时间

在你的 Linux 或类 UNIX 系统中,你是如何查询系统上次重新启动的日期和时间?怎样显示系统关机的日期和时间? last 命令不仅可以按照时间从近到远的顺序列出该会话的特定用户、终端和主机名...

来来来来来
今天
3
0
Redis协议是什么样的

前言 我们用过很多redis的客户端,有没有相过自己撸一个redis客户端? 其实很简单,基于socket,监听6379端口,解析数据就可以了。 redis协议 解析数据的过程主要依赖于redis的协议了。 我们...

春哥大魔王的博客
今天
6
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxCool
今天
4
0
携程Apollo统一配置中心的搭建和使用(java)

一.Apollo配置中心介绍 1、What is Apollo 1.1 Apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境、不同集群的配置,配置修改后能够实时推送到...

morpheusWB
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部