ホームページ > 記事 > ウェブフロントエンド > angularjsの3大モジュール学習メモ（モーダル、コントローラー、ビュー）_AngularJS
angularjsの3大モジュール学習メモ（モーダル、コントローラー、ビュー）_AngularJS
- WBOYオリジナル
- 2016-05-16 15:38:121136ブラウズ
今日は主に 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'
};
}
ビューの使用方法について話すときは、ディレクティブについて言及する必要があります。 (これは新しい知識です!!!) コードの一部を見てみましょう:
上記のコードは、HTML 内で 5d31ad12eb7f2467fa10436b397d69f6ce2196d7bcfa28427152ee3efb4b3e34 を直接試して、何が起こるかを確認できます。 ！ ！
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 (コメント); 上記の例は要素形式 (5d31ad12eb7f2467fa10436b397d69f6ce2196d7bcfa28427152ee3efb4b3e34) に設定されています。
2.テンプレート: (文字列または関数) オプションのパラメーター、返されるコンテンツ。上記の例は div を返します。3.templateUrl: 上記と同様に、URL を通じてコンテンツを返します。大量のコンテンツが返される場合は、この属性を使用することをお勧めします。
4.relace: (ブール値)、デフォルト値は false です。上記の例は true に設定されています。hello タグを使用した後、ページは返された div に置き換えられます。
5.transclude: (ブール値)、true に設定されている場合。この設定オプションを使用すると、ディレクティブの要素に含まれるコンテンツを抽出し、ng-transclude で使用されるディレクティブ テンプレート内の特定の場所に配置できます。
6. 他にもいくつかの属性があります。後で詳しく学びましょう。 。 。
OK、上記はこれら 3 つの主要モジュールの使用手順です。皆様の学習のお役に立てれば幸いです。 。 。上記の注意事項についてわからないことがあれば、質問していただければ必ずお答えします。皆さんの幸せな人生を祈っています！