4.了解AngularJS模块和依赖注入
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;
}]);
4.了解AngularJS模块和依赖注入的更多相关文章
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- 理解AngularJS中的依赖注入
点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...
- 详解AngularJS中的依赖注入
点击查看AngularJS系列目录 依赖注入 一般来说,一个对象只能通过三种方法来得到它的依赖项目: 我们可以在对象内部创建依赖项目 我们可以将依赖作为一个全局变量来进行查找或引用 我们可以将依赖传递 ...
- AngularJS学习之依赖注入
1.什么是依赖注入:简称DI,是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端 ...
- --@angularJS--路由、模块、依赖注入
以下是演示angular路由切换的demo. 主页:index.html <!doctype html><html ng-app="bookStoreApp"&g ...
- AngularJs-MVC之路由、模块以及依赖注入
前面呢,我们大概的了解了下AngularJs的入门,也做过了hello world的一个demo,不知道大家有没有掌握呢?在下面我们需要讲一些AngularJS的一些干货. 1,一个完整项目的目录结构 ...
- AngularJS中的依赖注入
依赖注入 | Dependency Injection 原文链接: Angular Dependency Injection翻译人员: 铁锚翻译时间: 2014年02月10日说明: 译者认为,本文中所 ...
- AngularJS的路由、模块、依赖注入
AngularJS的路由在实际应用中更多是由另外封装好的angular-ui-router.js实现的! 为什么不用Ajax而要用前端路由?
- AngularJS源码分析之依赖注入$injector
开篇 随着javaEE的spring框架的兴起,依赖注入(IoC)的概念彻底深入人心,它彻底改变了我们的编码模式和思维.在IoC之前,我们在程序中需要创建一个对象很简单也很直接,就是在代码中new O ...
随机推荐
- 新版WampServer项目路径前面没有localhost
1.第一种情况:http://localhost/页面中不能访问 解决方式: 在www目录下找到index.php 然后修改里面查找$projectContents 或直接查看338行代码 修改'ht ...
- RHEL提示RHN没有注册问题的解决方法
1.系统RHEL5.5,初次使用yum时出现以下问题: [root@localhost real]# yum update Loaded plugins: rhnplugin, security Th ...
- Jsp与servlet的区别 1
Jsp与servlet的区别 2011-12-09 16:27:47 分类: Java 1.jsp经编译后就变成了Servlet.(JSP的本质就是Servlet,JVM只能识别java的类,不能识 ...
- js的元素对象
元素对象(element对象) ** 要操作element对象,首先必须要获取到element, - 使用document里面相应的方法获取 ...
- dubbo 教程
阿里巴巴dubbo主页:http://code.alibabatech.com/wiki/display/dubbo/Home-zh 1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提 ...
- OCS 开放缓存服务
开放缓存服务( Open Cache Service,简称OCS)是在线缓存服务,为热点数据的访问提供高速响应.说白了,就是一款基于memcached开发的对外云缓存服务器,完全可以把OCS当成mem ...
- Unity3D
一.安装配置 1.下载页面:http://unity3d.com/get-unity 分个人版本和专业版,个人版免费,但少了很多功能(主要是渲染相关,具体请看官方说明), 专业版是每月 75$ 或一次 ...
- jQuery 学习之路(2):选择器与过滤器
一.基本选择器 标签选择器: $('button') ID选择器: $('#id1') 类选择器: $('.class1') 多重选择器: $('#id1,.class1,button') 全体选择器 ...
- 从svn检出项目---------不是web项目
javaweb项目从svn检出变成java项目 javaweb项目从svn检出后变成java项目,解决办法是: 1.项目右键–properties–Project Facets,勾选上Dynamic ...
- 谈谈我眼中的CSDN吧
昨天逛博客园看到了这篇曝光率很高的文章:博客搬家——从CSDN到博客园,一篇短短的文章竟然招致这么多人的讨论,可能程序员就喜欢“Java好还是PHP好”这类型的问题吧,好无聊.由于我一直在使用CSDN ...