Maison > Article > interface Web > Introduction à l'application de la fonction d'affichage d'AngularJS_AngularJS

Introduction à l'application de la fonction d'affichage d'AngularJS_AngularJS

WBOYoriginal: 2016-05-16 15:54:351497parcourir

AngularJS prend en charge les applications à page unique via plusieurs vues sur une seule page. Pour ce faire, AngularJS fournit les directives ng-view et ng-template, ainsi que le service $routeProvider.
ng-view

La balise

ng-view crée simplement un espace réservé pour une vue correspondante (vue HTML ou ng-template) qui peut être placée en fonction de la configuration.
Utilisez

Définissez une div et une ng-view dans le module principal.

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

</div>

ng-template

La directive

ng-template est utilisée pour créer des vues HTML à l'aide de balises de script. Il contient un attribut "id" pour la vue du contrôleur mappée par $routeProvider.
Utilisez

Définissez le type en tant que bloc de script pour ng-template dans le module principal.

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

</div>

$routeProvider

$routeProvider est une configuration qui regroupe les URL, les mappe à la page HTML ou au modèle ng correspondant et attache un contrôleur au service en utilisant la même clé.
Utilisez

Définissez le type en tant que bloc de script pour ng-template dans le module principal.

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

</div>

Utiliser

Définissez le bloc de script du module principal et définissez la configuration du routage.

 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'
        });
     }]);

Les éléments suivants sont des questions importantes à prendre en compte dans l'exemple ci-dessus

$routeProvider est défini comme une fonction de configuration du module mainApp sous '$routeProvider' à l'aide de mots-clés
$routeProvider mappe l'URL "/addStudent" à "addStudent.html" lorsqu'elle est définie. addStudent.html doit exister dans le même chemin que la page HTML principale. Si la page htm n'est pas définie, alors ng-template est utilisé avec id="addStudent.html". Nous avons utilisé ng-template ;
« sinon » est la vue par défaut utilisée pour définir
« conlloer » est utilisé pour définir le contrôleur correspondant à la vue

Exemple

L'exemple suivant démontrera toutes les commandes ci-dessus.
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>

Résultats

Ouvrez textAngularJS.html dans votre navigateur Web. Voir les résultats comme suit :

2015617104059841.jpg (560×429)

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le plug-in jQuery zepto.js implémente simplement l'ongletswitching_jqueryArticle suivant：Le plug-in jQuery zepto.js implémente simplement l'ongletswitching_jquery

Articles Liés

Voir plus