AngularJS prend en charge l'application à page unique via plusieurs vues sur une seule page. Pour ce faire, AngularJS fournit des directives NG-View et Ng-Template, ainsi que $ RouteProvider Services.
Ng-View
La balise NG-View crée simplement un espace réservé, qui est une vue correspondante (vue HTML ou NG-Template) qui peut être placée en fonction de la configuration.
utiliser
Définissez une division et une vision ng 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 une propriété "ID" pour la vue du contrôleur mappé par $ RouteProvider.
utiliser
Définissez le type comme le bloc de script de Ng-Template dans le module principal.
<div ng-app = "mainApp"> ... <script type = "text / ng-template" id = "addstudent.html"> <h2> Ajouter l'étudiant </h2> {{message}} </cript> </div>$ RouteProvider
$ RouteProvider est la configuration des URL de groupe, les mappe sur la page HTML ou le template ng correspondant, et joint un service qui utilise les mêmes touches au contrôleur.
utiliser
Définissez le type comme le bloc de script de Ng-Template dans le module principal.
<div ng-app = "mainApp"> ... <script type = "text / ng-template" id = "addstudent.html"> <h2> Ajouter l'étudiant </h2> {{message}} </cript> </div>utiliser
Définissez le bloc de script du module principal et définissez la configuration de routage.
var mainApp = angular.module ("mainApp", ['ngoute']); mainApp.config (['$ RouteProvider', fonction ($ RouteProvider) {$ RouteProvider. When ('/ addStudent', {templateUrl: 'addStudent.html', contrôleur: 'addStudentController'}). When ('/ ViewStudents', {templateUrl: ' 'ViewStudentsController'}).Les éléments suivants sont des questions importantes à considérer dans l'exemple ci-dessus
$ RouteProvider est défini comme la fonction de configuration du module MainApp à l'aide du mot clé comme «$ RouteProvider»;
$ RouteProvider Lorsque l'URL "/ addStudent" est défini, mappe "addStudent.html". addStudent.html doit exister sur le même chemin que la page HTML principale. Si la page HTM n'est pas définie, alors Ng-Template est utilisé par 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 de la vue;
exemple
Les exemples suivants montreront toutes les instructions ci-dessus.
testangularjs.html
<Html> <A-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-rout <p> <a href = "# ViewStudents"> Afficher les étudiants </a> </p> <div ng-view> </ div> <script type = "Text / ng-Template" id = "addStudent.html"> <h2> Ajouter Student </ h2> {{message}}} </cript> <script type = "text / ng-tiemple" id = "ViewSTuds.html. <h2> Afficher les étudiants </h2> {{message}} </cript> <cript> var mainApp = angular.module ("mainApp", ['ngoute']); mainApp.config (['$ RouteProvider', fonction ($ RouteProvider) {$ RouteProvider. When ('/ addStudent', {templateUrl: 'addStudent.html', contrôleur: 'addStudentController'}). When ('/ ViewStudents', {templateUrl: ' 'ViewStudentsController'}). mainApp.Controller ('addStudentController', fonction ($ scope) {$ scope.sessage = "Cette page sera utilisée pour afficher le formulaire Add Student";}); MainApp.Controller ('ViewStudentsController', Function ($ Scope) {$ scope.message = "Cette page sera utilisée pour afficher tous les étudiants";}); </cript> </ body> </html>résultat
Ouvrez Textangularjs.html dans un navigateur Web. Les résultats sont les suivants:
Ce qui précède est une compilation des informations de vue angularjs. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien pour ce site Web!