angularJs $injector

一 angularJS中几种注入方式

Spring中使用构造注入或者设值注入的方式,还需要做一些额外的操作,但是angular中只需要在需要的地方声明一下即可,类似模块的引用,因此十分方便。

angularJS中有几种注入方式:

推断式注入:这种注入方式,需要在保证参数名称与服务名称相同。如果代码要经过压缩等操作,就会导致注入失败。

<div ng-controller="myCtrl1">

<input type="button" ng-click="hello()" value="ctrl1"></input>

</div>

<div ng-controller="myCtrl2">

<input type="button" ng-click="hello()" value="ctrl2"></input>

</div>

<div ng-controller="myCtrl3">

<input type="button" ng-click="hello()" value="ctrl3"></input>

</div>

<script type="text/javascript">

var app = angular.module("myApp",[]);

app.factory("hello1",function(){

return {

hello:function(){

console.log("hello1 service");

}

}

});

app.factory("hello2",function(){

return {

hello:function(){

console.log("hello2 service");

}

}

});

app.controller("myCtrl1", function($scope,hello1,hello2){

$scope.hello = function(){

hello1.hello();

hello2.hello();

}

});

...

标记式注入:这种注入方式,需要设置一个依赖数组,数组内是依赖的服务名字,在函数参数中,可以随意设置参数名称,但是必须保证顺序的一致性。

var myCtrl2 = function($scope,hello1,hello2){

$scope.hello = function(){

hello1.hello();

hello2.hello();

}

}

myCtrl2.$injector = [‘hello1‘,‘hello2‘];

app.controller("myCtrl2", myCtrl2);

内联式注入:这种注入方式直接传入两个参数,一个是名字,另一个是一个数组。这个数组的最后一个参数是真正的方法体,其他的都是依赖的目标,但是要保证与方法体的参数顺序一致(与标记注入一样)。

app.controller("myCtrl3",[‘$scope‘,‘hello1‘,‘hello2‘,function($scope,hello1,hello2){

$scope.hello = function(){

hello1.hello();

hello2.hello();

}

}]);

在angular中,可以通过angular.injector()获得注入器:var $injector = angular.injector();

通过$injector.get(‘serviceName‘)获得依赖的服务名字:$injector.get(‘$scope‘);

通过$injector.annotate(‘xxx‘)获得xxx的所有依赖项 :$injector.annotate(xxx)

二 angularJS中的$injector、$rootScope和$scope

1.$injector其实是一个IOC容器,包含了很多服务(类似于spring框架中的bean),其它代码能够通过。$injector.get("serviceName")的方式,从injector中获取所需要的服务。

2.scope是angularJS中的作用域(其实就是存储数据的地方),很类似javascript的原型链。搜索的时候,优先找自己的scope,如果没有找到就沿着作用域链向上搜索,直至到达根作用域rootScope。

3.$rootScope 是由angularJS加载模块的时候自动创建的,每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入 到$injector中。也就是说通过$injector.get("$rootScope");能够获取到某个模块的根作用域。更准确的来 说,$rootScope是由angularJS的核心模块ng创建的。

4.$rootScope的确是由核心模块ng创建的,并以服务的形式存在于injector中。

// 新建一个模块

var module = angular.module("app",[]);

// true说明$rootScope确实以服务的形式包含在模块的injector中

var hasNgInjector = angular.injector([‘app‘,‘ng‘]);

console.log("has $rootScope=" + hasNgInjector.has("$rootScope"));//true

// 获取模块相应的injector对象,不获取ng模块中的服务

// 不依赖于ng模块,无法获取$rootScope服务

var noNgInjector = angular.injector([‘app‘]);

console.log("no $rootScope=" + noNgInjector.has("$rootScope"));//false

// 获取angular核心的ng模块

var ngInjector = angular.injector([‘ng‘]);

console.log("ng $rootScope=" + ngInjector.has("$rootScope"));//true

如果创建injector的时候,指定了ng模块,那么该injector中就会包含$rootScope服务;否则就不包含$rootScope。

<html lang="en">

<head>

<meta charset="utf-8">

<script src="angular-1.2.25.js"></script>

<script>

var module = angular.module("app",[]);

// 控制器里的$injector,是由angular框架自动创建的

function FirstController($scope,$injector,$rootScope)

{

$rootScope.name="aty";

}

//自己创建了个injector,依赖于app和ng模块

var myInjector = angular.injector(["app","ng"]);

var rootScope = myInjector.get("$rootScope");

alert(rootScope.name);//udefined

</script>

</head>

<body ng-app="app">

<div id="first" ng-controller="FirstController">

<input type="text" ng-model="name">

<br>

{{name}}

</div>

</body>

</html>

angular.injector()可以调用多次,每次都返回新建的injector对象。所以我们自己创建的myInjector和angular自动创建的$injector不是同一个对象,那么得到的rootScope也就不是同一个。

<html lang="en">

<head>

<script src="angular-1.2.25.js"></script>

<script>

function FirstController($scope,$injector,$rootScope)

{

// true

console.log("scope parent :" + ($scope.$parent ==$rootScope));

}

</script>

</head>

<body ng-app>

<div id="first" ng-controller="FirstController">

<input type="text" ng-model="name">

<br>

{{name}}

</div>

</body>

</html>

ng-controller指令给所在的DOM元素创建了一个新的$scope对象,并作为rootScope的子作用域。$scope是由$rootScope创建的,$scope不会包含在$injector中。

时间: 2024-12-12 15:43:59

angularJs $injector的相关文章

(七)理解angular中的module和injector,即依赖注入

依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.angularjs作为前台js框架,也提供了对DI的支持,这是javascript/jquery不具备的特性.angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide.对于一个DI容器来说,必须具备3个要素:服务的注册.依赖关系的声明.对象的获取.比如spring中,服务的注册是通过xml配置文件的<bean>标签或是注解@Repository.

Scope in AngularJS

From the RUNBOOM.COM, it said: Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. While, how many scopes can we have? is there any structure in it? I got those question when I come to it. After a tough time r

通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系

$injector.$rootScope和$scope是angularJS框架中比较重要的东西,理清它们之间的关系,对我们后续学习和理解angularJS框架都非常有用. 1.$injector其实是一个IOC容器,包含了很多服务(类似于spring框架中的bean),其它代码能够通过       $injector.get("serviceName")的方式,从injector中获取所需要的服务.详情参考这篇文章 2.scope是angularJS中的作用域(其实就是存储数据的地方)

Struts2中的缓存----以Injector为例

题外话,文章中有大量的标识1 标识2,大家可以用ctrl+f来查找. 构成缓存的类 主要就是以下两个: com.opensymphony.xwork2.inject.util.ReferenceCache<K, V> com.opensymphony.xwork2.inject.util.ReferenceMap<K, V> 前者继承自后者. 我们先看看ReferenceMap public class ReferenceMap<K, V> implements Map

Nutch 1.0 源代码分析[1] Injector

在Crawl中的main函数中有一句是: // initializecrawlDb injector.inject(crawlDb, rootUrlDir); 引用[李阳]:inject操作调用的是nutch的核心包之一crawl包中的类Injector. inject操作主要作用: 1.       将URL集合进行格式化和过滤,消除其中的非法URL,并设定URL状态(UNFETCHED),按照一定方法进行初始化分值: 2.       将URL进行合并,消除重复的URL入口: 3.     

11-angular.injector

创建一个注入器对象,该对象可用于检索服务以及依赖项注入(参见依赖项注入) 用法: angular.injector(modules, [strictDi]); 参数: modules:·

angular.injector

可通过angular.injector()方法来获取指定的服务. 正常,我们都是在controller等创建的时候,需要什么服务,就通过依赖的方式引进来.如todomvc的demo代码: 可是,通过injector,我们就可以想在什么时候引入服务,就什么时候引入. 注入器负责从我们通过$provide创建的服务中创建注入的实例.只要你编写了一个带有可注入性的参数,你都能看到注入器是如何运行的.每一个AngularJS应用都有唯一一个$injector,当应用启动的时候它被创造出来,你可以通过将$

AngularJS API之$injector ---- 依赖注入

    阅读目录 推断式注入 标记式注入 内联式注入 $injector常用的方法 样例代码 在AngularJS中也有依赖注入的概念,像spring中的依赖注入,但是又有所不同.Spring中使用构造注入或者设值注入的方式,还需要做一些额外的操作,但是angular中只需要在需要的地方声明一下即可,类似模块的引用,因此十分方便.参考:[angular api doc] (http://docs.angularjs.cn/api/auto/service/$injector) 回到顶部 推断式注

混合式框架-AngularJS

简介 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足: 类库 - 类库是一些函数的集合,它能帮助你写WEB应用.起主导作用的是你的代码,由你来决定何时使用类库.类库有:jQuery等 框架 - 框架是一种特殊的.已经实现了的WEB应用,你只需要对它填充具体的业

[ISSUE]angularjs resolve: $injector:unpr] Unknown provider:

使用框架 ionic,使用resolve做数据共享 http://learn.ionicframework.com/formulas/sharing-data-between-views/# 出现错误 $injector:unpr] Unknown provider: 仔细对照没有找到原因 尝试删除每个ion-view html 中的 ng-controller 原来的写法 <ion-view title="myview1" ng-controller="myview1