（五）Angularjs - 依赖注入

浏览数：42 / 时间：2015年06月09日

如何找到API？

AngularJS提供了一些功能的封装，但是当你试图通过全局对象angular去访问这些功能时，却发现与以往遇到的库大不相同。

比如，AngularJS暴露了一个全局对象：angular，也对ajax调用进行封装提供了一个 $http对象，但是，当访问angular.$http，却找不到

依赖注入/DI

事实上，AngularJS把所有的功能组件都以依赖注入的方式组织起来，在依赖注入的模式下，所有的组件必须通过容器才能相互访问，这导致了在AngularJS中，你必须通过一个中介才能获得某个组件的实例对象

1 var injector = angular.injector([‘ng‘]);
2 injector.invoke(function($http){
3     //do sth. with $http
4 });

例: 打印$http代码

1 angular.element(document).ready(function(){
2     angular.injector(["ng"]).invoke(function($http){
3         //将$http对象转成字符串显示出来
4         var e = document.querySelector("#logger");
5         angular.element(e).text($http.toString());
6     });
7 });

<html>
<head>
    <script src="angular.js"></script>
</head>
<body>
    <!--在这里显示$http的内容-->
    <div id="logger"></div>
</body>
</html>

注入器/injector

注入器是AngularJS框架实现和应用开发的关键，这是一个DI/IoC容器的实现。

AngularJS将功能分成了不同类型的组件分别实现，这些组件有一个统称 - 供给者/provider。

AngularJS的组件之间不可以互相直接调用，一个组件必须通过注入器才可以调用另一个组件。这样的好处是组件之间相互解耦，对象的整个生命周期的管理甩给了注入器。

注册服务组件

从injector的角度看，组件就是一个功能提供者，因此被称为供给者/Provider。在AngularJS中，provider以JavaScript类（构造函数）的形式封装。

服务名称通常使用一个字符串标识，比如"$http"代表http调用服务、"$rootScope"代表根作用域对象、"$compile"代表编译服务...

Provider类要求提供一个$get函数（类工厂），injector通过调用该函数，就可以获得服务组件的实例。

名称和类函数的组合信息，被称为配方。injector中维护一个集中的配方库，用来按需创建不同的组件。这个配方库，其实就是一个Hash对象，key就是服务名称，value 就是类定义。

例：在test模块上登记一个hello服务

//在test模块上登记一个hello服务
angular.module("test",[])
.provider("hello",function(){
    //$get方法是一个类工厂，返回服务的实例
    this.$get = function(){
        return "hello,world!";
    };
});

angular.element(document).ready(function(){
    angular.injector(["ng","test"]).invoke(function(hello){
        //将hello实例对象转成字符串显示出来
        var e = document.querySelector("#logger");
        angular.element(e).text(hello);
    });
});

获得注入器对象

创建一个新的注入器

angular.injector(modules, [strictDi]);

获取已经创建的注入器

1 var element = angular.element(dom_element);
2 var injector = element.injector();

通过注入器调用API

注入器有两个方法可供进行API调用：invoke()和get()。

invoke()

使用注入器的invoke()方法，可以直接调用一个用户自定义的函数体，并通过函数参数注入所依赖的服务对象，这是AngularJS推荐和惯例的用法：

1 angular.injector([‘ng‘])
2 .invoke(function($http){
3     //do sth. with $http
4 });

get()

get()方法，获得指定名称的服务实例：

1 var my$http = angular.injector([‘ng‘]).get(‘$http‘);
2 //do sth. with my$http

有两种方法告知注入器需要注入的服务对象：参数名注入和依赖数组注入。

参数名注入:

将待注入函数定义转化为字符串，通过正则表达式检查其参数表

1 //myfunc通过参数表声明这个函数依赖于"$http"服务
2 var myfunc = function($http){
3     //do sth. with $http
4 };
5 injector.invoke(myfunc);//myfunc的定义将被转化为字符串进行参数名检查

依赖数组注入

数组的最后一项是实际要执行的函数，其他项则指明需要向该函数注入的服务名称。注入器将按照数组中的顺序，依次向函数注入依赖对象

1 //myfunc依赖于"$http"和"$compile"服务
2 var myfunc = ["$http","$compile",function(p1,p2){
3     //do sth. with p1($http),p2($compile)
4 }];
5 injector.invoke(myfunc);