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

AngularJSにはいくつかの主要な特性があります。例えば：

　　1 MVC

　　2 モジュール化

　　3 インストラクションシステム

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

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

　　まず、なぜモジュール化を実装する必要があるのか説明します：

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

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

　　3 ユニットテストでは、すべてのコンテンツをロードする必要はありません。

　　前のいくつかの例では、コントローラーのコードがscriptタグ内に直接書かれており、これにより宣言された関数はすべてグローバルです。これは最適な選択ではありません。

　　以下を見てみましょう：　　　　　　　

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

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

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

　　第1引数はバインドするアプリケーション名appで、このappはページ内のAngularのエントリポイントを示し、main関数の役割に似ています。

　　第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('myApp',[]);
      myAppModule.filter('test',function(){
        return function(name){
          return 'hello, '+name+'!';
        };
      });
      myAppModule.controller('myAppCtrl',['$scope',function($scope){
        $scope.name='xingoo';
      }]);
    </script>
  </body>
</html>

　　myAppをngに直接バインドします。-app上であれば十分です。

　　script内で、モジュールを作成してフィルタとコントローラーを作成しました。

　　フィルタの役割は文字列の修飾を追加することです。

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

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

　　　　　　　　　 AngularJS モジュール化の情報をまとめたものです。今後も関連する情報を追加していきますので、ご支援ありがとうございます！

声明：この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このサイトは所有権を持ちません。また、人工編集は行われておらず、関連する法的責任も負いません。著作権侵害を疑われる内容がある場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メール送信時、#を@に置き換えてください。報告し、関連する証拠を提供してください。一旦確認がついたら、このサイトは即座に侵害を疑われるコンテンツを削除します。）

基本チュートリアル