AngularJS - Ansichten

AngularJS unterstützt Single Page Application über mehrere Ansichten auf einer einzelnen Seite. Zu diesem Zweck hat AngularJS die Anweisungen ng-view und ng-template sowie die Dienste $ routeProvider bereitgestellt.

ng-view-Richtlinie

Die Direktive ng-view erstellt einfach einen Platzhalter, in dem eine entsprechende Ansicht (HTML- oder ng-template-Ansicht) basierend auf der Konfiguration platziert werden kann.

Verwendung

Definieren Sie ein Div mit ng-view im Hauptmodul.

<div ng-app = "mainApp">
   ...
   <div ng-view></div>

</div>

ng-template Richtlinie

Die Direktive ng-template wird verwendet, um eine HTML-Ansicht mithilfe eines Skript-Tags zu erstellen. Es enthält das ID- Attribut, das von $ routeProvider verwendet wird, um eine Ansicht einem Controller zuzuordnen.

Verwendung

Definieren Sie im Hauptmodul einen Skriptblock mit dem Typ ng-template.

<div ng-app = "mainApp">
   ...
	
   <script type = "text/ng-template" id = "addStudent.htm">
      <h2> Add Student </h2>
      {{message}}
   </script>

</div>

$ routeProvider Service

Der $ routeProvider ist ein Schlüsseldienst, der die Konfiguration von URLs festlegt, sie der entsprechenden HTML-Seite oder ng-Vorlage zuordnet und einen Controller mit derselben anfügt.

Verwendungszweck 1

Definieren Sie im Hauptmodul einen Skriptblock mit dem Typ ng-template.

<div ng-app = "mainApp"> 
   ... 
   <script type = "text/ng-template" id = "addStudent.htm"> 
      <h2> Add Student </h2> 
      {{message}} 
   </script>  
</div>

Verwendung 2

Definieren Sie einen Skriptblock mit Hauptmodul und legen Sie die Routing-Konfiguration fest.

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(['$routeProvider', function($routeProvider) {
   $routeProvider
   
   .when('/addStudent', {
      templateUrl: 'addStudent.htm', controller: 'AddStudentController'
   })
   .when('/viewStudents', {
      templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'
   })
   .otherwise ({
      redirectTo: '/addStudent'
   });
	
}]);

Die folgenden Punkte sind wichtig, um im obigen Beispiel berücksichtigt zu werden:

$ routeProvider wird als Funktion in der Konfiguration des mainApp-Moduls definiert, wobei der Schlüssel als '$ routeProvider' verwendet wird.
$ routeProvider.when definiert eine URL "/ addStudent", die "addStudent.htm" zugeordnet ist. addStudent.htm sollte im selben Pfad wie die Haupt-HTML-Seite vorhanden sein. Wenn die HTML-Seite nicht definiert ist, muss ng-template mit id = "addStudent.htm" verwendet werden. Wir haben ng-template verwendet.
"sonst" wird verwendet, um die Standardansicht festzulegen.
Mit "controller" wird der entsprechende Controller für die Ansicht eingestellt.

Beispiel

Das folgende Beispiel zeigt die Verwendung aller oben genannten Richtlinien.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Views</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp">
         <p><a href = "#addStudent">Add Student</a></p>
         <p><a href = "#viewStudents">View Students</a></p>
         <div ng-view></div>
         
         <script type = "text/ng-template" id = "addStudent.htm">
            <h2> Add Student </h2>
            {{message}}
         </script>
         
         <script type = "text/ng-template" id = "viewStudents.htm">
            <h2> View Students </h2>
            {{message}}
         </script>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", ['ngRoute']);
         mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider
            
            .when('/addStudent', {
               templateUrl: 'addStudent.htm',
               controller: 'AddStudentController'
            })
            .when('/viewStudents', {
               templateUrl: 'viewStudents.htm',
               controller: 'ViewStudentsController'
            })
            .otherwise({
               redirectTo: '/addStudent'
            });
         }]);
         mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "This page will be used to display add student form";
         });
         mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "This page will be used to display all the students";
         });
      </script>
      
   </body>
</html>

Ausgabe

Öffnen Sie die Datei testAngularJS.htm in einem Webbrowser und sehen Sie das Ergebnis.