依存関係配列がある場合とない場合で、angular.module の違いは何ですか？

配列を指定するとモジュールが作成されます。省略すると登録済みのモジュールが取得されるため、複数のファイルが1つの注入可能な名前空間を拡張することになります。

AngularJSモジュールの単体テストはどのように行われますか？

angular.mock.module を介してロードし、inject() を使用してコントローラーを解決します。ブラウザレベルのカバレッジがページを駆動し、従来は Pro で使用されていました。tractor。

現代のAngularでは、angular.moduleに代わるものは何ですか？

Angular 2では@NgModuleが採用され、スタンドアロンコンポーネントがデフォルトとなり、独自のimports配列を通じて依存関係を宣言するようになりました。

AngularJS モジュール

⚡ スマートサマリー

AngularJSのモジュールは、コントローラー、サービス、ディレクティブ、フィルターを1つの論理的な境界の背後にグループ化するコンテナとして機能します。そのため、ng-appディレクティブは、実行時に単一のページが実際に必要とする機能のみをロードします。

🔘 定義： angular.module は、アプリケーションが使用するすべてのコンポーネントを登録および取得します。
☑️ 作成： 依存関係配列を指定するとモジュールが作成され、省略するとモジュールが取得されます。
✅ Bootstrapping: ng-app は、Angular がその領域にロードするモジュールに名前を付けます。
🧪 分離： モジュールスコープのコントローラは、グローバル名やコントローラ間の競合を回避します。
📊 バージョンノート： AngularJSのサポートは2022年1月に終了しました。Angularはスタンドアロンコンポーネントを推奨しています。

プロフィール

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

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

上の図はその境界線を要約したものです。

これまでのすべてのチュートリアル既にお気づきかもしれませんが、メインのAngularアプリケーションを定義するためにng-appディレクティブが使用されています。これはAngularJSにおけるモジュールの重要な概念の一つです。

⚠️ バージョンに関する注記: AngularJSのサポートは2022年1月に終了しました。。モダン角度の @NgModule を使用し、スタンドアロンコンポーネントがデフォルトです。以下のコードは過去のものです。

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

モジュールとは何かから始める前に、例を見てみましょう。 AngularJSアプリケーションモジュールなしで試してみて、アプリケーションにモジュールが必要な理由を理解しましょう。

「DemoController.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 AngularJS開発に使用されるパターンping 現代のWebアプリケーションでは、複数のモジュールとコントローラーを作成し、複数の機能レベルを論理的に分離することが求められます。

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

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

以下の例では、

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

ステップ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つの別々のAngularJSモジュールが作成され、1つは「AdditionApp」という名前、もう1つは「Sub」という名前が付けられています。tractionApp'。
```
AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)
```
各モジュールには2つの独立したコントローラーが定義されており、1つはDemoAddController、もう1つはDemoSubと呼ばれています。tractController。各コントローラには加算と減算のための独立したロジックがあります。trac数字の集合。

ステップ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 を加算した結果になります。

サブについても同様に行いますtrac機能。

ステップ3） メインアプリケーションファイルを作成します。「ApplicationSub」という名前のファイルを作成しましょう。traction.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 ">
```
私たちは「Sub」にアクセスしていますtractionAppモジュールとDemoSubtracng-app ディレクティブと ng-controller をそれぞれ使用して tController を作成します。
```
{{d}}
```
上記のモジュールとコントローラを参照しているため、式を介して $scope.d 変数を参照できます。この式は、サブルーチンの結果になります。trac'DemoSub' で実行された 2 つのスコープ変数 a と b の変換tractControllerのコントローラー

よくあるご質問

配列を指定するとモジュールが作成されます。省略すると登録済みのモジュールが取得されるため、複数のファイルが1つのモジュールを継承します。注射可能名前空間

いいえ。AngularJSは最初に見つかったng-appのみをブートストラップします。それ以降のモジュールは、要素に対して手動でangular.bootstrapを呼び出す必要があります。

config() はプロバイダの登録中に実行されるため、プロバイダと定数のみがそこに注入されます。run() はインジェクタの準備が完了すると実行されます。

ng-appの値が登録済みのモジュールと一致しません。タイプミス、引用符で囲まれた名前、またはAngularJSの後にモジュールファイルを読み込むことが原因です。

angular.mock.module を介してロードし、inject() でコントローラーを解決します。ブラウザレベルのカバレッジがページを駆動し、従来は Protracタ.

@NgModule Angular 2 では、スタンドアロンコンポーネントがデフォルトとなり、独自の imports 配列を通じて依存関係を宣言するようになりました。

機械学習ツールは、すべてのangular.module呼び出しを読み取り、依存関係グラフを構築し、移行リスクに基づいてモジュールをランク付けします。 Rev視聴者はそれぞれを検証します指令地図ping.

GitHubコパイロットまた、同様のエージェント型アシスタントは、1つのプロンプトからモジュール、コントローラー、ファイルのスケルトンを生成します。生成されたコードはレビューが必要です。

AngularJS モジュール

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

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

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

よくあるご質問

この投稿を要約すると次のようになります:

ニュースレターに登録する

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

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

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

関連記事

よくあるご質問

この投稿を要約すると次のようになります:

ニュースレターに登録する