AngularJS 模块及provide
一、模块
模块是一些功能的集合，如控制器、服务、过滤器、指令等子元素组成的整体。
1、注册和使用
模块相当于是一个注册表，保存着名字和编程元素的对照表，可存入也可取出。
angular.module('com.ngnice.app').service('ui',function(){..});
该代码的意思是，先取出名字为'com.ngnice.app'的模块，然后把function(){..}作为回调函数以ui为名字注册进去一个服务，其他编程元素通过该名字可以从模块中取出来使用。
2、依赖关系
模块可以依赖其他模块，模块间有依赖关系。
有个公用模块common,要用其中的名为authHandler的service，我们必须先声明这种依赖，否则，即使引用了模块common所在的js文件，也无法找到。另外，angularjs可以自动检测出循环依赖，以避免出现无限递归。
angular.module('com.ngnice.app'，['common'，'m1']);
m1可以使用common中的编程元素，不需要定义模块m1依赖模块common,只要根模块(ng-app对应的模块)依赖各个模块就行，如service。实例如下：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
var common = angular.module("common",[]);
common.service("testService",function(){this.name="test111";})
var m1 = angular.module("m1",[]);
var myApp = angular.module("myApp", ["common","m1"]);
m1.controller("Ctr1", function ($scope, testService) {
$scope.name = testService.name;
}); </script> </head>
<body>
<form>
<div ng-controller="Ctr1">
{{name}}
</div>
</div>
</form>
</body>
</html>
运行结果;
3、module方法定义
模块的创建和获取利用以下方法：
angular.module(name, [requires], [configFn]);
name：字符串类型，代表模块的名称；
requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可；
configFn：用来对该模块进行一些配置。
// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
var createModule = angular.module("myModule", []); // 只有一个参数(模块名),代表获取模块
// 如果模块不存在,angular框架会抛异常
var getModule = angular.module("myModule");
二、provide
module和provide是用来注册服务到injector中的。可以看到$provide提供了provider()、constant()、value()（与constant区别是value可修改值）、factory()、service()来创建各种不同性质的服务；angular.Module中也提供了这5个服务注册方法。provide可以直接在config阶段注入使用
module只是provide的语法糖而已
constant
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');
其编译后，也是在config里执行的
provider
其是一个可配置的factory,config只能注入provider即供应商
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');
});
AngularJS 模块及provide的更多相关文章
- 4.了解AngularJS模块和依赖注入
1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...
- AngularJS模块的详解
AngularJS模块的详解 在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规 ...
- AngularJS 模块& 表单
模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 应用("myApp") 带有控制器 ("myCtrl&qu ...
- AngularJS 模块
模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 你可以通过 AngularJS 的 angular.module 函数来创建模块: &l ...
- AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...
- AngularJS标准Web业务流程开发框架—1.AngularJS模块以及启动分析
前言: AngularJS中提到模块是自定义的模块标准,提到这不得不说AngularJS是框架中的老大哥,思想相当的前卫..在这框架满天横行的时代,AngularJS有些思想至今未被超越,当然仁者见仁 ...
- 在文件中的AngularJS模块
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 在body中的AngularJS模块
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 【13】AngularJS 模块
AngularJS 模块 模块定义了一个应用程序.(魔芋:也就是说一个ng-app代表一个应用程序,也就是一个模块,module) 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通 ...
随机推荐
- Eloquent Attach/Detach/Sync Fires Any Event
eloquent-attach-detach-sync-fires-any-event I have a laravel project, and I need to make some calcul ...
- Python之路(第十三篇)time模块、random模块、string模块、验证码练习
一.time模块 三种时间表示 在Python中,通常有这几种方式来表示时间: 时间戳(timestamp) : 通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.(从 ...
- Django 文章标签功能
使用第三方框架django-taggit为模型添加标签功能,此模块是一个可复用的应用 首先安装 https://github.com/alex/django-taggit 这是项目主页 pip ins ...
- 【Web】Nginx Rewrite规则
Rewrite介绍 Rewrite主要的功能就是实现URL的重写,Nginx的Rewrite规则采用Pcre,perl兼容正则表达式的语法规则匹配,如果需要Nginx的Rewrite功能,在编译Ngi ...
- ubuntu下使用fstab挂载硬盘时，属于root，如何把它改为属于一个用户的（如sgjm)
http://zhidao.baidu.com/link?url=xnakfVD16EtunTSt3wBm153DyqHnXN3FSPO1E_2SpVmM5bmEIwICLA0N6zN85_ioQ3f ...
- gcc -ldl 选项作用
如果你的程序中使用dlopen.dlsym.dlclose.dlerror 显示加载动态库,需要设置链接选项 -ldl 加载动态链接库,首先为共享库分配物理内存,然后在进程对应的页表项中建立虚拟页和物 ...
- unity3d的执行顺序
- Django的学习（二）————Templates
一.django的模板: 在settings.py的文件中可以看到并设置这个模板. 1.直接映射: 通过建立的文件夹(templates)和文件(html)来映射. <!DOCTYPE html ...
- 31、iOS 正则表达式判断UITextField是否为全汉字，全字母，全数字，数字和字母
判断全汉字 if ([self deptNameInputShouldChinese]) { [DemonAlertHelper showToastWithMessage:@"只能是中文&q ...
- 2019.01.23 hdu1693 Eat the Trees（轮廓线dp）
传送门 题意简述:给一个有障碍的网格图,问用若干个不相交的回路覆盖所有非障碍格子的方案数. 思路:轮廓线dpdpdp的模板题. 同样是讨论插头的情况,只不过没有前一道题复杂,不懂的看代码吧. 代码: ...