AngularJS(十):依赖注入

本文也同步发表在我的公众号“我的天空

依赖注入

依赖注入不是AngularJS独有的概念,而是现代软件开发与架构的范畴,但是在AngularJS中“依赖注入”是其核心思想之一,所以我们专门来学习一下。

观察除“AngularJS路由”这节之前的控制器代码,发现我们把所有的业务逻辑都写在控制器代码部分,当代码规模小还好处理,随着代码规模扩大,这样的做法很快就会使代码变的难以维护,控制器将变成一个代码垃圾场,我们要做的所有东西都会倒在里面,它们会变的非常难以理解且难以修改。这种情况下,我们自然会想到代码分离,将功能类似的代码抽取出来单独写成一个模块,就像我们会将JS抽取出来写成一个个JS外部文件一样,使用的时候将其引入即可。

再来观察“AngularJS路由”这节的代码,我们引用模块的方式与之前有了显著的不同:

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

对于angular.mmodule()方法的第二个参数,之前我们一直都是一个空数组,而在路由功能实现中,由于我们要依赖angular-route.min.js中的ngRoute模块来实现路由功能,因此将第二个参数设置为[‘ngRoute‘],该数组参数就是放置我们所要依赖的其他模块名,如果我们要依赖多个模块,则继续将模块名添加到该数组中就可以了,类似[‘module1‘,‘module2‘...]。

当我们引用了依赖的ngRoute后,就可以使用$routeProvider了,利用其config()函数来实现路由功能。期间我们并不需要调用任何函数去创建$routeProvider,我们也不用关心这个对象是如何生成的、其内部工作机制如何,只要拿来使用就够了,就像把$routeProvider注入到我们的代码里似的。再联想到我们一直使用的$scope、实现http服务的$http等对象都是贯彻了这一宗旨。因此通俗来说“依赖注入”就是在需要的时候把我们所依赖的模块功能注入到程序中。

接下来我们自己编写一个模块,并注入到程序中:

var app=angular.module("MathService",[])
app.factory(‘myMath‘,function(){
    var my={};
    my.add=function(a,b){
        return a+b;
    }
    return my;
});

Math.js

<head>
   <script src="Angular.js"></script>
  <script src="Math.js"></script>
 </head>
 <body ng-app="myApp" ng-controller="ctr">
   {{result}}
 </body>
 <script>
    var app=angular.module("myApp",[‘MathService‘]);
      app.controller("ctr",function($scope,myMath){
          $scope.result=myMath.add(1,21);
    })
 </script>

示例代码AngularJS_26.html

在Math.js中,我们首先定义了模块的名称为“MathService”,接下来使用factory()来定义“myMath”服务,事实上在AngularJS中的服务均为一个单例对象(即只会创建一个实例的对象),在该服务中实现了一个add()方法,返回两个数的和。

接下来看在示例26中如何使用这个模块。首先我们引入了Math.js。在模块声明中,我们将第二个参数的值设置为“[‘MathService‘]”,这个就是我们实现功能所要依赖的模块,接下来在控制器代码中,我们注入了myMath服务,并且使用myMath.add()方法,实现两数求和。

在AngularJS中,创建服务的方法除了factory()外,还有value()、provider()、service()和constant()等方法,其适用的范围及功能均有所不同,请自行查阅相关文档。

整个AngularJS系列就到此结束了,实际上该系列只是介绍了AngularJS的入门,把自己的学习过程写出来的而已。对于更深入的知识我和大家一样都需要继续再学习。

该系列的示例代码

https://github.com/panyongwow/angularJS

时间: 2024-12-15 08:47:35

AngularJS(十):依赖注入的相关文章

AngularJS的依赖注入方式

在定义controller,module,service,and directive时有两种方式, 方式一: var myModule = angular.module('myApp', []); myModule.controller('myCtrl', ['$scope', 'Project', function($scope, Project) { }]); 方式二: var myModule = angular.module('myApp', []); function myCtrl($

AngularJS DI(依赖注入)实现推测

AngularJS DI(依赖注入) http://www.cnblogs.com/whitewolf/archive/2012/09/11/2680659.html 回到angularjs:在框架中为我们提供了angular.injector(modules)DI注入注射器.但是在我们使用注入的时候常常是不需要关心具体的如何注入.我们只需要按照其规则书写我们的angularjs代码就会很容易的得到angularjs的DI特性 1:推断式注入:在angularjs中我们可以在我们需要注入的地方按

AngularJS(15)-依赖注入

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

模拟AngularJS之依赖注入

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

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

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

angularjs学习笔记--$http、数据渲染到表格、路由、依赖注入、provider

1—$http 可以从服务器中获取更大的数据集,这里使用angularjs的内置服务称为$http.使用angularjs的依赖注入为phoneList组件的控制器提供服务. 在我们的控制器中使用angularjs的$http服务,向我们的web服务器发出http请求,以获取文件中的数据. app/phone-list/phone-list.component1.js: angular.module('phoneList').component('phoneList',{ templateUrl

详解AngularJS中的依赖注入

依赖注入 一般来说,一个对象只能通过三种方法来得到它的依赖项目: 我们可以在对象内部创建依赖项目 我们可以将依赖作为一个全局变量来进行查找或引用 我们可以将依赖传递到需要它的地方 在使用依赖注入时,我们采用的是第三种方式(另外两种方式都会引起其他困难的挑战,例如污染全局作用域以及使隔离变得几乎不可能).依赖注入是一种设计模式,它移除了硬编码依赖,因此使得我们可以在运行中随时移除并改变依赖项目. 在运行过程中能够修改依赖项目的能力允许我们创建隔离环境,这对于测试来说是非常理想的.我们可以用测试环境

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

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

AngularJS学习笔记之依赖注入

最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不错.但是,当我看到左上角的总页码的时候,479页....479....479....俺的小心脏被击穿了二分之一有木有啊,上半身都石化了有木有啊,那种特别想学但是看到页码又不想学的纠结的心情比和女朋友吵架了还复杂有木有啊,我平常看的电子书百位数都不大于3的好伐! 哎,原谅我吧,我应该多看几本新华字典习