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>

摘自：angular.injector

AngularJS依赖注入常用对象注入器 $injector常用API方法，get、has、invoke

get与has
①has方法的作用是从注册的列表查找对应的服务，如果找到返回true，否则返回false;它的调用格式如下：

injector.has(name)

②get方法的作用是返回指定名称的服务实例，获取到服务的实例对象后，就可以直接调用服务中的属性和方法，它的调用格式如下：

injector.get(name)

为了更深入的理解这两个API的使用方法，我们通过一个简单的示例来演示他们在应用中的使用过程。

③首先，定义一个名为”$custom”的服务，并在该服务中创建一个”print”方法，用于在控制台中输入任意内容;

④然后，调用has方法判断是否存在”$custom”服务；

⑤如果存在，则调用get方法，获取服务的实例对象。并调用该对象的“print”方法输出设定的字符内容。

<!doctype html>
<html ng-app="a4_6">
<head><title>has和get方法</title><script src="../Script/angular.min.js"type="text/javascript"></script>
</head>
<body><div ng-controller="c4_6"><!-- 视图组件 --></div><script type="text/javascript">var a4_6 = angular.module('a4_6', []).factory('$custom', function () {return {print: function (msg) {console.log(msg);}};});var injector = angular.injector(['a4_6', 'ng']);var has = injector.has('$custom');console.log(has);if (has) {var custom = injector.get('$custom');custom.print("控制台输出任意的内容！");}a4_6.controller('c4_6', ['$scope', '$custom',function ($scope, $custom) {//控制器代码}]);</script>
</body>
</html>

invoke方法
invoke方法是一个功能强大的方法，它做常用的场景就是执行自定义函数。除此之外，在执行函数时，还能传递变量给函数本身，他的调用格式如下：

injector.invoke(fn,[self],[locals])

在上述代码中，injector为获取$injector对象，参数fn为需要执行的函数名称，可选项参数self是一个对象，表示用于函数中this变量，可选参数locals也是一个对象，它能为函数中变量名的传递提供方法支持。

例如：

<!doctype html>
<html ng-app="a4_7">
<head><title>invoke方法</title><script src="../Script/angular.min.js"type="text/javascript"></script>
</head>
<body><div ng-controller="c4_7"><!-- 视图组件 --></div><script type="text/javascript">var a4_7 = angular.module('a4_7', []).factory('$custom', function () {return {print: function (msg) {console.log(msg);}};});var injector = angular.injector(['a4_7', 'ng']);var fun = function ($custom) {$custom.print("函数执行成功！");}injector.invoke(fun);a4_7.controller('c4_7', ['$scope', '$custom',function ($scope, $custom) {//控制器代码}]);</script>
</body>
</html>

控制台如下：

①在本例代码中，除使用factory方法定义一个名为”custom"的服务之外，还自定义了一个名为fun的函数，并在这个函数中注入custom服务，再调用服务中的”print”方法，向浏览器的控制台输出“函数执行成功！”的字样。

②为了能执行这个自定义函数fun，我们调用$injector中的invoke方法，该方法的功能不仅执行名称对应的函数代码。而且还能返回被执行函数返回的值，而在示例中，仅执行fun函数，将设置的内容显示在浏览器的控制台中，最终执行相关如上图所示。

摘自：AngularJS依赖注入常用对象注入器 $injector常用API方法，get、has、invoke

angular.injector相关推荐

webpack打包angularjs后出现Angular $injector:unpr Unknown provider的错误及解决
文章目录问题原因解决附问题一个angularjs1.x的历史项目,webpack3做的打包,打出来的包一起有几十M,因为一直内网运行,虽然包大了点,但是还能够接受. 因为最近有一些客户对这 ...
Angular $injector:unpr Unknown provider 问题原因汇总
Unknown provider: tProvider <- t 对于很多Angular 1.x 的使用者来说,是非常头疼的一件事情,因为使用者根本不知道原因在哪里. 本文总结了迄今为止所有导致 ...
angular injector
If the dependency is added to a module, it gets registered on the root injector. 如果依赖添加到module上,那么,这 ...
Angular Injector.create的工作原理
下列这段代码: const BASE_URL = new InjectionToken<string>('只是描述');const injector =Injector.create({p ...
angular 注入器配置_Angular injector注入器
var app = angular.module('myApp', ['ng']); //通过service方法创建自定义服务 app.service('$test', function () { t ...
angular的injector
angular.injector( [' '] ) 创建注入器的时候(注册服务),指定需要加载的模块; angular.injector()可以调用多次,每次都返回新建的injector对象; inj ...
angular（3）服务 --注入---自定义模块--单页面应用
ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...
Angular 中的依赖注入link
Angular 中的依赖注入link 依赖注入(DI)是一种重要的应用设计模式. Angular 有自己的 DI 框架,在设计应用时常会用到它,以提升它们的开发效率和模块化程度. 依赖,是当类需要执行 ...
Angular 下的 function
angular.lowercas 将指定的字符串转换为小写的 Usage(使用方法) angular.lowercase(string); Arguments Param Type Details ...

angular.injector

angular.injector相关推荐

最新文章

热门文章