AngularJSのモジュール化の詳細説明とサンプルコード-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

AngularJSのモジュール化の詳細説明とサンプルコード

高洛峰

Dec 28, 2016 pm 02:02 PM

AngularJSには、次のような大きな特徴があります:

1 MVC

2 モジュール化

3 コマンドシステム

4 双方向データバインディング

そこでこの記事では、AngularJSのモジュール性について見てみましょう。

まず、モジュール化が実装される理由について説明します:

1 モジュールの再利用性が向上します

2 モジュールを定義することで、読み込み順序をカスタマイズできます

3 単体テストでは、すべてのモジュールを読み込む必要はありませんcontent

前の例では、コントローラーコードが script タグに直接記述されていたため、この方法で宣言された関数はグローバルであり、これは明らかに最良の選択ではありません。

モジュール化する方法を見てみましょう:

<script type="text/javascript">
     var myAppModule = angular.module(&#39;myApp&#39;,[]);
      
     myAppModule.filter(&#39;test&#39;,function(){
       return function(name){
         return &#39;hello, &#39;+name+&#39;!&#39;;
       };
     });
 
     myAppModule.controller(&#39;myAppCtrl&#39;,[&#39;$scope&#39;,function($scope){
       $scope.name=&#39;xingoo&#39;;
     }]);
   </script>

ログイン後にコピー

まず、グローバル変数 angular を通じてモジュール myAppModule を作成します

angular.module('myApp',[]);

最初のパラメータはバインドされたアプリケーション app の名前です, このアプリは、main 関数の役割と同様に、ページ内の Angular のエントリポイントを識別します。

2番目のパラメータ[]は依存するモジュールを識別します。

モジュールの使い方を見てみましょう！

<!doctype html>
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="myAppCtrl">
      {{name | test }}
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module(&#39;myApp&#39;,[]);
       
      myAppModule.filter(&#39;test&#39;,function(){
        return function(name){
          return &#39;hello, &#39;+name+&#39;!&#39;;
        };
      });
 
      myAppModule.controller(&#39;myAppCtrl&#39;,[&#39;$scope&#39;,function($scope){
        $scope.name=&#39;xingoo&#39;;
      }]);
    </script>
  </body>
</html>

ログイン後にコピー

myApp を ng-app に直接バインドするだけです。

スクリプトではモジュールを介してフィルターとコントローラーを作成しました。

フィルターの機能は文字列の修飾を加える事です。

コントローラーの機能は変数を初期化することです。

プログラムの実行結果は以下の通りです:

AngularJS 模块化详解及实例代码