您的位置:首页 > Web前端 > AngularJS

淡淡理解下AngularJS中的module

2016-01-04 10:57 645 查看
在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的写法。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: