suchen

Heim >Web-Frontend >js-Tutorial >Einführung in die Ansichtsfunktionsanwendung von AngularJS_AngularJS

Einführung in die Ansichtsfunktionsanwendung von AngularJS_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:54:351526Durchsuche

AngularJS unterstützt Einzelseitenanwendungen über mehrere Ansichten auf einer einzelnen Seite. Zu diesem Zweck stellt AngularJS die Direktiven ng-view und ng-template sowie den Dienst $routeProvider bereit.
ng-view

Das

ng-view-Tag erstellt einfach einen Platzhalter für eine entsprechende Ansicht (HTML- oder ng-template-Ansicht), der je nach Konfiguration platziert werden kann.
Verwenden Sie

Definieren Sie eine Div- und NG-Ansicht im Hauptmodul. 

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

</div>

ng-template

Die

ng-template-Direktive wird verwendet, um HTML-Ansichten mithilfe von Skript-Tags zu erstellen. Es enthält ein „id“-Attribut für die von $routeProvider zugeordnete Controller-Ansicht.
Verwenden Sie

Definieren Sie den Typ als Skriptblock für ng-template im Hauptmodul. 

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

</div>

$routeProvider

$routeProvider ist eine Konfiguration, die URLs gruppiert, sie der entsprechenden HTML-Seite oder ng-Vorlage zuordnet und einen Controller mit demselben Schlüssel an den Dienst anfügt.
Verwenden Sie

Definieren Sie den Typ als Skriptblock für ng-template im Hauptmodul. 

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

</div>

Verwenden Sie

Definieren Sie den Skriptblock des Hauptmoduls und legen Sie die Routing-Konfiguration fest. 

 var mainApp = angular.module("mainApp", ['ngRoute']);
   
   mainApp.config(['$routeProvider',
     function($routeProvider) {
      $routeProvider.
        when('/addStudent', {
         templateUrl: 'addStudent.html',
         controller: 'AddStudentController'
        }).
        when('/viewStudents', {
         templateUrl: 'viewStudents.html',
         controller: 'ViewStudentsController'
        }).
        otherwise({
         redirectTo: '/addStudent'
        });
     }]);

Die folgenden wichtigen Punkte sind im obigen Beispiel zu berücksichtigen

  • $routeProvider wird als Konfigurationsfunktion des mainApp-Moduls unter „$routeProvider“ mithilfe von Schlüsselwörtern definiert;
    • $routeProvider ordnet die URL „/addStudent“ bei der Definition „addStudent.html“ zu. addStudent.html sollte im selben Pfad wie die Haupt-HTML-Seite vorhanden sein. Wenn die HTM-Seite nicht definiert ist, wird ng-template mit id="addStudent.html" verwendet. Wir haben ng-template;
  • verwendet
    • „sonst“ ist die Standardansicht, die zum Festlegen von
  • verwendet wird
    • „conlloer“ wird verwendet, um den Controller entsprechend der Ansicht festzulegen;
Beispiel

Das folgende Beispiel demonstriert alle oben genannten Befehle.

testAngularJS.html


<html>
<head>
  <title>Angular JS Views</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.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.html">
     <h2> Add Student </h2>
     {{message}}
   </script>
   <script type="text/ng-template" id="viewStudents.html">
     <h2> View Students </h2>   
     {{message}}
   </script> 
  </div>

  <script>
   var mainApp = angular.module("mainApp", ['ngRoute']);
   
   mainApp.config(['$routeProvider',
     function($routeProvider) {
      $routeProvider.
        when('/addStudent', {
         templateUrl: 'addStudent.html',
         controller: 'AddStudentController'
        }).
        when('/viewStudents', {
         templateUrl: 'viewStudents.html',
         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>
Ergebnisse

Öffnen Sie textAngularJS.html in Ihrem Webbrowser. Sehen Sie sich die Ergebnisse wie folgt an:


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Das jQuery-Plug-in zepto.js implementiert einfach Tab Switching_jqueryNächster Artikel：Das jQuery-Plug-in zepto.js implementiert einfach Tab Switching_jquery

In Verbindung stehende Artikel

Mehr sehen