AngularJS_AngularJS のモジュールの詳細な分析

AngularJS モジュールとは

私たちが話しているモジュールは、AngularJS アプリケーションの不可欠な部分です。コントローラー、サービス、フィルター、またはディレクティブなどです。これらはすべて 1 つのモジュールに属します。

ほとんどのアプリケーションには、さまざまなモジュールの初期化、ロード、アセンブルに使用される独自の関数エントリ メソッド Main があり、これらのモジュールの組み合わせによってアプリケーションが構成されます。

しかし、しかし、AngularJS アプリケーションには main メソッドも関数エントリもありません。代わりに、このモジュールを AngularJS アプリケーションでどのようにロードして開始するかを宣言するためにモジュール内で指定されます。

この方法には次の利点があります:

1) 人々が理解しやすいように宣言を使用します。

2) コードをより簡単に再利用できます。

3) モジュールのロード順序の制御が容易になりました。これらのモジュールは遅延して実行されるためです。

4) 単体テストの実施がより便利になります。より信頼性が高く、テストするにはこのモジュールをロードするだけで済みます。

5) エンドツーエンドのテストでは、モジュールを使用して構成を書き換えることができます。

モジュールは AngularJS の中核となる存在であり、コントローラー、構成、サービス、ファクトリー、ディレクティブ、定数などの多くの側面が含まれます。

JavaScript でモジュールのような関数を実装するにはどうすればよいですか?

言い換えれば、関数を定義する場合、その関数内の関数をどのようにして外部に公開するのでしょうか?

関数内の関数をオブジェクトのキー値として外部に公開することができると思います。

これは非常に一般的ですが、実際には次のようなものです:

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();
... 

つまり、モジュールを取得し、モジュールによって提供されるメソッドを呼び出します。

angular.js ソース コードを表示し、以下を見つけます:

angular = window.angular || (window.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;
... 

上記の書き方はまさにモジュールの書き方です。

PS: angular.module('MyApp',[...]) と angular.module('MyApp')

angular.module('MyApp',[...]) は新しい Angular モジュールを作成し、角括弧 ([...]) で囲まれた依存関係リストをロードします。angular.module('MyApp ') は使用します。最初の呼び出しで定義された既存のモジュール。

したがって、次のコードについては、アプリケーション全体で 1 回だけ使用されるようにする必要があります。

angular.module('MyApp', [...]) //アプリケーションがモジュール型の場合、これは MyModule になる可能性があります

モジュール参照を変数に保存し、アプリケーション全体でこの変数を通じてモジュールを参照する予定がない場合は、他のファイルで angular.module(MyApp) を使用すると、正しい AngularJS モジュール参照を確実に取得できます。 。モジュール上のすべては、このモジュール参照にアクセスするか、モジュールが定義されている場所に必要なコンテンツを追加することによって定義する必要があります。