淡淡理解下AngularJS中的module
在AngularJS中module是一个核心的存在,包括了很多方面,比如controller, config, service, factory, directive, constant, 等等。
在Javascript中如何实现类似module的功能呢?
或者说,我们定义一个函数,如何把函数内的函数向外界开放呢?
我想,可以把函数中的函数作为一个对象的键值,从而向外界开放。
这样说很笼统,其实是这样的:
- var myModule = function outerFuction(){
- var method1 = new function(){}
- var method2 = new function(){}
- return{
- method1: method1,
- method2, method2
- }
- }
- var o = outerFucntion();
- o.method1();
- o.mehtod2();
举个银行存钱取钱的例子。
- var account = function(){
- //余额
- var balance = 0;
- //存钱
- var deposit = function(money){
- balance+=money;
- console.log("卡上余额为: " + balance);
- notifyUser();
- }
- //取钱
- var withdraw = function(money){
- balance -= money;
- console.log("卡上余额为: " + balance)
- notifyUser();
- }
- //通知用户
- var notifyUser = function(){
- console.log("卡上余额有变动");
- }
- return {
- deposit:deposit,
- withdraw: withdraw
- }
- }
- var a1 = account();
- a1.deposit(100);
- a1.withdraw(50);
再来到AngularJS,我们已经习惯了这样写:
- var app = angular.module('app',[]);
- app.config();
- app.controller();
- app.factory();
- ...
也就是获取到module,再调用module提供给我们的方法。
查看angular.js源代码,发现:
angular = window.angular || (window.angular = {} )
这是为什么我们能使用angular这个变量的原因。
- ...
- var moduleInstace = {
- provider: invokeLater('$provide','provider'),
- factory: invokeLater('$provider', 'factory'),
- service: invokeLater('$provider', 'service'),
- value: invokeLater('$provide', 'value'),
- constant: invokeLater('$provider', 'constant'...),
- animation: invokeLater('$animateProvider',...),
- filter: invokeLater('$filterProvider',...),
- controller: invokeLater('$controllerProvider',...),
- directive: invokeLater('$compileProvider',...),
- config: config,
- }
- return moduleInstance;
- ...
以上的写法正是module的写法。
淡淡理解下AngularJS中的module的更多相关文章
- 关于AngularJs中监听事件及脏循环的理解
可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...
- angularJS中的Promise对象($q)的深入理解
原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...
- (七)理解angular中的module和injector,即依赖注入
(七)理解angular中的module和injector,即依赖注入 时间:2014-10-10 01:16:54 阅读:63060 评论:1 收藏:0 [点 ...
- 理解angular中的module和injector,即依赖注入
理解angular中的module和injector,即依赖注入 依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.angularjs作为前台js框架,也提供了对DI的支持,这是java ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- 理解AngularJS中的依赖注入
点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...
- 理解SQL Server中的权限体系(下)----安全对象和权限
原文:http://www.cnblogs.com/CareySon/archive/2012/04/12/SQL-Security-SecurableAndPermission.html 在开始阅读 ...
- 理解angularJS中作用域$scope
angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...
- AngularJS中module的导入导出
关于AngularJS中module的导入导出,在Bob告诉我之前还没写过,谢谢Bob在这方面的指导,给到我案例代码. 在AngularJS实际项目中,我们可能需要把针对某个领域的各个方面放在不同的m ...
随机推荐
- linux压缩日志并删除原始文件
下面的脚本可以压缩日志并删除原始文件 #!/bin/bash yesterday=`date -d '1days ago' +%Y_%m_%d` cd $ find . -name "*$y ...
- H2内嵌数据库使用步骤
1.找到h2数据库的jar包 D:\repositories\com\h2database\h2\1.4.187\h2-1.4.187.jar 2.双击jar包,配置连接信息 Driver Class ...
- sublime sftp 打开远程文件夹
2014-04-29 13:19:09 总结: 本文介绍两种方法,推荐第二种方法(samba+windows映射) 先贴出sublime打开远程(Linux)目录所需的配置文件(sublime是通过s ...
- 07 Go 1.7 Release Notes
Go 1.7 Release Notes Introduction to Go 1.7 Changes to the language Ports Known Issues Tools Assembl ...
- Android 5.0 API
Android 5.0 (LOLLIPOP) 为用户和应用开发者提供了新功能.本文旨在介绍其中最值得关注的新 API. 如果您有已发布的应用,请务必看一看 Android 5.0 行为变更,了解您的应 ...
- Vue2.0 开发移动端音乐webApp 笔记
项目预览地址:http://ustbhuangyi.com/music/#/recommend 获取歌曲 url 地址方法升级:https://github.com/ustbhuangyi/vue-m ...
- HDOJ题目分类
模拟题, 枚举1002 1004 1013 1015 1017 1020 1022 1029 1031 1033 1034 1035 1036 1037 1039 1042 1047 1048 104 ...
- ADO.Net1
一.ADO.Net 数据库连接技术 二.查询 1.步骤: 1)使用数据库空间:using System.Data.SqlClient; 2)连接数据库 3)创建数据库操作命令 4)输入操作命令 5)开 ...
- 微信隐藏的webJS Api汇总
1.右侧菜单增加"查看公众账号" API document.getElementById('post-user').addEventListener('click', functi ...
- 【LOJ】#2084. 「NOI2016」网格
题解 之前用的mapTLE了,今天用了个hash把题卡了过去,AC数++ 我们只要保留一个点为中心周围5 * 5个格子就可以 如果一个点周围5*5个格子有两个不连通,那么显然输出0 如果一个出现了一个 ...