我的编程空间,编程开发者的网络收藏夹
学习永远不晚

AngularJS如何实现依赖注入

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

AngularJS如何实现依赖注入

小编给大家分享一下AngularJS如何实现依赖注入,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

简介:

首先我们需要理解什么是依赖注入?
控制反转和依赖注入有什么区别?

假定:应用程序A,需要访问外部资源C。这里使用了容器B(是指用来实现 IOC/DI 功能的一个框架程序)。
A需要访问C
B获取C然后返回给A
IOC inversion of control 控制反转:站在容器角度。B控制A,由B反向的向A注入C。即容器控制应用程序,由容器反向的向应用程序注入应用程序所需要的外部资源。
DI Dependency Injection 依赖注入:站在应用程序的角度。A依赖B获取C,B将C注入A。即应用程序依赖容器创建并注入它所需要的外部资源。

AngularJS依赖注入

Provider服务($provide)

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入:

value
factory
service
provider
constant
decorator (打酱油)

Constant

定义常量用的,这货定义的值当然就不能被改变,它可以被注入到任何地方,但是不能被装饰器(decorator)装饰

var app = angular.module('app', []);
app.config(function ($provide) {
 $provide.constant('movieTitle', 'The Matrix');
});
app.controller('ctrl', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix');
});
// 语法糖:
app.constant('movieTitle', 'The Matrix');

Value

这货可以是string,number甚至function,它和constant的不同之处在于,它可以被修改,不能被注入到config中,但是它可以被decorator装饰

var app = angular.module('app', []);
app.config(function ($provide) {
 $provide.value('movieTitle', 'The Matrix')
});
app.controller('ctrl', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix');
});
// 语法糖:
app.value('movieTitle', 'The Matrix');

Service

它是一个可注入的构造器,在AngularJS中它是单例的,用它在Controller中通信或者共享数据都很合适。

var app = angular.module('app' ,[]);
app.config(function ($provide) {
 $provide.service('movie', function () {
  this.title = 'The Matrix';
 });
});
app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});
// 语法糖:
app.service('movie', function () {
 this.title = 'The Matrix';
});

Factory

它是一个可注入的function,它和service的区别就是:factory是普通function,而service是一个构造器(constructor),这样Angular在调用service时会用new关键字,而调用factory时只是调用普通的function,所以factory可以返回任何东西,而service可以不返回(可查阅new关键字的作用)。

var app = angular.module('app', []);
app.config(function ($provide) {
 $provide.factory('movie', function () {
  return {
   title: 'The Matrix';
  }
 });
}); 
app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});
// 语法糖
app.factory('movie', function () {
 return {
  title: 'The Matrix';
 }
});

Provider

provider是他们的老大,上面的几乎(除了constant)都是provider的封装,provider必须有一个$get方法,当然也可以说provider是一个可配置的factory。

var app = angular.module('app', []);
app.provider('movie', function () {
 var version;
 return {
  setVersion: function (value) {
   version = value;
  },
  $get: function () {
   return {
     title: 'The Matrix' + ' ' + version
   }
  }
 }
});
app.config(function (movieProvider) {
 movieProvider.setVersion('Reloaded');
});
app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix Reloaded');
});

Decorator

这个比较特殊,它不是provider,它是用来装饰其他provider的,而前面也说过,他不能装饰Constant,因为实际上Constant不是通过provider()方法创建的。

var app = angular.module('app', []);
app.value('movieTitle', 'The Matrix');
app.config(function ($provide) {
 $provide.decorator('movieTitle', function ($delegate) {
  return $delegate + ' - starring Keanu Reeves';
 });
});
app.controller('myController', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves');
});

总结:

所有的供应商都只被实例化一次,也就说他们都是单例的
除了constant,所有的供应商都可以被装饰器(decorator)装饰
value就是一个简单的可注入的值
service是一个可注入的构造器
factory是一个可注入的方法
decorator可以修改或封装其他的供应商,当然除了constant
provider是一个可配置的factory

上述来源:(AngularJS中的Provider们:Service和Factory等的区别)https://segmentfault.com/a/1190000003096933

注入器($injector)

注入器负责从我们通过 provide 创建的服务中创建注入的实例。只要你编写了一个带有可注入性的参数,你都能看到注入器是如何运行的。每一个 AngularJS 应用都有唯一一个 injector,当应用启动的时候它被创造出来,你可以通过将 injector 注入到任何可注入函数中来得到它($injector 知道如何注入它自己!)。
一旦你拥有了 injector,你可以动过调用 get 函数来获得任何一个已经被定义过的服务的实例。

var movie = $injector.get('movie');
expect(movie.title).toEqual('The Matrix Reloaded');

注入器同样也负责将服务注入到函数中;例如,你可以魔法般的将服务注入到任何函数中,只要你使用了注入器的 invoke 方法:

var myFunction = function(movie) {
 return movie.title;
};
$injector.invoke(myFunction);

如果注入器只是创建一个服务的实例一次的话,那么它也没什么了不起的。它的厉害之处在于,他能够通过服务名称缓存从一个 provider 中返回的任何东西,当你下一次再使用这个服务时,你将会得到同一个对象。
因此,你可以通过调用 injector.invike 将服务注入到任何函数中也是合情合理的了。包括:

  • 控制器定义函数

  • 指令定义函数

  • 过滤器定义函数

  • provider中的$get方法(也就是factory函数)

由于constant和value总是返回一个静态值,它们不会通过注入器被调用,因此你不能在其中注入任何东西。

以上是“AngularJS如何实现依赖注入”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

AngularJS如何实现依赖注入

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

SpringBoot中如何实现注入依赖

SpringBoot中如何实现注入依赖?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。今天给大家介绍一下SpringBoot中是如何实现依赖注入的功能。在以往spring使用
2023-05-31

C#中如何实现依赖注入

在C#中实现依赖注入通常可以使用一些现成的框架,比如ASP.NET Core中自带的依赖注入容器。以下是一个简单的示例:首先,定义一个接口和一个实现该接口的类:public interface IMyService{void DoSo
C#中如何实现依赖注入
2024-04-03

ASP.NET MVC如何实现依赖注入

这篇文章主要介绍了ASP.NET MVC如何实现依赖注入,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言在java的spring中有自动注入功能,使得代码变得更加简洁灵活,
2023-06-28

java Spring中如何实现依赖注入

总得来说,Spring中依赖注入有这么三种方式:①通过set方式赋值②通过构造器赋值③通过p标签赋值java相关视频教程推荐:java视频下面我们稍稍展开来谈:1.通过set方式赋值主要用到围堵标签来传递值此处的name就是Teacher类里声明的变量名,va
java Spring中如何实现依赖注入
2019-11-15

如何在PHP中实现依赖注入

这篇文章给大家介绍如何在PHP中实现依赖注入,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。首先,我们来看一段代码:class A{ public function echo() {
2023-06-17

PHP 函数中如何实现依赖注入?

依赖注入是一种设计模式,允许在函数中注入外部依赖项。php 函数可通过使用函数参数来实现依赖注入,例如传递pdo实例来注入数据库连接。依赖注入的优点包括可测试性、可维护性和可扩展性。PHP 函数中实现依赖注入什么是依赖注入?依赖注入是一
PHP 函数中如何实现依赖注入?
2024-04-28

python依赖注入怎么实现

在Python中实现依赖注入有多种方法,下面介绍两种常用的实现方式:1. 使用第三方库:可以使用流行的依赖注入框架,例如Dagger、Inject等。这些框架提供了注解和装饰器等方式来标记依赖项,并自动解析和注入依赖项。例如,使用Dagge
2023-08-30

golang依赖注入怎么实现

在Go语言中实现依赖注入可以使用两种常见的方式:构造函数注入和接口注入。1. 构造函数注入:构造函数注入是通过在结构体中定义一个包含所需依赖的构造函数来实现的。例如:```gotype Database struct {// ...}fun
2023-09-17

php中如何使用laravel实现依赖注入

这篇文章主要介绍“php中如何使用laravel实现依赖注入”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“php中如何使用laravel实现依赖注入”文章能帮助大家解决问题。laravel容器包含控
2023-07-04

Web API中如何使用Autofac实现依赖注入

这篇文章主要介绍了Web API中如何使用Autofac实现依赖注入的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Web API中如何使用Autofac实现依赖注入文章都会有所收获,下面我们一起来看看吧。一、创
2023-06-29

Laravel的依赖注入怎么实现

这篇文章主要介绍了Laravel的依赖注入怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Laravel的依赖注入怎么实现文章都会有所收获,下面我们一起来看看吧。在Laravel中,依赖注入的实现原理是利
2023-06-29

PHP中怎样实现依赖注入

今天就跟大家聊聊有关PHP中怎样实现依赖注入,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。我们来看一段代码:class A{ public function echo() { ech
2023-06-04

AndroidHilt依赖注入的实现浅析

依赖注入是一个听起来很“高大上”的概念,但是其实很简单。本来我要接受各种参数自己构造一个对象,现在只接受一个已经实例化的对象直接作为参数
2023-01-28

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录