angularjsの3大モジュール学習メモ（モーダル、コントローラー、ビュー）

angularjsの3大モジュール学習メモ（モーダル、コントローラー、ビュー）_AngularJS

WBOY

リリース： 2016-05-16 15:38:12

オリジナル

1189 人が閲覧しました

今日は主に angularjs の 3 つの主要なモジュール、モーダル、コントローラー、ビューについて詳しく説明します。

まず、これら 3 つのモジュールの関係について説明します。

1. データモデル (モーダル) は主にデータを提供します。ビューとは直接対話しません。

2. コントローラーはモーダルによって提供されたデータを保存し、ビューを操作します。

3.viewはビュー、つまりページ表示です。

4. つまり、コントローラーはデータとビューの間の通信を担当し、この 2 つの間のインターフェイスです。役割分担が明確であり、モジュール化が実現されています。

1. データモデル(モーダル)の使い方は？

データモデルについて言えば、前のチュートリアルの例を見てみましょう:

<!DOCTYPE html>
 <html ng-app="app"> 
   <head>
   <meta charset="UTF-8">
   <title>Document</title>
     <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
     <script src="controll.js"></script> //引入控制器
   </head>
   <body>
     <div ng-controller="controller"> 
       <input type="text" ng-model="text">
       <b>{{greeting.text}} {{text}}</b>
     </div>
   </body>
 </html>

ログイン後にコピー

1. まず angularjs パッケージを導入します。開始するときは、スコープ全体を指定する ng-app ディレクティブを探します。

2. 次に、具体的な手順を探し続けます。ここでは、「テキスト」データモデルを定義する ng-model を見つけます。

3. 以下ではテキストモデルが使用されているため、双方向のバインディングが実現されます。 (ng-appの範囲内であればテキストを直接使用することも可能です)

2. コントローラーの使い方は？

まず、コントローラーを使用する際の重要なポイントについて説明します。

1. コントローラーをビューに再利用しないでください。コントローラーは通常、少数のビュー (1 対 1 の対応) のみを担当します。

2. コントローラーで DOM を直接操作しないでください。これはコントローラーの責任ではありません。指示コマンドを使用します (前のチュートリアルを参照)。

3. コントローラーでデータフィルター操作を実行しないでください。これを実装するための専用のフィルターサービスがあります。

4. 一般的に、異なるコントローラーは相互に呼び出しを行うことはなく、コントローラー間の対話は一般にイベントを通じて実行されます。

次に、上記のコードの青い部分を見てみましょう。control.js の内容は次のとおりです。

Angularjs は ng-controller 命令を見つけて、この命令が定義されている場所 (control.js ファイル) を見つけます。その後、greeting.text を使用してその値を直接取得できます。

 function controller($scope){
   $scope.greeting = {
     text : 'hello'
   };
 }

ログイン後にコピー

3. ビューの使用方法は?

ビューの使用方法について話すときは、ディレクティブについて言及する必要があります。 (これは新しい知識です!!!) コードの一部を見てみましょう:

上記のコードは、HTML 内でを直接試して、何が起こるかを確認できます。！！

var appModule = angular.module('app', []); //app是html中ng-app指令的名称

appModule.directive('hello', function() { //定义一个指令，名称叫hello
  return {
    restrict: 'E',
    template: '<div>Hi there</div>',
    replace: true
  };
});

ログイン後にコピー

次に、各属性の意味を説明します。

1.restrict: (文字列) オプションのパラメーター。DOM で命令がどのような形式で宣言されているかを示します。値は次のとおりです: E (要素)、A (属性)、C (クラス)、M (コメント); 上記の例は要素形式 () に設定されています。

2.テンプレート: (文字列または関数) オプションのパラメーター、返されるコンテンツ。上記の例は div を返します。

3.templateUrl: 上記と同様に、URL を通じてコンテンツを返します。大量のコンテンツが返される場合は、この属性を使用することをお勧めします。

4.relace: (ブール値)、デフォルト値は false です。上記の例は true に設定されています。hello タグを使用した後、ページは返された div に置き換えられます。

5.transclude: (ブール値)、true に設定されている場合。この設定オプションを使用すると、ディレクティブの要素に含まれるコンテンツを抽出し、ng-transclude で使用されるディレクティブテンプレート内の特定の場所に配置できます。

6. 他にもいくつかの属性があります。後で詳しく学びましょう。。。

OK、上記はこれら 3 つの主要モジュールの使用手順です。皆様の学習のお役に立てれば幸いです。。。上記の注意事項についてわからないことがあれば、質問していただければ必ずお答えします。皆さんの幸せな人生を祈っています！