`
boyitech
  • 浏览: 84107 次
  • 性别: Icon_minigender_1
  • 来自: 南通
社区版块
存档分类
最新评论
阅读更多

angular.injector

 

描述:
创建一个injector对象, 调用injector对象的方法可以获得angular的service, 或者用来做依赖注入.
 
使用方法:
angular.injector(modules, [strictDi])
 
参数详解:
Param Type Details
modules Array.<string|Function>

一组module或者他们的别名. ng module需要显示地申明出来.

strictDi
(optional)
boolean

Injector需不需要使用严格模式,即允不允许使用默认别名

(default: false)

返回值:
Injector对象.
 
示例代码:
1. 一般情况下次函数用来做单元测试啦, 我这边的示例比较为了示例而示例
<!DOCTYPE HTML>
<html ng-app="exampleApp">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="jquery-1.7.2.min.js"></script>
	<script src="angular.min.js"></script>
	<script>
			
	var exampleApp = angular.module('exampleApp',[]);
			
	exampleApp.controller('exampleController',['$scope', function($scope){		
		
		$scope.name = "boyi";
		
		$scope.inject = function(){
			var $injector = angular.injector(['ng']);
			
			$injector.invoke(function($http) {
				var scopes = angular.element(document.body).scope();
				scopes.name = "博弈网络";//这里可以同http请求获得数据
			
			});
			
		};
		
	}]);
	
</script>
</head>

<body ng-controller='exampleController'>
<div id="test">博弈网络科技</div>
<div>{{name}}</div>
<div><input type="button" ng-click="inject()" value="injector"/></div>

<hr>

</body>	
</html>
 
2.  Angular的app 已经启动编译好了之后, 有时候你又想强行进入做一些逻辑或者修改,可以使用JQuery/jqLite元素的injector()方法
<!DOCTYPE HTML>
<html ng-app="exampleApp">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="jquery-1.7.2.min.js"></script>
	<script src="angular.min.js"></script>
	<script>
				
			var exampleApp = angular.module('exampleApp',[]);		
	
	exampleApp.controller('exampleController',['$scope', function($scope){
			
		$scope.addElement = function(){
				var div = $('<div ng-controller="MyCtrl">{{content.label}}</div>');
					$(document.body).append(div);
					
				  angular.element(document).injector().invoke(function($compile){
				  	
				  	var scope = angular.element(div).scope();
				  	$compile(div)(scope);
				  	
				  	});
			
		}
	
		
	}]).controller('MyCtrl',['$scope', function($scope){
			$scope.content = {"label":"testing"};
		}]);
	

</script>
</head>

<body ng-controller='exampleController'>
<div id="test">博弈网络科技</div>
<div><input type="button" ng-click="addElement()" value="addElement"/></div>

<hr>

</body>	
</html>
 
0
0
分享到:
评论
1 楼 Virtoway 2015-08-12  

说到Angular JS
刚读到一片美国构架师的文章
关于使用Angular JS在Microsoft平台上进行编程,达到高效web管理
这个平台免费使用的
下载地址:http://www.asp.net/
请表叫我雷锋!
我手痒,顺带把那文章译啦 !博客里有http://www.iteye.com/topic/1141273

相关推荐

    Angular 理解module和injector,即依赖注入

    angularjs中与DI相关有angular.module()、angular.injector()、 $injector、$provide。对于一个DI容器来说,必须具备3个要素:服务的注册、依赖关系的声明、对象的获取。比如spring中,服务的注册是通过xml配置文件...

    详解Angular 4.x Injector

    在介绍 Angular Injector (注入器) 之前,我们先要了解 Dependency Injection,即依赖注入的概念。 依赖注入允许程序设计遵从依赖倒置原则 (简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了...

    AngularJS的依赖注入实例分析(使用module和injector)

    angularjs中与DI相关有angular.module()、angular.injector()、 $injector、$provide。对于一个DI容器来说,必须具备3个要素:服务的注册、依赖关系的声明、对象的获取。比如spring中,服务的注册是通过xml配置文件...

    angular-florm:用于角度的前端 Localstore ORM

    var $florm = angular.injector(['myApp']).get('$florm') var Users = $florm('users'); var user = Users.new({name: 'foo', password : 'bar'}); user.potatoes = 12; user.save(); // Persists using window....

    theinjection:这个简单而有用的依赖注入到 node.js 类似于 angular.js

    这种简单而有用的依赖注入到 node.js 类似于 angular.js。 文档 安装 $ npm install theinjection --save 首先,您需要注册依赖项。 var Injection = require ( 'theinjection' ) ; var injection = new Injector...

    Essential Angular

    Visualize and parse the Injector tree Understand advanced Lazy Loading Integrate and run different testing strategies on your code About the Author Victor Savkin and Jeff Cross are core contributors...

    Angular.JS学习之依赖注入$injector详析

    随着javaEE的spring框架的兴起,依赖注入(IoC)的概念彻底深入人心,它彻底改变了我们的编码模式和思维。在AngularJS中也有依赖注入的...Angular中只需要在需要的地方声明一下即可,类似模块的引用,因此十分方便。

    angularjs 源码解析之injector

    injector是用来做参数自动注入的,例如 function fn ($http, $scope, aService) { } ng在运行时会把$http, $scope, aService 自动作为参数传入进行执行。 其实很容易想明白,injector做了两件事 缓存那些service...

    AngularJS执行流程详解

    Angular启动后,它会查找ng-app指令,然后初始化一系列必要的组件(即$injector、$compile服务以及$rootScope),接着继续解析DOM。 三.编译、链接阶段 1.Angular使用$compile服务通过遍历DOM树的方式查找带有指令的...

    Angularjs 基础入门

    针对于这个其实我不太清楚应该针对于哪些人或者说不知道从哪...3.创建与应用相关的injector(依赖管理器) 4.以制定的ng-app为根节点,开始对Dom进行compile 现在我们自己初始化一下,做一个等同于ng-app这个指令的东西。

    angular 用拦截器统一处理http请求和响应的方法

    想使用angularjs里的htpp向后台发送请求,现在有... .factory('httpInterceptor',['$q','$injector','$localStorage',function ($q,$injector,$localStorage) { var httpInterceptor = { 'responseError' : function

    Angular-Route-Injector:ARI 是一个轻量级的 Angular 插件框架,与 ui-router 框架配合使用

    Angular-Route-Injector ====================== ARI 是一个轻量级的 Angular 附加插件,与 Angular ui-router 结合使用。 Angular ui-router 链接: : 生产构建: 缩小: ://raw.githubusercontent....

    angular-iconic:用于Iconic的简单AngularJS模块

    角度图标 受此启发的用于简单模块。 注意#1:您将需要具有或 。 但这也应与常规SVG文件一起使用。 注意#2:该项目主要是为了娱乐,并且提供了Iconic产品中非常有限(未经试用)的...angular . module ( 'app' ,

    解决angularjs service中依赖注入$scope报错的问题

    ionic.bundle.js:26794 Error: [$injector:unpr] Unknown provider: $scopeProvider &lt;- $scope &lt;- DutylogService http://errors.angularjs.org/1.5.3/$injector/unpr?p0=...

    AngularJS - Novice to Ninja.pdf.pdf )

    The Angular Seed Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 The Anatomy of an AngularJS app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....

    浅谈Angular6的服务和依赖注入

    Injector(注入器):就是字面上的意思,将某一类事物注入到另一类事物中的工具.angular应用在启动时,会自动创建. 假想一个去医院看病的过程: 找医生看病判断病情,医生开处方 –&gt; 处方交给护士 –&gt;

    AngularJS $injector 依赖注入详解

    主要介绍了AngularJS $injector 依赖注入的相关资料,需要的朋友可以参考下

Global site tag (gtag.js) - Google Analytics