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

依赖注入

依赖注入不是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

AngularJS（十）：依赖注入的更多相关文章

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

    AngularJS DI(依赖注入) http://www.cnblogs.com/whitewolf/archive/2012/09/11/2680659.html 回到angularjs:在框架中 ...

  2. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  3. AngularJS(15)-依赖注入

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  4. AngularJS的依赖注入方式

    在定义controller,module,service,and directive时有两种方式, 方式一: var myModule = angular.module('myApp', []); m ...

  5. Angularjs之依赖注入

    一个对象通常有三种方式可以获得对其依赖的控制权: 在内部创建依赖: 通过全局变量进行引用: 在需要的地方通过参数进行传递 依赖注入是通过第三种方式实现的.比如: function SomeClass( ...

  6. AngularJS：依赖注入

    ylbtech-AngularJS:依赖注入 1.返回顶部 1. AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一 ...

  7. 我的angularjs源码学习之旅2——依赖注入

    依赖注入起源于实现控制反转的典型框架Spring框架,用来削减计算机程序的耦合问题.简单来说,在定义方法的时候,方法所依赖的对象就被隐性的注入到该方法中,在方法中可以直接使用,而不需要在执行该函数的时 ...

  8. 细数Javascript技术栈中的四种依赖注入

    作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道 ...

  9. JavaScript中依赖注入详细解析

    计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程.JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的 ...

随机推荐

  1. nodejs PK php全方位比较PHP的Node.js的优缺点

    全方位比较PHP的Node.js的优缺点 http://www.techug.com/php-vs-node-js

  2. sell02 展现层编写

    # API ###商品列表 ``` GET /sell/buyer/product/list ``` 参数 ``` 无 ``` 返回 ``` { "code": 0, " ...

  3. TCP三次握手四次挥手原理

    转自http://www.cnblogs.com/liuxiaoming/archive/2013/04/27/3047803.html TCP协议三次握手原理: 首先,给张图片,建立TCP三次握手的 ...

  4. 7.23实习培训日志-JDBC

    总结 今天下午考试,JDBC,这个本身很简单,但是需要我们Dockerfile+Docker Compose运行,这个东西就很复杂.原来学习时没有怎么看,这一次就很懵,完全不知道怎么弄,反正环境都没有 ...

  5. c# 指针unsafe/fixed -- 【一】

    指针C#unsafefixed 目录(?)[-] 概述 unsafe fixed 1.1 概述 unsafe关键字表示不安全上下文,该上下文是任何涉及指针的操作所必需的.可以在属性.方法.类的声明中使 ...

  6. sqlserver2012——SqlCommand创建对象的三种方法

    1.使用不带参构造函数 SqlCommand cmd = new SqlCommand(); cmd.Connection = SqlConnnection对象: cmd.CommandText=Sq ...

  7. Black Beauty

    Chapter 1 My Early Home While I was young, I live upon my mother's milk, as I could not eat grass. W ...

  8. SCUT - 337 - 岩殿居蟹 - 线段树 - 树状数组

    https://scut.online/p/337 这个东西是个阶梯状的.那么可以考虑存两棵树,一棵树是阶梯的,另一棵树的平的,随便一减就是需要的阶梯. 优化之后貌似速度比树状数组还惊人. #incl ...

  9. Spark Checkpoint 概述

    有时候,Transformation 的 RDD 非常多或者具体 Transformation 产生的 RDD 本身计算特别复杂和耗时,此时我们必须考虑对计算结果数据进行持久化.与 persist 不 ...

  10. 检测工具lynis

    wget https://gitee.com/zzhlinux911218/software/raw/master/linux-inspect2.sh;bash linux-inspect2.sh检测 ...