`
bjtale
  • 浏览: 29632 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

深入angular.js依赖注入

阅读更多

  angular.js是实现了依赖注入的前端框架,通常这个概念出现在spring类似的后端框架中。angular.js对依赖注入的实现思路是:定义和动态地注入依赖对象到另一个对象中,使注入对象中可使用所有依赖注入对象提供的功能。

  有人将这种实现区分为提供者和注入器:

  1)提供者,本质上是angular.js模块的一部分,模块使用注入器注册提供者,提供者实际上是包含了所有注入者提供的必须功能对象的实例。

  2)注入器,作为一种服务负责监控提供者对象的实例。为每一个使用提供者的模块提供一个注入器服务实例,提供者对象收到依赖请求时,注入器服务即返回目标实例。

<!DOCTYPE HTML>
<html ng-app='myApp'>
	<head>
		<meta charset='utf-8'>
		<title>3</title>
	</head>

	<body>
		<div ng-controller='CtrlA'>

			<h3>Message from myApp:</h3>
			{{message}}
		</div><hr>

		<div ng-controller='CtrlB'>

			<h3>Message from module:</h3>
			{{message}}
		</div>
		<script src='http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js'></script>
		<script>
			var mod = angular.module('myMod',[]);
			mod.value('msgA','Message from a module');
			mod.controller('CtrlB',['$scope','msgA',function($scope,msg){
				$scope.message = msg;
			}]);

			var myApp = angular.module('myApp',['myMod']);
			myApp.value('msgB','Message from app bases module');
                        //msgA,msgB available here.
			myApp.controller("CtrlA",['$scope','msgB',function($scope,msg){
				$scope.message = msg;
			}])
		</script>
	</body>
</html>

  以上示例实现了自定义提供者,首先将myMod模块注入到myApp模块中,并且每一个模块都存在值提供者。这种注入会使myApp模块同时具有CtrlA和CtrlB控制器的功能,因此在该模块中可以同时使用自定义值提供者和另一模块的值提供者。

 

分享到:
评论

相关推荐

    Angular.js v1.8.3.zip

    - **依赖注入**:Angular.js的DI系统允许开发者轻松地在组件之间共享服务,降低了代码的耦合度。 - **指令**:自定义HTML标签和属性,扩展了HTML的功能,使页面元素具备更多的交互性和动态性。 - **过滤器**:...

    angular.js 本地引用

    在前端开发领域,AngularJS(通常简称为Angular.js)是一个非常流行且强大的JavaScript框架,由Google维护。这个框架主要用于构建动态、单页Web应用程序(SPA),它提供了丰富的功能来简化前端开发过程,包括数据...

    angular.js

    - **依赖注入(Dependency Injection,DI)**:Angular.js提供了一个强大的DI系统,使得组件之间能够轻松地共享服务和资源,无需手动实例化对象或管理依赖关系。 - **指令(Directives)**:Angular.js的一大创新是...

    angular.js-master.zip

    2. **依赖注入**:AngularJS的依赖注入系统允许开发者在不关心对象如何创建或管理的情况下,轻松地在组件间共享服务。只需声明所需的依赖,AngularJS就会自动注入。 3. **指令**:AngularJS中的指令扩展了HTML的...

    angular.min.v125.rar(亲测可用)

    2. **依赖注入**:Angular.js的依赖注入系统简化了代码结构,通过自动管理对象之间的依赖关系,使代码更易于测试和维护。 3. **指令系统**:Angular.js通过自定义HTML指令扩展了DOM,允许创建行为丰富的用户界面,...

    angular.js资料

    3. 依赖注入:Angular.js支持依赖注入,这有利于模块化代码和组件的复用。 4. 指令(Directives):指令是Angular.js中非常核心的概念,允许你通过HTML标签、属性、类和注释来扩展HTML的语法。 5. 服务和工厂:用于...

    angular.js后台管理系统.zip

    Angular.js,作为一个强大的前端JavaScript框架,由Google维护,被广泛应用于构建复杂的单页应用(SPA)和后台管理系统。本篇将深入探讨Angular.js的核心特性、架构设计以及如何在实际项目中构建一个后台管理系统。 ...

    angular.js-1.6.9

    AngularJS,作为一款由Google维护的前端JavaScript框架,是MVVM(Model-View-ViewModel)模式的杰出代表,以其强大的数据绑定、依赖注入和模块化功能深受开发者喜爱。在1.6.9这个版本中,我们看到对稳定性和性能的一...

    angular.js-1.3

    1. **依赖注入**:AngularJS的依赖注入系统是其核心功能之一。在1.3版本中,依赖注入更加智能,能够自动识别并注入所需的依赖服务,使得代码更简洁,可维护性更强。 2. **$http服务增强**:在1.3版本中,$http服务...

    ssm+springsecurity+angular.js前后分离小练习

    Spring提供了一个全面的应用开发框架,包括依赖注入、事务管理、AOP(面向切面编程)等。Spring MVC是Spring框架的一部分,用于构建Web应用的模型-视图-控制器结构。MyBatis则是一个轻量级的持久层框架,它简化了...

    angular.js+webapi Demo

    3. **依赖注入(Dependency Injection)**:Angular.js的DI系统允许开发者轻松获取并管理应用程序中的服务,如 `$http` 用于HTTP请求,`$scope` 作为控制器与视图间的通讯桥梁。 4. **模块(Modules)**:Angular...

    angular.js 1.5版本包括API

    `ngModule`提供了一种创建和依赖注入模块的方法,这有助于保持代码的清晰性和可维护性。你可以通过`.module()`方法创建一个模块,并通过`.requires`参数指定其依赖的其他模块。 2. **组件化**: 1.5版本引入了组件...

    Angular.js.zip

    Angular.js,通常简称为Angular,是由Google维护的一个开源JavaScript框架,用于构建单页应用程序(SPA)。这个框架的主要目标是简化前端开发,通过提供强大的数据绑定和依赖注入机制,让开发者可以更加专注于应用...

    angular.js-1.3.0

    1. **依赖注入**:AngularJS的核心特性之一是依赖注入(Dependency Injection,DI),它简化了代码的编写和测试。在1.3.0版本中,DI系统更加健壮,能够自动处理未定义的依赖,提高了代码的容错性。 2. **$scope**:...

    angular-1.7.7.zip

    2. **依赖注入**:Angular.js使用依赖注入(DI)来管理组件之间的依赖关系。开发者无需手动实例化对象或管理对象间的依赖,而是由框架自动处理,提高了代码的可测试性和可维护性。 3. **指令系统**:Angular.js的指令...

    angular.min.js

    AngularJs(简称ng)是一个用于...为了实现这些,ng引入了一些非常棒的特性,包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定,能够让我们摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上。

    Angular.js跨controller实现参数传递的两种方法.docx

    Service是Angular.js中的一个核心概念,它是一种单例对象,可以在应用的任何地方被注入并使用。为了在Controllers之间传递参数,我们可以创建一个自定义Service,提供getter和setter方法来存储和获取数据。 ```...

    Angular-apollo-angular.zip

    Angular-apollo-angular.zip,为Angular和每个GraphQL服务器Apollo Angular提供功能齐全、可用于生产的...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。

    angular.js:Angular.js 的 Shim 存储库

    在Angular.js中,开发者可以利用数据绑定、依赖注入、指令、服务等核心特性来构建功能丰富的Web应用。数据绑定允许视图和模型之间的自动同步,依赖注入简化了组件之间的通信,而指令则扩展了HTML,使其能够表达更...

    angular.js-1.6.4

    从模块化设计到数据绑定,再到依赖注入和服务,AngularJS提供了一个全面的解决方案,助力开发者构建功能丰富的、响应式的Web应用程序。无论是初学者还是经验丰富的开发者,深入理解和掌握AngularJS 1.6.4的知识点,...

Global site tag (gtag.js) - Google Analytics