依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式。这减轻一个组成部分，从定位的依赖，依赖配置。这有助于使组件可重用，维护和测试。

AngularJS提供了一个至高无上的依赖注入机制。它提供了一个可注入彼此依赖下列核心组件。

  • 值

  • 工厂

  • 服务

  • 提供者

  • 常值

值

值是简单的JavaScript对象，它是用来将值传递过程中的配置相位控制器。

//define a module

var mainApp = angular.module("mainApp", []);

//create a value object as "defaultInput" and pass it a data.

mainApp.value("defaultInput", 5);

...

//inject the value in the controller using its name "defaultInput"

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {

      $scope.number = defaultInput;

      $scope.result = CalcService.square($scope.number);

      $scope.square = function() {

      $scope.result = CalcService.square($scope.number);

   }

});

工厂

工厂是用于返回函数的值。它根据需求创造值，每当一个服务或控制器需要。它通常使用一个工厂函数来计算并返回对应值

//define a module

var mainApp = angular.module("mainApp", []);

//create a factory "MathService" which provides a method multiply to return multiplication of two numbers

mainApp.factory('MathService', function() {

   var factory = {};

   factory.multiply = function(a, b) {

      return a * b

   }

   return factory;

}); 

//inject the factory "MathService" in a service to utilize the multiply method of factory.

mainApp.service('CalcService', function(MathService){

      this.square = function(a) {

      return MathService.multiply(a,a);

   }

});

...

服务

服务是一个单一的JavaScript包含了一组函数对象来执行某些任务。服务使用service()函数，然后注入到控制器的定义。

//define a module

var mainApp = angular.module("mainApp", []);

...

//create a service which defines a method square to return square of a number.

mainApp.service('CalcService', function(MathService){

      this.square = function(a) {

      return MathService.multiply(a,a);

   }

});

//inject the service "CalcService" into the controller

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {

      $scope.number = defaultInput;

      $scope.result = CalcService.square($scope.number);

      $scope.square = function() {

      $scope.result = CalcService.square($scope.number);

   }

});

提供者

提供者所使用的AngularJS内部创建过程中配置阶段的服务，工厂等(相AngularJS引导自身期间)。下面提到的脚本，可以用来创建，我们已经在前面创建MathService。提供者是一个特殊的工厂方法以及get()方法，用来返回值/服务/工厂。

//define a module

var mainApp = angular.module("mainApp", []);

...

//create a service using provider which defines a method square to return square of a number.

mainApp.config(function($provide) {

   $provide.provider('MathService', function() {

      this.$get = function() {

         var factory = {};

         factory.multiply = function(a, b) {

            return a * b;

         }

         return factory;

      };

   });

});

常量

常量用于通过配置相位值考虑事实，值不能使用期间的配置阶段被传递。

mainApp.constant("configParam", "constant value");

例子

下面的例子将展示上述所有指令。

testAngularJS.html

<html>

<head>

   <title>AngularJS Dependency Injection</title>

</head>

<body>

   <h2>AngularJS Sample Application</h2>

   <div ng-app="mainApp" ng-controller="CalcController">

      <p>Enter a number: <input type="number" ng-model="number" />

      <button ng-click="square()">X<sup>2</sup></button>

      <p>Result: {{result}}</p>

   </div>

   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

   <script>

      var mainApp = angular.module("mainApp", []);

      mainApp.config(function($provide) {

         $provide.provider('MathService', function() {

            this.$get = function() {

               var factory = {};

               factory.multiply = function(a, b) {

                  return a * b;

               }

               return factory;

            };

         });

      });

      mainApp.value("defaultInput", 5);

      mainApp.factory('MathService', function() {

         var factory = {};

         factory.multiply = function(a, b) {

            return a * b;

         }

         return factory;

      }); 

      mainApp.service('CalcService', function(MathService){

            this.square = function(a) {

            return MathService.multiply(a,a);

         }

      });

      mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {

            $scope.number = defaultInput;

            $scope.result = CalcService.square($scope.number);

            $scope.square = function() {

            $scope.result = CalcService.square($scope.number);

         }

      });

   </script>

</body>

</html>

结果

在Web浏览器打开textAngularJS.html。看到结果如下。

 

Angular JS的依赖注入的更多相关文章

  1. angular.js的依赖注入解析

    本教程使用AngularJS版本:1.5.3        angularjs GitHub: https://github.com/angular/angular.js/        Angula ...

  2. angular中自定义依赖注入的方法和decorator修饰

    自定义依赖注入的方法 1.factory('name',function () { return function(){ } }); 2.provider('name',function(){ thi ...

  3. angular路由 模块 依赖注入

    1.模块 var helloModule=angular.module('helloAngular',[]); helloModule.controller('helloNgCrtl',['$scop ...

  4. js 实现依赖注入的思想，后端框架思想搬到前端来

    前述:咱们写一些页面的时候,很多需要用ajax来实现,显示又有很多表单提交的add或者update操作,太烦了,能不能有什么方法能够简单些呢? 说实话我都是被公司给逼的 应用场景: 前后端一一对应.表 ...

  5. angular.js使用ui-router注入报错，这里是版本问题导致的

    报错如下: common.ts:604Uncaught SyntaxError: Unexpected token ) stateEvents.ts:211Uncaught SyntaxError: ...

  6. angular 工厂模式依赖注入

    import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; ...

  7. angular 服务之间依赖注入

    import { Injectable } from '@angular/core'; @Injectable() export class LoggerServiceService { constr ...

  8. angular 第二种依赖注入

    import { Injectable } from '@angular/core'; import { ProductServiceService, Product } from './produc ...

  9. 理论+案例，带你掌握Angular依赖注入模式的应用

    摘要:介绍了Angular中依赖注入是如何查找依赖,如何配置提供商,如何用限定和过滤作用的装饰器拿到想要的实例,进一步通过N个案例分析如何结合依赖注入的知识点来解决开发编程中会遇到的问题. 本文分享自 ...

随机推荐

  1. ANdroid URL

    1 Android开源项目和工具分类 http://blog.csdn.net/shimiso/article/details/40889361 2 分享45个android实例源码 http://w ...

  2. PHP获取当前时间戳，当前时间、及解决时区问题

    一.获取当前时间戳 方法1:通过time函数 time(); 方法2:通过$_SERVER中的REQUEST_TIME元素 $_SERVER['REQUEST_TIME']; 方法3:通过strtot ...

  3. DIV未知宽度高度垂直水平居中

    使用过一种算是相对来说比较好理解一些的吧算是,代码如下: <style> width:800px; height:400px; margin:0 auto; position:absolu ...

  4. Python_Day11_同步IO和异步IO

    同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. 本文讨论的背景是Linux环境下的network IO. ...

  5. 菜鸟学自动化测试（一）---- selenium IDE

    http://www.cnblogs.com/fnng/archive/2011/10/23/2222157.html

  6. 1奶茶店创业成本： 2发饰品加盟店创业成本 3眼镜行业店创业成本 从“程序员转行卖烧饼”想到IT人创业

    总结: -------奶茶店创业成本: 而这个奶茶店初期投资是:3万元加盟费+1万元保证金+8000装修+两万设备(冰柜.展示柜.收银机等等).别说赚钱,什么时候把初期投资赚回来呀! 一个店的利润就是 ...

  7. 获取$(this)子节点对象的方法

    获取$(this)子节点对象的方法: 1.children()方法: children() 方法返回被选元素的所有直接子元素. 该方法只会向下一级对 DOM 树进行遍历. 2.find()方法: fi ...

  8. Maplace.js – 小巧实用的 jQuery 谷歌地图插件

    Maplace.js是一个小的显示谷歌地图的 jQuery 插件,帮助你把谷歌地图嵌入到你的网站,快速在地图位置上创建标记和控制菜单.它需要 jQuery 和谷歌地图 API v3 支持,所以这两个都 ...

  9. ID3、C4.5、CART、RandomForest的原理

    决策树意义: 分类决策树模型是表示基于特征对实例进行分类的树形结构.决策树可以转换为一个if_then规则的集合,也可以看作是定义在特征空间划分上的类的条件概率分布. 它着眼于从一组无次序.无规则的样 ...

  10. Linux中修改环境变量导致大量命令不可用的解决办法

    如果搞死环境变量别慌张.因为ls等命令都不能使用了,所以先找到/usr/bin/目录 使用./sudo su命令获取root权限 然后在进入/etc目录 利用vim profile命令 修改profi ...