AngularJS -Controller
AngularJS -Controller steuert Daten aus AngularJS -Anwendungen.
AngularJS Controller ist ein reguläres JavaScript -Objekt.
AngularJS -Controller
Die AngularJS -Anwendung wird vom Controller gesteuert.
Die NG-Controller-Anweisung definiert den Anwendungscontroller.
Ein Controller ist ein JavaScript -Objekt, das vom Konstruktor eines Standard -JavaScript -Objekts erstellt wurde.
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "personctrl"> name: <input type = "text" ng-model = "firstName"> <br> Name: {{fullname ()}} </div> <script> var App = Angular.module ('MyApp', []) app.controller ('personcTrl) ($ $ ", $ accope. $ scope.lastName = "doe";Auslaufergebnisse:
Name:
Nachname:
Name: John Doe
AngularJS-Anwendungen werden durch NG-App definiert. Die Anwendung läuft innerhalb von <div>.
Die Eigenschaft ng-controller = "myctrl" ist eine AngularJS-Richtlinie. Wird verwendet, um einen Controller zu definieren.
Die MyCtrl -Funktion ist eine JavaScript -Funktion.
AngularJS verwendet das $ Scope -Objekt, um den Controller aufzurufen.
In AngularJS ist $ scope ein Anwendungsobjekt (gehört zu Anwendungsvariablen und Funktionen).
Mit dem $ -Kolksumfang des Controllers (gleichwertig wie Umfang und Kontrollbereich) wird das AngularJS -Modellobjekt gespeichert.
Der Controller erstellt zwei Eigenschaften (FirstName und Lastname) im Bereich.
Die NG-Modell-Direktive bindet die Eingangsdomäne an die Eigenschaften des Controllers (FirstName und LastName).
Controller -Methode
Das obige Beispiel zeigt ein Controller -Objekt mit zwei Eigenschaften: Lastname und FirstName.
Der Controller kann auch Methoden (Variablen und Funktionen) haben:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "personctrl"> name: <input type = "text" ng-model = "firstName"> <br> Name: {{fullname ()}} </div> <script> var App = Angular.module ('MyApp', []) app.controller ('personcTrl) ($ $ ", $ accope. $ scope.lastName = "doe";Laufeffekt:
Name:
Nachname:
Name: John Doe
Controller in externen Dateien
In großen Anwendungen wird der Controller normalerweise in einer externen Datei gespeichert.
Kopieren Sie den Code einfach in das <script> -Tag in eine externe Datei namens PersonController.js:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "personctrl"> name: <input type = "text" ng-model = "firstName"> <br> Name: <Eingabe type = "text" ng-model = "dastname"> <br> <br> Name: {{Firstname + " + DenName}}} src = "PersonController.js"> </script> </body> </html>Auslaufergebnisse:
Name:
Nachname:
Name: John Doe
Andere Beispiele
Das folgende Beispiel erstellt eine neue Controller -Datei:
Angular.module ('MyApp', []). Controller ('nameSctrl', function ($ scope) {$ scope.names = [{name: 'Jani', Land: 'Norway'}, {name: 'hege', land: 'schweden'}, {name: 'kai', land: 'denmark'}];};};};};Speichern Sie die Datei als namescontroller.js:
Verwenden Sie dann die Controller -Datei in der Anwendung:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" <ul> <li ng-repeat = "x in Namen"> {{X.Name + ',' + X.Country}} </li> </ul> </div> <script src = "namesController.js"> </script> </body> </html>Laufeffekt:
Das obige ist die Zusammenstellung von AngularJS -Controller -Daten und wird später ergänzt.