AngularJS unterstützt eine einzelne Seitenanwendung über mehrere Ansichten auf einer einzelnen Seite. Dazu bietet AngularJS NG-View- und NG-Template-Direktiven sowie $ routeProvider-Dienste an.
NG-View
Das NG-View-Tag erstellt einfach einen Platzhalter, bei dem es sich um eine entsprechende Ansicht (HTML- oder NG-Template-Ansicht) handelt, die gemäß der Konfiguration platziert werden kann.
verwenden
Definieren Sie eine DIV- und NG-View im Hauptmodul.
<div ng-App = "mainApp"> ... <div ng-view> </div> </div>
NG-Template
Die NG-Template-Anweisung wird verwendet, um HTML-Ansichten mithilfe von Skript-Tags zu erstellen. Es enthält eine "ID" -Fahrung für die von $ RooleProvider abgebildete Controller -Ansicht.
verwenden
Definieren Sie den Typ als Skriptblock von NG-Template im Hauptmodul.
<div ng-app = "mainApp"> ... <skript type = "text/ng-template" id = "addStudent.html"> <h2> add student </h2> {{message}} </script> </div>$ routeProvider
$ routeProvider ist die Konfiguration von Gruppen-URLs, ordnet sie auf die entsprechende HTML-Seite oder die NG-Template ab und fügt einen Dienst an, der dieselben Schlüssel zum Controller verwendet.
verwenden
Definieren Sie den Typ als Skriptblock von NG-Template im Hauptmodul.
<div ng-app = "mainApp"> ... <skript type = "text/ng-template" id = "addStudent.html"> <h2> add student </h2> {{message}} </script> </div>verwenden
Definieren Sie den Skriptblock des Hauptmoduls und legen Sie die Routing -Konfiguration fest.
var mainApp = angular.module ("mainApp", ['nGroute']); mainApp.config (['$ routeProvider', Funktion ($ routeProvider) {$ routeProvider. WOS ('/addStudent', {templateurl: 'addStudent.html', Controller: 'addStudentController'}). 'ViewStudentsController'}).Das Folgende sind wichtige Themen, die im obigen Beispiel berücksichtigt werden müssen
$ routeProvider ist definiert als die Konfigurationsfunktion des HauptApp -Moduls, die das Schlüsselwort als "$ routeProvider" verwendet.
$ routeProvider Wenn die URL "/addStudent" definiert ist, kartieren Sie "addStudent.html". addStudent.html sollte auf dem gleichen Pfad wie auf der Hauptseite der Haupt -HTML vorhanden sein. Wenn die HTM-Seite nicht definiert ist, wird NG-Template von id = "addStudent.html" verwendet. Wir haben NG-Template verwendet;
"Ansonsten" ist die Standardansicht, die zum Setzen verwendet wird.
"Conlloer" wird verwendet, um den entsprechenden Controller der Ansicht festzulegen.
Beispiel
Die folgenden Beispiele zeigen alle oben genannten Anweisungen.
testangularJs.html
<html> <kopf> <titels> Angular JS -Ansichten </title> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min <p><a href="#viewStudents">View Students</a></p> <div ng-view></div> <script type="text/ng-template" id="addStudent.html"> <h2> Add Student </h2> {{message}} </script> <script type="text/ng-template" id="viewStudents.html"> <h2> Schüler anzeigen </h2> {{message}} </script> <script> var mainapp = angular.module ("mainApp", ['nGroute']); mainApp.config (['$ routeProvider', Funktion ($ routeProvider) {$ routeProvider. WOS ('/addStudent', {templateurl: 'addStudent.html', Controller: 'addStudentController'}). 'ViewStudentsController'}). mainApp.controller ('addStudentController', Funktion ($ scope) {$ scope.message = "Diese Seite wird verwendet, um das add -add -Schülerformular anzuzeigen";}); mainApp.controller ('ViewStudentsController', Funktion ($ scope) {$ scope.message = "Diese Seite wird verwendet, um alle Schüler anzuzeigen";}); </script> </body> </html>Ergebnis
Öffnen Sie TextangularJs.html in einem Webbrowser. Die Ergebnisse sind wie folgt:
Das obige ist eine Zusammenstellung von AngularJS -Ansichtsinformationen. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Website!