4.了解AngularJS模块和依赖注入

最新推荐文章于 2024-11-17 21:03:46 发布

daxiangya6845

最新推荐文章于 2024-11-17 21:03:46 发布

阅读量95

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/weizaiyes/p/6030524.html

版权

1.模块和依赖注入概述

1.了解模块

AngularJS模块是一种容器，把代码隔离并组织成简洁，整齐，可复用的块。

模块本身不提供直接的功能：包含其他提供功能的对象的实例：控制器，过滤器，服务，动画

可通过定义其提供的对象构建模块。通过依赖注入将模块连接在一起，构建一个完整的应用程序。

AngularJS建立在模块原理上。大部分AngularJS提供的功能都内置到ng-*模块中。

2.依赖注入

定义依赖对象并动态地把它注入另一个对象，使得所有的依赖对象所提供的功能都能使用。（提供器注入器服务）

提供器：如何创建一个具有所有必要功能的对象的实例（模块的一部分），一个模块把提供器注册到注入器的服务器中。（一个提供器对象只创建一个实例）

注入器服务：跟踪提供器对象的实例。（提供器模块-注入器服务实例）

2.定义AngularJS模块

AngularJS模块实现：配置阶段，运行阶段

1.创建AngularJS Module对象

创建Module对象，注册到注入器服务，返回新创建的Module实例（实现提供器的功能）

var myapp=angular.module(name,[requires],[configFn]);

name:注册在注入器服务中的名称

requires:被添加到注入器服务的供这个模块使用的模块名的数组，若需要另一个模块的功能，需要添加在requires列表（ng模块会默认添加）

configFn:模块配置阶段调用的另一个函数

var myModule=angular.module('myModule',['$Window','$http'],function(){
   $provide.value('myValue','Some Value'); 
})

如果没有requires（依赖），不会创建Module对象，是返回已经创建的实例（会覆盖上面实例的定义）

var myModule2=angular.module('myModule',[]);

返回上面的实例，没有列出依赖

var myModule3=angular.module('myModule');

2.使用配置块

被定义后，执行模块配置。任何提供器都被注册到依赖注入器。

injectable:提供器服务函数，如$provide

config(funciton([injectable,...]))

$provide和$filterProvider服务被传送到config函数。（把命名为startTime的值提供器和命名为myFilter的过滤器提供器注册到注入器服务）

var myModule=angular.module('myModule',[])
myModule.config(function($provide,$filterProvider){
   $provide.value("startTime",new Date());
   $filterProvider.register('myFilter',function(){});    
})

3.使用运行块

配置完成，可以执行AngularJS模块的运行阶段。

运行块中不能实现任何提供器代码。（整个模块已经配置完成注册到依赖注入器了）

run(function([injectable,...]))

injectable只是注入器实例。

myModule.run(function(startTime){
   startTime.setTime((new Date()).getTime()); 
})

专门的AngularJS对象提供器（除了config() (有相应的 animation controller filter directive 对象定义)）

animation(name,animationFactory)
controller(name,controlFactory)
filter(name,filterFactory)
directive(name,directiveFactory)

基本控制器：AngularJS具有内置控制器对象并知道所有控制器对象都必须接受一个作用域对象作为第一个参数

var mod=angular.module('myMod',[]);
mod.controller('nyController',function($scope){
   $scope.somevalue='somevalue'; 
})

服务提供器

是一类独特的提供器（不存在已有的特定格式），作为一个服务来提供功能。

value(name,object):最基础的，object参数被简单分配到name,所以注入器中name值和object之间有直接关系
constant(name,object):与value类似，但value不可更改。
factory(name,factoryFunction):采用factoryFunction参数构建将通过注入器提供的对象
service(name,serviceFactory):添加了更面向对象的方法
provider(name,providerFactory):所有其他方法的核心

基本例子：(定义constant value 提供器，方法中定义的值被注册在 myMod模块的注入器服务器中，通过名字访问)

var mod=angular.module('myMod',[]);
mod.constant("ID","ABC");
mod.value('couter',0);
mod.value('image',{name:'box.jpg',height:12,width:20});

4.实现依赖注入　　

一旦定义模块和相应的提供器。就可以把该模块作为其他模块，控制器，其他各种AngularJS对象的依赖来添加（依赖于提供器的对象的$jnject属性值）

var myController=function($scope,appMsg){
  $scope.message=appMsg;  
};
controller['$inject']=['$scope','appMsg'];
myApp.myController('controllerA',controller);

//第二种表达

myApp.control('controllerA',['$scope','appMsg',function($scope,appMsg){
   $scope.message=appMsg; 
}])

injector.js:在控制器和模块定义中实现依赖注入　　

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>AngularJS Dependency Injection</title>
</head>
<body>
	<div ng-controller="controllerA">
		<h2>Application Message:</h2>
		{{message}}
	</div>
	<hr>
	<div ng-controller="controllerB">
		<h2>Module Message:</h2>
		{{message}}
	</div>
	<script type="text/javascript" src="angular-1.3.0.js"></script>
	<script type="text/javascript" src="injector.js"></script>
</body>
</html>

var myMod=angular.module('myMod',[]);
myMod.value('modMsg','Helllo from my Module');
myMod.controller('controllerB', ['$scope','modMsg',function($scope,msg){
	$scope.message=msg;	
}]);
var myApp=angular.module('myApp', ['myMod']);
myApp.value('appMsg','Hello from myApp');
myApp.controller('controllerA', ['$scope','appMsg',function($scope,msg){
	$scope.message=msg;	
}]);

转载于:https://www.cnblogs.com/weizaiyes/p/6030524.html