一、模块

  模块是一些功能的集合,如控制器、服务、过滤器、指令等子元素组成的整体。

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的更多相关文章

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

    1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...

  2. AngularJS模块的详解

    AngularJS模块的详解 在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规 ...

  3. AngularJS 模块& 表单

    模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 应用("myApp") 带有控制器 ("myCtrl&qu ...

  4. AngularJS 模块

    模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 你可以通过 AngularJS 的 angular.module 函数来创建模块: &l ...

  5. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  6. AngularJS标准Web业务流程开发框架—1.AngularJS模块以及启动分析

    前言: AngularJS中提到模块是自定义的模块标准,提到这不得不说AngularJS是框架中的老大哥,思想相当的前卫..在这框架满天横行的时代,AngularJS有些思想至今未被超越,当然仁者见仁 ...

  7. 在文件中的AngularJS模块

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. 在body中的AngularJS模块

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. 【13】AngularJS 模块

    AngularJS 模块 模块定义了一个应用程序.(魔芋:也就是说一个ng-app代表一个应用程序,也就是一个模块,module) 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通 ...

随机推荐

  1. iOS.BackgroundTask

    Background Task 的运行时间在iOS 6及以前有大约10分钟左右,在iOS 7中有180秒. Reference: 1. Multitasking in iOS 7 http://www ...

  2. 修改别人写的Hibernate数据库操作代码

    最近正在维护别人写的一个关于Hibernate操作数据库的项目,在运行测试的时候(向表中插入记录),报了一个错误:cannot insert a null into column(XXX字段名,下文统 ...

  3. HISAT2,StringTie,Ballgown处理转录组数据

    HISAT2,StringTie,Ballgown处理转录组数据 本文总阅读量次2017-05-26 HISAT2,StringTie,Ballgown处理转录组数据思路如下: 数据质控 将RNA-s ...

  4. Spring ConversionService 类型转换(一)Converter

    Spring ConversionService 类型转换(一)Converter Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.h ...

  5. 2017/2/10springMVC中文乱码问题

    springMVC中文乱码问题 一:从jsp传到后台控制出现的乱码有以下两个方面: 1.当提交方式为get的时候(因为字符拦截器无法拦截get): 修改方法为: 再改工程里的tomcat的配置文件se ...

  6. 【Git】 GitLab服务器社区版安装与配置

    GitLab简介 GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务 GitLab系统架构 当~git在图片中引用时,它表示git用户的主目录 ...

  7. 【WebService】调用第三方提供的webService服务(七)

    互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示,下面就以获取天气预报数据和查询国内手机号码归属地为 ...

  8. PHP字符串转实体函数

    与HTML实体相关的函数 htmlspecialchars函数 描述:预定义的字符转换为HTML实体 语法:string htmlspecialchars(string $string [,int $ ...

  9. c#泛型与其他语言的对比(深入理解c#)

    1.同c++模板的对比: c++模板有点像是发展到极致的宏.他们非常强大,但代价就是代码膨胀和不易理解. 在c++中使用一个模板时,会为那一套特定的模板实参编译代码,好在模板实参本来就在源代码中一样. ...

  10. centos7 安装网卡

    1.虚拟机测试,先开启命令行 su systemctl set-default multi-user.target reboot 2.编辑网卡 虚拟机网络设置成桥接模式 vi /etc/sysconf ...