Controller in AngularJS
Mục lục
Controller-Konzept in Angular
In Angular ist Controller ein Konstruktor. Wenn er ausgeführt wird, initialisiert er eine Objektvariable, die für die Handhabung verantwortlich ist und hauptsächlich mit den Daten der $scope- Variablen arbeitet (Datentyp ist Objekt), und View verwendet die Daten in der $scope-Variablen dem Benutzer entsprechend anzuzeigen.
Betrachten Sie ein Beispiel unten:
<!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>Ergebnis:
Wenn dem DOM in HTML ein Controller mithilfe des Direktivenattributs ng-controller zugewiesen wird, erkennt und erstellt Angular ein neues Controller-Objekt, das als Konstruktor verwendet wird, der ausgeführt werden soll, wenn die Website vollständig geladen ist. Jetzt erstellt Angular auch ein neues $scope-Objekt speziell für diesen Controller. Im obigen Beispiel sehen wir, dass in 3 verschiedenen Controllern die Controller den gleichen Parameter namens $scope haben, aber tatsächlich sind diese 3 Variablen 3 unabhängig initialisierte Variablen, ihre Eigenschaften sowie ihre Namen. Sie können nur innerhalb abgefragt werden Geltungsbereich des initiierenden Verantwortlichen.
Kontext sollte Controller verwenden:
- Standardmäßig wird der Controller in Angular verwendet, um den Wert und den Anfangszustand für das $scope .-Objekt zu initialisieren
- Fügen Sie dem $scope .-Objekt Methoden (Funktionen) hinzu
Kontext sollte Controller nicht verwenden:
- Manipulation des DOM (HTML-Tag-Objekt): Verwenden Sie den Controller nicht, um den Wert des DOM (Inhalt, Eigenschaften) zu ändern, da Angular einen Datenbindungsmechanismus bereitstellt, der diesem Geschäft gerecht wird.
- Formular validieren: Verwenden Sie den Controller nicht, um das Eingabedatenformat des Formulars zu überprüfen. Verwenden Sie in diesem Fall stattdessen Angular Form Controls.
- Daten filtern: Konvertieren Sie das Datenformat, verwenden Sie in diesem Fall das Filterobjekt in Angular.
- Teilen von Daten, in diesem Fall über Angualar Service
- Verwalten Sie den Lebenszyklus von Komponenten
Einen Controller in Angular deklarieren
Methode 1: Deklarieren Sie den Controller innerhalb der ng-App mit einem bestimmten Namen. Jeder Controller wird durch die Controller-Methode des App-Objekts in Angular initialisiert. Jeder Controller in Angular wird verwendet, um eine bestimmte Aufgabe auszuführen, und er gehört zum Umfang einer Anwendung (ng-app).
Zum Beispiel:
<!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>In dem ich eine App als ng-app="myapp" deklariert und darin einen Controller mit dem Namen ng-controller="mainController" mit der obigen HTML-Struktur erstellt habe, sehen wir, dass sich das Tag mit dem ng-Controller darin befindet (eine untergeordnete tag) des Tags, das das ng-app-Attribut enthält. Das bedeutet, dass sich der Controller mit dem Namen „mainController“ in der Anwendung „myapp“ befindet.
Methode 2: Deklarieren Sie den Controller über die Javascript- Funktion . Wenn Sie diese Methode verwenden, deklarieren Sie einen Nullwert für das Attribut/die Anweisung ng-app innerhalb der HTML-Struktur wie im folgenden Beispielcode
Zum Beispiel:
<!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>In diesem Fall deklarieren wir die Skript-Layer-Controller als Funktion in Javascript und haben denselben Namen wie der Wert, den wir in der app-controller-Eigenschaft deklariert haben.
Hinweis: Der Name des im Controller übergebenen Parameters muss $scope heißen.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
