(五)Angularjs - 依赖注入

如何找到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);
时间: 2024-10-11 15:13:27

(五)Angularjs - 依赖注入的相关文章

AngularJS 依赖注入

什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则.与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖 一句话 --- 没事你不要来找我,有事我会去找你. AngularJS

AngularJS依赖注入

<html> <head> <meta charset="utf-8"> <title>AngularJS 依赖注入</title> </head> <body> <h2>AngularJS 简单应用</h2> <div ng-app = "mainApp" ng-controller = "CalcController"> &

AngularJS开发指南10:AngularJS依赖注入的详解

依赖注入是一种软件设计模式,用来处理代码的依赖关系. 一般来说有三种方法让函数获得它需要的依赖: 它的依赖是能被创建的,一般用new操作符就行. 能够通过全局变量查找依赖. 依赖能在需要时被导入. 前两种方式都不是很好,因为它们需要对依赖硬编码,使得修改依赖的时候变得困难.特别是在测试的时候不好办,因为对某个部分进行孤立的测试常常需要模拟它的依赖. 第三种方式是最好的,因为它不必在组件中去主动寻找和获取依赖,而是由外界将依赖传入. 举个例子: function SomeClass(greeter

Angularjs - 依赖注入机制,多方协助共同开发

http://www.imooc.com/video/2862 在Angularjs中,ng-app只能出现一次.也就是说只能加载一次模块.当模块中的控制器成千上万时,就需要分成多个开发员同步开发了. 这时为了能达到效率不可能让多个开发人员更改同一个js文件.需要分成多个模块多个js文件开发.然后有两种方式合并, 1.使用grunt合并功能.甚至手动合并 2.使用angularjs的依赖注入机制,事实上就是定义模块时的第二个参数数组[]中,除了正常的组件名(如ui.router),还可以加入其他

angularjs——依赖注入

angularjs把所有的功能组件都以依赖注入的方式组织起来,所有的组件必须通过容器(注入器)才能相互访问,从而来解耦 ; 1.注入器存储了所有的配方(名称+类构造函数):angualrjs启动时,组件(Provider)首先通过名称在注入器内注册; 2.组件要求提供一个$get函数(类工厂),injector通过调用该函数,获得组件的实例 <html> <head> <title>修改数据</title> <meta charset='utf-8'&

EJB学习(五)——依赖注入

    一.Why? 我们在客户端调用服务端对象的时候,通常需要通过服务器的 JNDI 来查找session bean或MDB.JNDI 查找是把客户端与实际的服务端实现解藕的关键步骤. 但是, 直接使用一个字符串来进行 JNDI 查找并不优雅.有这样几个原因: · 客户端与服务端必须有一致的基于字符串的名字. 它没有在编译时得到认证或在部署时得到检查. · 从 JNDI 返回的服务对象的类型没有在编译时进行检查, 有可能在运行时出现转换(casting)错误. · 冗长的查找代码,有着自己的

依赖注入及AOP简述(五)——依赖注入的方式 .

二.依赖注入的应用模式 前面我们了解了依赖注入的基本概念,也对一些依赖注入框架进行了简单的介绍,这一章我们主要来讨论作为开发者如何利用依赖注入框架来实现依赖注入的设计思想. 1.     依赖注入的方式 前面我们提到,所谓“依赖”,最简单地去解释就是一个Java类里的成员变量.我们都知道,给一个类中的私有成员变量赋值的方法通常有:通过Constructor构造方法.通过Setter方法.通过反射机制将私有变量的可见性设为true这三种方法.同样道理,依赖注入框架也是利用这三种方式来完成依赖对象的

AngularJs依赖注入写法笔记

下面两种依赖注入写法等价: [第一种] app.controller('lrNListingController', function (Notifier, Private, timefilter, config) { // const Notifier = $injector.get('Notifier'); // const Private = $injector.get('Private'); // const timefilter = $injector.get('timefilter'

模拟AngularJS之依赖注入

一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的. 下面,我们看看AngularJS中常用的实现方式. 方法一:推断式注入声明,假定参数名称就是依赖的名称.因此,它会在内部调用函数对象的toString()方法,分析并提取出函数参数列表,然后通过$injector将这些参数注入进对象实例. 如下: //方法一:推断式注入声明,假定参数名称就是依赖