ホームページ > 記事 > ウェブフロントエンド > AngularJS_AngularJSのモジュールの詳細説明

AngularJS_AngularJSのモジュールの詳細説明

WBOYオリジナル: 2016-05-16 16:17:16872ブラウズ

angularjs モジュールについて話す前に、まず angular の知識ポイントをいくつか紹介します。

AngularJS は、完全に Javascript で書かれた純粋なクライアント側テクノロジーです。従来の Web 開発テクノロジー (HTML、CSS、JavaScript) を使用して、Web アプリケーション開発をより迅速かつ簡単にします。

AngularJS がアプリケーション開発を簡素化する重要な方法は、いくつかの一般的な低レベルの開発操作をパッケージ化し、開発者に提供することです。 AngularJS は、これらの低レベルの操作を自動的に処理します。それらには次のものが含まれます:

1.DOM操作
2. イベント監視を設定します
3. 入力検証。AngularJS がこれらの操作のほとんどを処理するため、開発者は、反復的でエラーが発生しやすい低レベルのコードの作成ではなく、アプリケーションのビジネスロジックに集中できます。

AngularJS は開発を簡素化する一方で、次のような優れたテクノロジーをクライアントにもたらします。

1. データ、ビジネスロジック、ビューの分離
2. データとビューの自動バインド
3. 一般的なサービス
4. 依存関係の注入 (主に集約サービスに使用)
5. 拡張可能な HTML コンパイラー (完全に JavaScript で書かれています)
6. テストが簡単
7. これらのテクノロジーに対するクライアントの需要は、実際には長い間存在していました。

同時に、AngularJS を使用して単一ページまたは複数ページのアプリケーションを開発することもできますが、主に単一ページのアプリケーションの開発に使用されます。 AngularJS は、シングルページアプリケーションでのブラウザ履歴操作、進むボタンと戻るボタン、およびコレクション操作をサポートします。

次に、angularJSモジュールについて詳しく説明していきます。

ほとんどのアプリケーションには、アプリケーションのインスタンス化、整理、起動に使用される main メソッドがあります。 AngularJS アプリケーションには main メソッドがありませんが、代わりにモジュールを使用してアプリケーションの起動方法を宣言します。この方法には次の利点があります:

1. 起動プロセスは宣言的であるため、理解しやすいです。
2. 単体テストではすべてのモジュールをロードする必要がないため、この方法は単体テストの作成に役立ちます。
3. 特定の状況下で追加のモジュールをテストに追加できます。これらのモジュールは構成を変更し、エンドツーエンドのテストに役立ちます。
4. サードパーティのコードを再利用可能なモジュールにパッケージ化できます。
5. モジュールは、任意の順序または並列順序でロードできます (モジュール自体の実行が遅れるため)。

例:

<!doctype html>
<html ng-app="myApp">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script>
      var myAppModule = angular.module('myApp', []);
　　　　　　// configure the module.
　　　　　　// in this example we will create a greeting filter
　　　　　　myAppModule.filter('greet', function() {
 　　　　　　　　return function(name) {
  　　　　　　　　　　return 'Hello, ' + name + '!';
 　　　　　　　　};
　　　　　　});
  </script>
 </head>
 <body>
  <div>
   {{ 'World' | greet }}
  </div>
 </body>
</html>

上記の例では、myApp モジュールを使用して、8f08cb147f69d67da71d45acc046f462 で指定してアプリケーションを起動します。

上記の例は非常に簡単に記述できますが、同じ記述方法を使用して大規模なアプリケーションを作成するのには適していません。アプリケーションを次のモジュールに分割することをお勧めします:

1. サービス宣言を行うために使用されるサービスモジュール。
2. 命令モジュール。命令を宣言するために使用されます。
3. フィルターモジュール。フィルター宣言を行うために使用されます。
4. 上記のモジュールに依存し、初期化コードを含むアプリケーションレベルのモジュール。

例:

<!doctype html>
<html ng-app="xmpl">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script src="script.js"></script>
 </head>
 <body>
  <div ng-controller="XmplController">
   {{ greeting }}!
  </div>
 </body>
</html>
[/code]

script.js:

[code]
angular.module('xmpl.service', []).   //服务模块
 value('greeter', {    //自定义greeter对象
  salutation: 'Hello',
  localize: function(localization) {
    this.salutation = localization.salutation;
  },
  greet: function(name) {
    return this.salutation + ' ' + name + '!';
  }
 }).
 value('user', {   //自定义user对象
  load: function(name) {
    this.name = name;
  }
 });
angular.module('xmpl.directive', []);  //指令模块
angular.module('xmpl.filter', []);   //过滤器模块
angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).  //模块xmpl依赖于数组中的模块
 run(function(greeter, user) {
  // 初始化代码，应用启动时，会自动执行
  greeter.localize({
    salutation: 'Bonjour'
  });
  user.load('World');
 })
// A Controller for your app
var XmplController = function($scope, greeter, user) {
   $scope.greeting = greeter.greet(user.name);
}

この分割の理由は、これらのコードはテストがより難しいため、テストで初期化コードを無視する必要があることが多いためです。これを解消することで、テスト中に簡単に無視できます。現在のテストに関連するモジュールのみをロードすることで、テストをより具体的にすることもできます。上記は単なる提案です。特定の状況に応じて自由に調整できます。

モジュールは、起動フェーズ中にアプリケーションにアタッチされる構成ブロックとコードブロックのコレクションです。最も単純なモジュールは、2 種類のコードブロックコレクションで構成されます:

構成コードブロック - インジェクションプロバイダーの注入フェーズと構成フェーズ中に実行されます。構成ブロックに注入できるのは、注入プロバイダーと定数のみです。これは、サービスが構成される前に途中で初期化されるのを防ぐためです。
コードブロックの実行 - インジェクターが作成され、アプリケーションの起動に使用された後に実行されます。インスタンスと定数のみを実行ブロックに挿入できます。これは、実行後にシステム構成が行われないようにするためです。

コードの実装:

angular.module('myModule', []).  
　　config(function(injectables) { // provider-injector      配置代码块
　　　　// This is an example of config block.
　　　　// You can have as many of these as you want.
　　　　// You can only inject Providers (not instances)
　　　　// into the config blocks.
　　}). run(function(injectables) { // instance-injector      运行代码块
　　　　// This is an example of a run block.
　　　　// You can have as many of these as you want.
　　　　// You can only inject instances (not Providers)
　　　　// into the run blocks
　　});

モジュールには、設定に便利なメソッドもいくつかあり、それらを使用することはコードブロックを使用することと同じです。例:

angular.module('myModule', []).
 value('a', 123).
 factory('a', function() { return 123; }).
 directive('directiveName', ...).
 filter('filterName', ...);
// is same as
angular.module('myModule', []).
 config(function($provide, $compileProvider, $filterProvider) {
  $provide.value('a', 123)
  $provide.factory('a', function() { return 123; })
  $compileProvider.directive('directiveName', ...).
  $filterProvider.register('filterName', ...);
 });

設定ブロックは、$provide、$compileProvider、$filterProvider の登録順に適用されます。唯一の例外は定数の定義であり、定数は常に設定ブロックの先頭に配置する必要があります。

実行ブロックは、AngularJS で最も main メソッドに似たものです。実行ブロックは、アプリケーションを起動するために使用されるコードの一部です。これは、すべてのサービスが構成され、すべてのインジェクターが作成された後に実行されます。実行ブロックにはテストが難しいコードが含まれることが多いため、単体テスト中に無視できるように別のモジュールに記述する必要があります。

モジュールは、他のモジュールを依存関係としてリストできます。「モジュールに依存する」とは、このモジュールの前に依存モジュールをロードする必要があることを意味します。つまり、依存モジュールの構成ブロックは、このモジュールの構成ブロックより前に実行されます。ランブロックも同様です。複数のモジュールに依存している場合でも、モジュールは 1 回しかロードできません。

モジュールは $injector 設定を管理するために使用されるメソッドであり、スクリプトの読み込みとは関係ありません。インターネット上にはモジュールの読み込みを制御するライブラリが多数あり、AngularJS で使用できます。モジュールはロード中に何も行わないため、任意の順序で、または並行してロードできます

声明：

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

前の記事：Angular の概要とその機能の紹介_AngularJS次の記事：Angular の概要とその機能の紹介_AngularJS

続きを見る

AngularJS_AngularJSのモジュールの詳細説明

関連記事