AngularJS ng-view avec exemple : comment implémenter la vue
James Hartmann
De nos jours, tout le monde aurait entendu parler des « applications à page unique ». De nombreux sites Web bien connus tels que Gmail utilisent le concept d'applications à page unique (SPA).
SPA est le concept selon lequel lorsqu'un utilisateur demande une page différente, l'application ne naviguera pas vers cette page mais affichera à la place la vue de la nouvelle page dans la page existante elle-même.
Cela donne le sentiment à l’utilisateur qu’il n’a jamais quitté la page en premier lieu. La même chose peut être obtenue dans Angular à l’aide de vues en conjonction avec des routes.
Dans ce tutoriel, vous apprendrez-
- Qu'est-ce qu'une vue ?
- Directive ng-view dans AngularJS
- Comment implémenter ng-view dans AngularJS avec exemple
Qu'est-ce qu'une vue ?
Une vue est le contenu qui est présenté à l'utilisateur. Fondamentalement, ce que l'utilisateur veut voir, cette vue de l'application sera donc montrée à l'utilisateur.
La combinaison de vues et d'itinéraires aide à diviser une application en vues logiques et à lier différentes vues aux contrôleurs.
Diviser l'application en différentes vues et utiliser le routage pour charger différentes parties de l'application permet de diviser logiquement l'application et de la rendre plus gérable.
Supposons que nous disposions d'une application de commande dans laquelle un client peut consulter les commandes et en passer de nouvelles.
Le diagramme ci-dessous et les explications ultérieures montrent comment créer cette application sous la forme d'une application d'une seule page.
Désormais, au lieu d'avoir deux pages Web différentes, une pour « Afficher les commandes » et une autre pour les « Nouvelles commandes », dans AngularJS, vous créeriez plutôt deux vues différentes appelées « Afficher les commandes » et « Nouvelles commandes » dans la même page.
Nous aurons également 2 liens de référence dans notre application appelés #show et #new.
- Ainsi, lorsque l'application accède à MyApp/#show, elle affichera la vue de View Orders, en même temps elle ne quittera pas la page. Il actualisera simplement la section de la page existante avec les informations « Afficher les commandes ». Il en va de même pour la vue « Nouvelles commandes ».
Ainsi, de cette façon, il devient plus simple de séparer l'application en différentes vues pour la rendre plus gérable et plus facile à apporter des modifications chaque fois que nécessaire.
Et chaque vue aura un contrôleur correspondant pour contrôler la logique métier de cette fonctionnalité.
Directive ng-view dans AngularJS
Le « ngView » est une directive qui complète le service $route en incluant le modèle rendu de l'itinéraire actuel dans le fichier de présentation principal (index.html).
Chaque fois que l'itinéraire actuel change, la vue inclut les modifications en fonction de la configuration du service $route sans modifier la page elle-même.
Nous couvrirons routes dans un chapitre ultérieur, pour l'instant, nous nous concentrerons sur l'ajout de plusieurs vues à notre application.
Vous trouverez ci-dessous l’organigramme complet du fonctionnement de l’ensemble du processus. Nous examinerons en détail chaque processus dans notre exemple ci-dessous.
Comment implémenter ng-view dans AngularJS
Jetons un coup d'œil à un exemple de la façon dont nous pouvons implémenter ng-view dans AngularJS. Dans notre exemple, nous allons présenter deux options à l'utilisateur,
- L'une consiste à afficher un « événement » et l'autre à ajouter un « événement ».
- Lorsque l'utilisateur clique sur le lien Ajouter un événement, la vue « Ajouter un événement » lui sera affichée et il en va de même pour « Afficher l'événement ».
Veuillez suivre les étapes ci-dessous pour mettre cet exemple en place.
Étape 1) Incluez le fichier angulaire-route comme référence de script.
Ce fichier d'itinéraire est nécessaire pour utiliser les fonctionnalités permettant d'avoir plusieurs itinéraires et vues. Ce fichier peut être téléchargé depuis le site Web angulaireJS.
Étape 2) Ajoutez des balises href et une balise div.
Dans cette étape,
- Ajoutez des balises href qui représenteront des liens vers « Ajout d'un nouvel événement » et « Affichage d'un événement ».
- Ajoutez également une balise div avec la directive ng-view qui représentera la vue. Cela permettra d'injecter la vue correspondante chaque fois que l'utilisateur clique sur le « lien Ajouter un nouvel événement » ou sur le « lien Afficher l'événement ».
Étape 3) Dans votre balise de script pour Angular JS, ajoutez le code suivant.
Ne nous inquiétons pas du routage, pour l'instant, nous verrons cela dans un prochain chapitre. Voyons juste le code des vues pour l'instant.
- Cette section de code signifie que lorsque l'utilisateur clique sur la balise href « NewEvent » qui a été définie précédemment dans la balise div. Il ira sur la page Web add_event.html, prendra le code à partir de là et l'injectera dans la vue. Deuxièmement, pour traiter la logique métier de cette vue, accédez à « AddEventController ».
- Cette section de code signifie que lorsque l'utilisateur clique sur la balise href « DisplayEvent » qui a été définie précédemment dans la balise div. Il ira à la page Web show_event.html, prendra le code à partir de là et l'injectera dans la vue. Deuxièmement, pour traiter la logique métier de cette vue, accédez au « ShowDisplayController ».
- Cette section de code signifie que la vue par défaut présentée à l'utilisateur est la vue DisplayEvent.
Étape 4) Ajoutez des contrôleurs pour traiter la logique métier.
Ensuite, il faut ajouter des contrôleurs pour traiter la logique métier pour les fonctionnalités « DisplayEvent » et « Ajouter un nouvel événement ».
Nous ajoutons simplement une variable de message à chaque objet de portée pour chaque contrôleur. Ce message s'affichera lorsque la vue appropriée sera présentée à l'utilisateur.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
</head>
<body ng-app="sampleApp">
<h1> Guru99 Global Event</h1>
<div class="container">
<ul><li><a href="#!NewEvent"> Add New Event</a></li>
<li><a href="#!DisplayEvent"> Display Event</a></li>
</ul>
<div ng-view></div>
</div>
<script>
var app = angular.module('sampleApp',["ngRoute"]);
app.config(function($routeProvider){
$routeProvider.
when("/NewEvent",{
templateUrl : "add_event.html",
controller: "AddEventController"
}).
when("/DisplayEvent", {
templateUrl: "show_event.html",
controller: "ShowDisplayController"
}).
otherwise ({
redirectTo: '/DisplayEvent'
});
});
app.controller("AddEventController", function($scope) {
$scope.message = "This is to Add a new Event";
});
app.controller("ShowDisplayController",function($scope){
$scope.message = "This is display an Event";
});
</script>
</body>
</html>
Étape 5) Créez des pages appelées add_event.html et show_event.html
Ensuite, créez des pages appelées add_event.html et show_event.html. Gardez les pages simples, comme indiqué ci-dessous.
Dans notre cas, la page add_event.html aura une balise d'en-tête avec le texte « Ajouter un nouvel événement » et aura une expression pour afficher le message « Ceci est pour ajouter un nouvel événement ».
De même, la page show_event.html aura également une balise d'en-tête pour contenir le texte « Afficher l'événement » et aura également une expression de message pour afficher le message « Ceci doit afficher un événement ».
La valeur de la variable de message sera injectée en fonction du contrôleur attaché à la vue.
Pour chaque page, nous allons ajouter la variable message, qui sera injectée depuis chaque contrôleur respectif.
- add_event.html
<h2>Add New Event</h2>
{{message}}
- show_event.html
<h2>Show Event</h2>
{{message}}
Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie :
De la sortie, nous pouvons remarquer 2 choses
- La barre d'adresse reflétera la vue actuellement affichée. Ainsi, puisque la vue par défaut consiste à afficher l'écran Afficher l'événement, la barre d'adresse affiche l'adresse de « DisplayEvent ».
- Cette section est la vue, qui est créée à la volée. Étant donné que la vue par défaut est celle de Afficher l'événement, c'est ce qui est affiché à l'utilisateur.
Cliquez maintenant sur le lien Ajouter un nouvel événement dans la page affichée. Vous obtiendrez maintenant le résultat ci-dessous.
Sortie :
- La barre d'adresse indiquera désormais que la vue actuelle est désormais la vue « Ajouter un nouvel événement ». Notez que vous serez toujours sur la même page de candidature. Vous ne serez pas dirigé vers une nouvelle page de candidature.
- Cette section est la vue, et elle va maintenant changer pour afficher le HTML pour la fonctionnalité « Ajouter un nouvel événement ». Alors maintenant, dans cette section, la balise d'en-tête « Ajouter un nouvel événement » et le texte « Ceci consiste à ajouter un nouvel événement » sont affichés à l'utilisateur.
