ホームページ > 記事 > ウェブフロントエンド > AngularJSのモジュール化の詳細説明とサンプルコード

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

高洛峰オリジナル: 2016-12-28 14:02:561594ブラウズ

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 模块化详解及实例代码

上記はAngularJSのモジュール化に関する情報をまとめたものです今後も関連情報を追加していきますのでよろしくお願いします。

AngularJS のモジュール化の詳細とコード例に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery EasyUI チュートリアル - パネル (パネル)次の記事：jQuery EasyUI チュートリアル - パネル (パネル)

続きを見る

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

関連記事