AngularJSのコントローラー
Mục lục
Angularのコントローラーコンセプト
Angularでは、Controllerはコンストラクターであり、実行されると、オブジェクト変数を初期化し、主に$ scope変数（データ型はオブジェクト）のデータを処理し、ビューは$scope変数のデータを使用します。ユーザーに応じて表示します。
以下の例を考えてみましょう。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Controller</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="examController"> <div ng-controller="headerController"> {{name}} - {{data}} </div> <div ng-controller="mainController"> {{name}} - {{data}} </div> <div ng-controller="footerController"> {{name}} - {{data}} </div> </div> <script> var app = angular.module('examController', []); app.controller('headerController', function($scope){ $scope.name = "This is header"; }); app.controller('mainController', function($scope){ $scope.name = "This is main"; $scope.data = "main data"; }); app.controller('footerController', function($scope){ $scope.name = "This is footer"; }); </script> </body> </html>結果：
ng-controllerディレクティブ属性を使用してコントローラーがHTMLのDOMに割り当てられると、Angularはコンストラクターとして使用する新しいControllerオブジェクトを認識して作成します。これは、Webサイトの読み込みが完了したときに実行されます。これで、Angularはそのコントローラー専用の新しい$scopeオブジェクトも作成します。上記の例では、3つの異なるコントローラーで、コントローラーが$ scopeという名前の同じパラメーターを持っていることがわかりますが、実際には、これらの3つの変数は、3つの独立して初期化された変数、それらのプロパティ、およびそれらの名前です。開始コントローラーのスコープ。
コンテキストはコントローラーを使用する必要があります：
- デフォルトでは、AngularのControllerは、$scope。オブジェクトの値と初期状態を初期化するために使用されます。
- $ scope .objectにメソッド（関数）を追加します
コンテキストはコントローラーを使用しないでください：
- DOM（HTMLタグオブジェクト）の操作：Angularはこのビジネスを満たすデータバインディングメカニズムを提供するため、コントローラーを使用してDOMの値（コンテンツ、プロパティ）を変更しないでください。
- フォームの検証：コントローラーを使用してフォームの入力データ形式を確認しないでください。この場合、代わりにAngularFormControlsを使用してください。
- データのフィルター処理：データ形式を変換します。この場合は、AngularのFilterオブジェクトを使用します。
- この場合はAngualarServiceを使用してデータを共有する
- コンポーネントのライフサイクルを管理する
Angularでコントローラーを宣言する
方法1：特定の名前を含むng-app内でコントローラーを宣言します。各コントローラーは、角度のあるアプリオブジェクトのコントローラーメソッドを介して初期化されます。 Angularの各コントローラーは、特定のタスクを実行するために使用され、アプリケーション（ng-app）のスコープに属します。
例えば：
<!DOCTYPE html> <html> <head> <title>Example controller</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body> <div ng-app="myapp"> <div ng-controller="mainController"> <h1>Thông tin nhân sự</h1> <table> <thead> <tr> <th>Tên</th> <th>Tuổi</th> <th>Địa chỉ</th> </tr> </thead> <tbody> <tr> <td>{{employee.name}}</td> <td>{{employee.age}}</td> <td>{{employee.website}}</td> </tr> </tbody> </table> </div> </div> </body> <script> var app = angular.module("myapp", []); app.controller("mainController", function ($scope) { $scope.employee = { name: 'Toanngo92', age: 20, website: 'https://hocvietcode.com' }; }); </script> </html>アプリをng-app="myapp"として宣言し、ng-controller = "mainController"という名前で内部にコントローラーを作成しました。上記のHTML構造では、ng-controllerを含むタグが内部にあります（子tag）ng-app属性を含むタグの。 「mainController」という名前のコントローラーがアプリケーション「myapp」にあることを意味します
方法2：javascript関数を介してコントローラーを宣言します。この方法を使用する場合は、以下のサンプルコードのように、html構造内の属性/ディレクティブng-appにnull値を宣言します。
例えば：
<!DOCTYPE html> <html> <head> <title>Example controller</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body> <div ng-app=""> <div ng-controller="mainController"> <h1>Thông tin nhân sự</h1> <table> <thead> <tr> <th>Tên</th> <th>Tuổi</th> <th>Địa chỉ</th> </tr> </thead> <tbody> <tr> <td>{{employee.name}}</td> <td>{{employee.age}}</td> <td>{{employee.website}}</td> </tr> </tbody> </table> </div> </div> </body> <script> function mainController($scope) { $scope.employee = { name: 'Toanngo92', age: 20, website: 'https://hocvietcode.com' }; } </script> </html>この場合、スクリプトレイヤーコントローラーをjavascriptの関数として宣言し、app-controllerプロパティで宣言した値と同じ名前にします。
注：コントローラーに渡されるパラメーターの名前は、 $scopeという名前にする必要があります。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
