AnglarJSのmoduleを淡々と理解します.

3244 ワード


AnglarJSにおいてmoduleはコアな存在であり、例えばcontroler、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);
 
アングラルJSに来たら、もう慣れました.
 
var app = angular.module('app',[]);

app.config();
app.controller();
app.factory();
...
 
つまりmoduleを取得して、moduleを呼び出して提供する方法です.angglar.jsソースコードを調べたら、anglar=window.anglar|(window.anglar={}これはなぜ私たちがangglarという変数を使うことができるのかが分かりました.
 
...
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の書き方です.