AngularJS -Anwendungen stützen sich hauptsächlich auf Controller, um den Datenfluss in der Anwendung zu steuern. Der Controller wird unter Verwendung der NG-Controller-Anweisung definiert. Ein Controller ist eine Funktion, die Eigenschaften/Eigenschaften und JavaScript -Objekte enthält. Jeder Controller akzeptiert den Parameter $ Scope, um das vom Controller gesteuerte Anwendung/Modul anzugeben.
<div ng-App = "" ng-controller = "studentController"> ... </div>
Hier haben wir einen Controller StudentController deklariert, der die NG-Controller-Richtlinie verwendet. Als nächster Schritt werden wir den StudentController wie folgt definieren
<Script> function StudentController ($ scope) {$ scope.student = {FirstName: "yiibai", LastName: "com", fullname: function () {var studentObject; StudentObject = $ scope.student; return studentObject.firstname + "" + studentObject.lastName; }};} </script>StudentController definiert $ Scope als einen Parameter von JavaScript -Objekten.
$ scope repräsentiert die Anwendung unter Verwendung des StudentController -Objekts.
$ scope.student ist Eigentum des StudentController -Objekts.
FirstName und LastName sind zwei Eigenschaften des $ scope.student -Objekts. Wir haben den Standardwert an sie übergeben.
FullName ist eine Funktion des Objekts von $ scope.student, und seine Aufgabe ist es, den fusionierten Namen zurückzugeben.
In der FullName -Funktion möchten wir jetzt, dass das Schülerobjekt den Namen der Kombination zurückgibt.
Als Illustration ist es auch möglich, das Controller -Objekt in einer separaten JS -Datei zu definieren und die HTML -Seiten in die Datei zu setzen.
Sie können jetzt NG-Model verwenden oder den Ausdruck wie folgt verwenden, um die Eigenschaften von StudentController zu verwenden.
Geben Sie den Vornamen ein: <Eingabe type = "text" ng-model = "student.firstname"> <br> Nachname eingeben: <Eingabe typ
Jetzt gibt es zwei Eingangsboxen: student.firstname und student.lastName.
Jetzt gibt es die Methode von Student.fullname (), die zu HTML hinzugefügt wurde.
Geben Sie nun einfach das Feld Vorname und Lastname ein, um einzugeben, was eingibt, und Sie können sehen, dass die beiden Namen automatisch aktualisiert werden.
Beispiel
Das folgende Beispiel zeigt die Verwendung eines Controllers an.
Der Inhalt der TestangularJs.html -Datei lautet wie folgt:
<html> <Head> <titels> Angular JS-Controller </title> </head> <body> <h2> AngularJS-Probenanwendung </H2> <div ng-app = "" ng-controller = "studentController"> Vorname eingeben: <Eingabe-Typ "text" tect model ng-model = "student.lastName"> <br> <br> Sie betreten: {{student.fullname ()}} </div> <script> function StudentController ($ scope) {$ scope.student = {Firstname: "Mahesh", Lastname: Parashar, Fullname: Funktion: Funktion () {var studentoBocation; StudentObject = $ scope.student; return studentObject.firstname + "" + studentObject.lastName; }};} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>Ausgabe
Öffnen Sie TextangularJs.html in einem Webbrowser und sehen Sie die folgenden Ergebnisse:
Das obige ist die Informationen, die den AngularJS -Controller aussortieren. Wir werden das relevante Wissen in Zukunft weiter aussortieren. Vielen Dank für Ihre Unterstützung für diese Website.