博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angularjs学习笔记(三)----依赖注入
阅读量:5897 次
发布时间:2019-06-19

本文共 2841 字,大约阅读时间需要 9 分钟。

一、定义

  如前所述,$scope对象被神秘的注入到了控制器中,实际上,这是因为控制器声明了它需要$scope,所以AngularJS才会创建并注入它。这套依赖管理系统可以这样总结:"为了正常工作,我需要一个依赖(协作对象):我不知道它从哪里来,也不知道它如何创建。我只知道我需要它,所以请为我提供它"。

  AngularJS拥有内建的依赖注入(dependeny injection,DI)引擎,职责如下:

  • 理解对象对其协作对象的需求。
  • 找到所需的协作对象。
  • 连接协作对象,以形成功能完备的应用。

二、注册服务

  AngularJS只连接其认识的对象。因此,接入依赖注入机制的第一步,是将对象注册在模块(module)上。我们不直接注册对象的实例,而是将对象创建方案抛给依赖注入系统。然后AngularJS解释这些方案以初始化对象,并在之后连接他们,最后成为可运行的项目。

  AngularJS的$provide服务可以注册不同的对象创建方案。之后$injector服务会解释这些方案,生成完备而可用的对象实例(已经解决好所有的依赖关系)。

  $injector服务创建的对象成为服务(service)。在整个应用的生命中,每种方案AngularJS仅解释一次,也就是说,每个对象仅有一个实例。

http://www.yiibai.com/angularjs/angularjs_dependency_injection.html

  五种对象创建方案:

  2.1 值

  定义一个名为defaultInput值,可以注入到控制器中

// 定义一个模块var mainApp = angular.module("mainApp", []);// 创建 value 对象 "defaultInput" 并传递数据mainApp.value("defaultInput", 5);...// 将 "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);   }});

  2.2 服务

  定义一个名为CalcService的服务,可以注入到控制器中

//define a modulevar 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 controllermainApp.controller('CalcController', function($scope, CalcService, defaultInput) {      $scope.number = defaultInput;      $scope.result = CalcService.square($scope.number);      $scope.square = function() {      $scope.result = CalcService.square($scope.number);   }});

  2.3 Factory

//define a modulevar mainApp = angular.module("mainApp", []);//create a factory "MathService" which provides a method multiply to return multiplication of two numbersmainApp.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);    }});...

  2.4 常量

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

  2.5 Provider

//define a modulevar 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;      };   });});

 

 

  

转载于:https://www.cnblogs.com/shanoon/p/5501464.html

你可能感兴趣的文章
ASP.NET视频教程 手把手教你做企业论坛网站 视频教程
查看>>
[LeetCode] Meeting Rooms II
查看>>
从Swift学习iOS开发的路线指引
查看>>
Scribes:小型文本编辑器,支持远程编辑
查看>>
ssh 安装笔记
查看>>
游戏音效下载网站大全
查看>>
实验五
查看>>
3-继承
查看>>
海归千千万 为何再无钱学森
查看>>
vue2.0 仿手机新闻站(六)详情页制作
查看>>
FreeRTOS的内存管理
查看>>
JSP----九大内置对象
查看>>
Java中HashMap详解
查看>>
delphi基本语法
查看>>
沙盒目录介绍
查看>>
260. Single Number III
查看>>
Hadoop生态圈-Kafka的完全分布式部署
查看>>
css的border的solid
查看>>
[MODx] Build a CMP (Custom manager page) using MIGX in MODX 2.3 -- 1
查看>>
jQuery自动完成点击html元素
查看>>