文档章节

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

MingjunYang
 MingjunYang
发布于 2014/06/26 22:22
字数 752
阅读 3986
收藏 10
点赞 0
评论 3

遇到问题

刚开始接触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
博文 18
码字总数 10236
作品 0
上海
架构师
加载中

评论(3)

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

引用来自“逆尘”的评论

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

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

阿K1225
2017/10/25
0
0
  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
05/19
0
0
Angular项目构建指南 - 不再为angular构建而犹豫不决

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

顽Shi
2014/06/16
0
16
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
5-XHRs(XmlHttpRequest)与依赖注入

足以给应用绑定了硬编码数据集中的三条手机数据,让我们从我们的服务中适配更大的数据集,他使用Angular内建的服务中$htttp。我们将使用Angular的依赖注入给提供服务。 现在有20条手机,从服...

奋斗到天明
2015/08/27
0
0
JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名
2011/01/20
0
44
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608
04/19
0
0
Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh
05/05
0
0
Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区
05/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell及python脚本方式登录服务器

一、问题 在工作过程中,经常会遇见需要登录服务器,并且因为安全的原因,需要使用交互的方式登录,而且shell、python在工作中也经常用到,并且可以提供交互的功能。都是利用了expect、spawn...

yangjianzhou
9分钟前
0
0
upstream sent too big header while reading...

nginx 报错:1736 upstream sent too big header while reading response header from upstream 1. 一般处理 location ~ \.php$ { #增加下面两句 fastcgi_buffer_size 128k; ......

dubox
20分钟前
0
0
Python解析配置文件模块:ConfigPhaser

import configparser as pa# [SectionA]# a = aa# b = bb# c = cc# [SectionB]# optionint = 1# optionfloat = 1.1# optionstring = string#https://www.cnblogs.com/a......

易野
27分钟前
0
0
Java基础——面向对象

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 Object的方法: clone() Object 克隆 to Strin...

凯哥学堂
29分钟前
0
0
rabbitmq学习记录(八)消息发布确认机制

RabbitMQ服务器崩了导致的消息数据丢失,已经持久化的消息数据我们可以通过消息持久化来预防。但是,如果消息从生产者发送到vhosts过程中出现了问题,持久化消息数据的方案就无效了。 Rabbit...

人觉非常君
33分钟前
0
0
毕业5年,我是怎么成为年薪30W的运维工程师

#转载# 我在大学读的是计算机专业,但大学毕业之后,进入到一家私企进行工作,工作的内容类似于网管,会经常的去修电脑,去做水晶头等内容。刚开始工作,也没想太多,最想的是丰富自己的工作...

Py爱好
40分钟前
1
0
大数据基础知识,大数据学习,涉及的知识点

一、什么是大数据 一种规模大到在获取、存储、管理、分析方面大大超出了传统数据库软件工具能力范围的数据集合,具有海量的数据规模、快速的数据流 转、多样的数据类型和价值密度低四大特征。...

董黎明
55分钟前
0
0
Linux CentOS 7上安装极点五笔

话说几天前在新买的惠普笔记本上成功地安装了Linux CentOS 7操作系统、Nvidia Quandro P600驱动程序及X Window,并在VMware下安装Red Hat教学环境,彻底跳出Windows的苦海,但仍然有一件事不...

大别阿郎
今天
17
0
2018年7月20日集群课程

一、集群介绍 集群,简单地说是指一组(若干个)相互独立的计算机,利用高速通信网络组成一个较大的计算机服务系统,每个集群节点(即集群中的每台计算机)都是运行各自服务的独立服务器。 ...

人在艹木中
今天
0
0
spark开发机中调试snappy

目的 在Idea中的点击运行,使spark可以直接读取snappy 自己编译hadoop,以支持snappy的压缩。 自己编译的目的就是要得到支持snappy文件读写的动态链接库。如果可以在网上下载,可以跳过自行编...

benny周
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部