【angularJS】定义模块angular.module
模块定义了一个应用程序。控制器通常属于一个模块。
JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
AngularJS 模块让所有函数的作用域在该模块下,避免了该问题。
简单的定义一个Angular模块(module)
var app = angular.module("myApp", []);
这种方法带有两个参数,一个是模板名,一个是依赖注入列表【该模块所依赖的模块】,数组为空,表示当前注册的模板不需要依赖关系。
如果依赖不为空,则要保证其依赖的模块已经加载。这里面就有个加载顺序的问题。
最简单的情况下,我把使用模块所在的JS文件全部按顺序列在HTML的script元素中,只要保证模块之间的依赖关系正确即可,如:
<script src="/scripts/myApp.js"></script>
<script src="/scripts/app.js"></script>
如果app.js中的模块依赖模块myApp,则需先将定义它的myApp.js加载进来。在项目实践中,这种方法显然是不实际的,你不能在一开始把所有的JS文件全部加载进来。
通常会使用一些延迟/异步加载机制,如使用RequireJS。
使用RequireJS定义的Angular模块可以是这样:
define(['angular'], function(angular) {
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
//define scope data
}]);
});
其中define函数加载了angular.js,并取得angular模块,然后定义了myApp模块。
如果myApp模块(或者MyController)依赖于其他模块(或组件),则需要告诉RequireJS在需要的时候加载:
define(['angular', './scripts/anotherApp', './scripts/service/utility' ], function(angular) { //上面加载了3个js文件
angular.module('myApp', ['newApp']) //定义的myAPP模块需要依赖newApp模块(此模块所在的js文件需要引进来)
.controller('MyController', ['$scope', 'utils', function ($scope, utils) { //'MyController'依赖的一些组件scope等
//define scope data
}]);
});
这里,myApp依赖定义于anotherApp.js的newApp模块,并且需要定义于utility.js的工厂服务utils。这里存在的一个陷阱是,依赖的两个JS文件不一定会按照代码中声明的顺序加载,即utility.js可能先于anotherApp.js加载。因此在使用requireJS加载依赖时,要注意这些依赖本身之间的相互关系,不能指望requires按某种顺序加载这些依赖。否则,会导致一些概率性出现的问题,不易调试。
另外一点,如果在首次定义模块A时使用了空数组作为依赖,然后在某次使用A模块的过程中,误将依赖数组又传递一次,那么A模块原来的定义就会被覆盖,并且原来A模块定义的controller,service等组件也将不存在,这样也会导致难以调试的问题。因此在定义和使用Angular模块时不能大意。
【angularJS】定义模块angular.module的更多相关文章
- AngularJS系统学习之Module(模块)
本文源自:http://blog.csdn.net/woxueliuyun/article/details/50962645 学习之后略有所得, 来此分享.建议看原文. 模块是提供一些特殊服务的功能块 ...
- [Angular] Use Angular components in AngularJS applications with Angular Elements
When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...
- 33.AngularJS 应用 angular.module定义应用 angular.controller控制应用
转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 模块(Module) 定义了 AngularJS 应用. AngularJS 控制器(Co ...
- AngularJs angular.Module模块接口配置
angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...
- AngularJs angular.injector、angular.module
angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...
- Angular之特性模块 ( Feature Module )
项目结构 一 创建特性模块,及其包含的组件.服务. ng g module art ng g component art/music ng g component art/dance ng g ser ...
- angular.module()创建、获取、注册angular中的模块
// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块 var createModule = angular.module("myModule", []); // 只 ...
- [AngularJS] Adding custom methods to angular.module
There are situations where you might want to add additional methods toangular.module. This is easy t ...
- 03、AngularJs的模块与控制器
大部分的应用程序都有一个主方法(main)来组织,实例化,启动应用程序.而AngularJs应用是没有主方法的,它是通过模块来声明应用应该如何启动的.同时,模块允许声明来描述应用中依赖关系,以及如何进 ...
随机推荐
- linux与window的\r与\n
应用程序 void niuniu(void) { char buf[16]; char *p[6]; int i; led_init(); uart_init(); while(1) { puts(& ...
- Hive 元数据库表信息
Hive 的元数据信息通常存储在关系型数据库中,常用MySQL数据库作为元数据库管理. 1. 版本表 i) VERSION -- 查询版本信息 2. 数据库.文件存储相关 i) DBS -- 存储 ...
- Mysql之explain调优
Explain调优 使用explain语法,对SQL进行解释,根据其结果进行调优: MySQL 表关联的算法是 Nest Loop Join,是通过驱动表的结果集作为循环基础数据,然后一条一条地通过该 ...
- HIVE学习(待更新)
1 安装hive 下载 http://mirrors.shu.edu.cn/apache/hive/hive-1.2.2/,红框中的不需要编译. 由于hive是默认将元数据保存在本地内嵌的 Derby ...
- Linux运维第二天:安装虚拟机软件及RHEL7.2 64位系统
第一步:安装虚拟机 一路默认就行啦(还是要改下安装路径,嘿嘿) 第二步:安装RHEL7.2 64位系统 1.新建一个虚拟机 典型和自定义随便选(最后都可以调的) 一般大婶都喜欢选自定义(自己可以设置的 ...
- UVALive-3713 Astronauts (2-SAT)
题目大意:有三个任务A.B.C,n个已知年龄的人.A任务只能被年龄不小于平均年龄的人做,B任务只能被平均年龄以下的人做,C任务不限,相互讨厌的两个人不能做同一件任务,现在已知厌恶关系,求一种任务分配方 ...
- express中的错误处理
错误处理 定义错误处理中间件和定义其他中间件一样,除了需要 4 个参数,而不是 3 个,其格式如下 (err, req, res, next).例如: app.use(function(err, re ...
- day33 Python与金融量化分析(三)
第三部分 实现简单的量化框架 框架内容: 开始时间.结束时间.现金.持仓数据 获取历史数据 交易函数 计算并绘制收益曲线 回测主体框架 计算各项指标 用户待写代码:初始化.每日处理函数 第四部分 在线 ...
- c# out ref 多个返回值问题个人总结
多个返回值可以用ref或者out来实现 如 var b=string.Empty(); var c=string.Empty(); public bool Test(string a, out str ...
- sql杂记
Create procedure 存储过程的声明 PIVOT的一般语法是:PIVOT(聚合函数(列) FOR 列 in (…) )AS P 通俗简单的说:PIVOT就是行转列,UNPIVOT就是列传行 ...