AngularJS モジュール

AngularJS モジュールとは何ですか?

モジュールは、ng-app ディレクティブを使用して HTML ページ全体に適用されるアプリケーション機能を定義します。サービス、ディレクティブ、フィルターなどの機能を、さまざまなアプリケーションで簡単に再利用できる方法で定義します。

これまでのチュートリアルでは、メインの Angular アプリケーションを定義するために ng-app ディレクティブが使用されていることに気づいたでしょう。これは、Angular.JS のモジュールの重要な概念の 1 つです。

AngularJS でモジュールを作成する方法

モジュールとは何かについて説明する前に、モジュールのない AngularJS アプリケーションの例を見て、アプリケーションにモジュールを含める必要性を理解しましょう。

というファイルを作成することを考えてみましょう。 「デモコントローラー.js」 そして、以下のコードをファイルに追加します

Function Democontroller($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            });

上記のコードでは、アプリケーション内でコントローラーとして機能する「DemoController」という関数を作成しました。

このコントローラーでは、2 つの変数 a と b の加算を実行し、これらの変数の加算を新しい変数 c に代入し、それをスコープオブジェクトに再び代入しています。

次に、メインアプリケーションとなるメインの Sample.html を作成しましょう。以下のコードスニペットを HTML ページに挿入してみましょう。

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

上記のコードでは、DemoController をインクルードし、式を介して $scope.c 変数の値を呼び出しています。

ただし、ng-app ディレクティブには空白の値があることに注意してください。

これは基本的に、ng-app ディレクティブのコンテキスト内で呼び出されるすべてのコントローラーにグローバルにアクセスできることを意味します。複数のコントローラーを互いに分離する境界はありません。
現在のプログラミングでは、コントローラをどのモジュールにも接続せず、グローバルにアクセスできるようにするのは悪い習慣です。コントローラーには論理的な境界を定義する必要があります。

ここでモジュールが登場します。モジュールは、境界の分離を作成し、機能に基づいてコントローラーを分離するのに役立ちます。

上記のコードを変更してモジュールを実装し、コントローラーをこのモジュールに接続しましょう

var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('DemoController', function($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                         });

上で書いたコードの主な違いに注目してください。

```
var sampleApp = angular.module('sampleApp',[]);
```
具体的には、「sampleApp」という名前の AngularJS モジュールを作成しています。これは、このモジュールに含まれる機能の論理境界を形成します。したがって、上記の例では、2 つのスコープオブジェクトを追加する役割を実行するコントローラーを含むモジュールがあります。したがって、このモジュールがアプリケーションの数学的計算の機能のみを実行するという論理境界を持つ XNUMX つのモジュールを持つことができます。
```
sampleApp.controller('DemoController', function($scope)
```
次に、コントローラーを AngularJS モジュール「SampleApp」にアタッチします。これは、メイン HTML コードでモジュール「sampleApp」を参照しない場合、コントローラーの機能を参照できないことを意味します。

メインの HTML コードは以下のようになりません。

<body ng-app="'sampleApp'">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

上で書いたコードと以前のコードの主な違いに注目してください。

<body ng-app="'sampleApp'">

bodyタグでは、

空の ng-app ディレクティブの代わりに、sampleApp モジュールを呼び出しています。
このアプリケーションモジュールを呼び出すことで、コントローラー「DemoController」とデモコントローラーに存在する機能にアクセスできるようになります。

AngularJS のモジュールとコントローラー

In Angular.JS、現代の Web アプリケーションの開発に使用されるパターンは、複数のモジュールとコントローラーを作成して、複数のレベルの機能を論理的に分離することです。

通常、モジュールは別々に保存されます Javascript メインのアプリケーションファイルとは異なるファイルです。

これをどのように実現できるかの例を見てみましょう。

以下の例では、

Utilities.js という名前のファイルを作成します。このファイルには、加算機能を実行するモジュールと減算機能を実行するモジュールの 2 つのモジュールが含まれます。
次に、2 つの個別のアプリケーションファイルを作成し、各アプリケーションファイルからユーティリティファイルにアクセスします。
XNUMX つのアプリケーションファイルでは加算用のモジュールにアクセスし、もう XNUMX つのアプリケーションファイルでは減算用のモジュールにアクセスします。

ステップ1） 複数のモジュールとコントローラーのコードを定義します。

var AdditionApp = angular.module('AdditionApp',[]);
AdditionApp.controller('DemoAddController', function($scope) {
       $scope.a=5;
       $scope.b=6;
       $scope.c=$scope.a + $scope.b;
});
var SubractionApp = angular.module('SubtractionApp',[]);
SubractionApp.controller('DemoSubtractController', function($scope) {
       $scope.a=8;
       $scope.b=6;
       $scope.d=$scope.a - $scope.b;
});

上記のコードの重要なポイントに注目してください。

```
 var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);
```
2 つの個別の Angular モジュールが作成され、XNUMX つは「AdditionApp」という名前が付けられ、XNUMX つ目は「SubtractionApp」という名前が付けられます。
```
AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)
```
各モジュールには 2 つの個別のコントローラーが定義されています。XNUMX つは DemoAddController と呼ばれ、もう XNUMX つは DemoSubtractController と呼ばれます。各コントローラーには、数値の加算と減算のための個別のロジックがあります。

ステップ2） メインのアプリケーションファイルを作成します。 ApplicationAddition.html というファイルを作成し、以下のコードを追加しましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
    Addition :{{c}}

</div>
</body>
</html>

上記のコードの重要なポイントに注目してください。

```
<script src="/lib/Utilities.js"></script>
```
メインアプリケーションファイルで Utilities.js ファイルを参照しています。これにより、このファイルで定義された AngularJS モジュールを参照できるようになります。

<div ng-app = "AdditionApp" ng-controller="DemoAddController">

ng-app ディレクティブと ng-コントローラー。

```
{{c}}
```
上記のモジュールとコントローラーを参照しているため、式を介して $scope.c 変数を参照できます。この式は、「DemoAddController」コントローラーで実行された 2 つのスコープ変数 a と b を加算した結果になります。

減算関数の場合も同様に行います。

ステップ3） メインのアプリケーションファイルを作成します。「ApplicationSubtraction.html」というファイルを作成し、以下のコードを追加しましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
    Subtraction :{{d}}
  
</div>
</body>
</html>

上記のコードの重要なポイントに注目してください。

```
<script src="/lib/Utilities.js"></script>
```
メインアプリケーションファイルで Utilities.js ファイルを参照しています。これにより、このファイルで定義されたモジュールを参照できるようになります。
```
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
```
ng-app ディレクティブと ng-controller をそれぞれ使用して、SubtractionApp モジュールと DemoSubtractController にアクセスしています。
```
{{d}}
```
上記のモジュールとコントローラーを参照しているため、式を介して $scope.d 変数を参照できます。この式は、 'DemoSubtractController' コントローラー

まとめ

AngularJS モジュールを使用しない場合、コントローラーはグローバルスコープを持つようになり、不適切なプログラミング手法につながります。
モジュールはビジネスロジックを分離するために使用されます。複数のモジュールを作成して、これらの異なるモジュール内で論理的に分離できます。
各 AngularJS モジュールには、独自のコントローラーのセットを定義して割り当てることができます。
モジュールとコントローラーを定義する場合、通常は別々に定義されます。 Javaスクリプトファイル。これらは Javaスクリプトファイルはメインアプリケーションファイル内で参照されます。

よろしければ：