你的位置:首页 > Java教程

[Java教程]淡淡理解下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的写法。