AngularJS ng-view avec exemple

Par : James Hartmann James Hartmann
Hours Le kit de prรฉparation mis ร  jour

โšก Rรฉsumรฉ intelligent

Dans AngularJS, les vues permettent ร  une page de modifier son contenu sans avoir ร  naviguer vers une autre, ce qui donne l'impression d'une application monopage instantanรฉe. La directive `ng-view` dรฉlimite la zone que chaque route remplace par son propre modรจle et contrรดleur.

  • ๐ŸชŸ Emplacement rรฉservรฉ unique : Un รฉlรฉment portant l'attribut ng-view marque l'endroit oรน chaque modรจle routรฉ est injectรฉ, et un seul รฉlรฉment de ce type est autorisรฉ par page.
  • ๐Ÿ”— Appariement des itinรฉraires : Chaque route dรฉsigne un templateUrl et un contrรดleur, liant ainsi le balisage et la logique pour cette vue.
  • ๐Ÿ“ฆ Dรฉpendance du module : Les vues nรฉcessitent angular-route.js ainsi qu'une dรฉpendance dรฉclarรฉe au module ngRoute.
  • (I.e. Vue par dรฉfaut: La clause ยซ otherwise ยป redirige toute adresse non correspondante, ce qui permet d'afficher une vue lors du premier chargement.
  • ๐ŸŒ Serveur requis : Les modรจles sont rรฉcupรฉrรฉs via HTTP, la page doit donc รชtre servie plutรดt qu'ouverte depuis le systรจme de fichiers.
  • โš ๏ธ Statut de support : AngularJS a atteint sa fin de vie le 31 dรฉcembre 2021 et ne reรงoit plus aucun correctif de sรฉcuritรฉ.
En savoir plus

Directive ng-view d'AngularJS

Des sites bien connus tels que Gmail Utilisez le concept d'application monopage (SPA). Lorsqu'un utilisateur demande une autre page, l'application ne change pas de page ; elle affiche la nouvelle page directement dans la page actuelle, donnant ainsi l'impression ร  l'utilisateur de ne jamais avoir quittรฉ l'application. AngularJS propose le mรชme rรฉsultat grรขce ร  l'utilisation conjointe des vues et des routes.

โš ๏ธ Avis d'assistance : AngularJS a atteint fin de vie le 31 dรฉcembre 2021 et ne reรงoit plus aucun correctif ni mise ร  jour de sรฉcuritรฉ. La directive ci-dessous reste valable pour la maintenance des applications AngularJS 1.x existantes ; dans les versions modernes Angulaire l'รฉquivalent est <router-outlet>.

Qu'est-ce qu'une vue ?

Une vue correspond au contenu affichรฉ ร  l'utilisateur. Quel que soit le contenu que l'utilisateur souhaite voir, la vue correspondante de l'application s'affiche.

La combinaison de vues et de routes divise une application en vues logiques et lie chacune ร  une vue. contrรดleurce qui rend l'application plus facile ร  gรฉrer.

Prenons l'exemple d'une application de commande permettant ร  un client de consulter ses commandes et d'en passer de nouvelles. Le schรฉma ci-dessous illustre comment elle devient une application monopage.

Qu'est-ce qu'une vue

Au lieu de deux pages web distinctes, l'une pour ยซ Voir les commandes ยป et l'autre pour ยซ Nouvelles commandes ยป, AngularJS utilise deux vues sur la mรชme page, accessibles via deux liens de rรฉfรฉrence, #show et #new:

  • Navigation vers MyApp/#show Affiche la vue ยซ Voir les commandes ยป sans quitter la page. Seule cette section de la page existante est actualisรฉe.
  • Navigation vers MyApp/#new Il en va de mรชme pour la vue ยซ Nouvelles commandes ยป.

Le fait de sรฉparer une application en vues de cette maniรจre la rend plus facile ร  gรฉrer et ร  modifier, et chaque vue possรจde un contrรดleur correspondant contenant la logique mรฉtier de cette fonction.

Directive ng-view dans AngularJS

Le ngView directive complรจte le $route service en incluant le modรจle rendu de l'itinรฉraire actuel dans le fichier de mise en page principal, normalement index.html.

ร€ chaque modification de l'itinรฉraire actuel, la vue affichรฉe change en consรฉquence. $route configuration, sans que la page elle-mรชme se recharge. Routes sont traitรฉes sรฉparรฉment ; ici, l'accent est mis sur l'ajout de plusieurs vues.

L'organigramme ci-dessous illustre l'ensemble du processus, que l'exemple dรฉtaille ensuite รฉtape par รฉtape.

Directive ng-view dans AngularJS

Comment implรฉmenter ng-view dans AngularJS

Cet exemple prรฉsente deux options ร  l'utilisateur : afficher un รฉvรฉnement et ajouter un รฉvรฉnement. Cliquer Ajouter un รฉvรฉnement affiche la vue Ajouter un รฉvรฉnement, et il en va de mรชme pour Afficher un รฉvรฉnement.

ร‰tape 1) Incluez le fichier angular-route comme rรฉfรฉrence de script. Ce fichier est nรฉcessaire pour utiliser plusieurs routes et vues, et est disponible sur le site d'AngularJS.

Incluez le fichier angular-route

ร‰tape 2) Ajoutez les balises href et la balise div.

  1. Ajoutez des balises href pointant vers ยซ Ajouter un nouvel รฉvรฉnement ยป et ยซ Afficher lโ€™รฉvรฉnement ยป.
  2. Ajoutez une div contenant le ng-view Directive permettant de dรฉlimiter la zone d'affichage. La vue correspondante y est insรฉrรฉe ร  chaque clic sur l'un ou l'autre lien.

Ajoutez les balises href et div

ร‰tape 3) Dans la balise script AngularJS, ajoutez la configuration de routage.

  1. Lorsque l'utilisateur clique sur Nouvel รฉvรฉnement lien, chargements AngularJS add_event.html, injecte son balisage dans la vue et utilise AddEventController pour la logique mรฉtier.
  2. Lorsque l'utilisateur clique sur Afficher l'รฉvรฉnement lien, รงa charge show_event.html et utilise ShowDisplayController.
  3. Le otherwise Cette clause dรฉfinit la vue par dรฉfaut affichรฉe ร  l'utilisateur, qui est ici DisplayEvent.

Configuration du routage

ร‰tape 4) Ajoutez des contrรดleurs pour gรฉrer la logique mรฉtier des deux fonctions. Chacun se contente de dรฉfinir un message sur son objet de portรฉe, qui s'affiche lorsque la vue correspondante est prรฉsentรฉe.

Ajouter des manettes

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.8.3/angular-route.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 to display an Event";
    });
</script>

</body>
</html>

โš ๏ธ Trois corrections ร  apporter ร  l'annonce originale. Tout d'abord, les liens lisent #!NewEvent sans barre oblique tandis que les routes sont dรฉclarรฉes comme /NewEvent, donc rien ne correspond. ร€ partir d'AngularJS 1.6, le prรฉfixe de hachage par dรฉfaut est !, ce qui constitue l'adresse correcte #!/NewEvent โ€” une barre oblique aprรจs le point d'exclamation. Deuxiรจmement, ShowDisplayController Afficher le message ยซ Ceci est l'affichage d'un รฉvรฉnement ยป, sans le mot ร  que les citations du texte environnant. Troisiรจmement, lib/bootstrap.js Cette variable รฉtait chargรฉe ร  partir d'un chemin relatif qui ne aboutit nulle part et n'est jamais utilisรฉe ; elle a donc รฉtรฉ supprimรฉe.

ARTICLES LIร‰S

ร‰tape 5) Crรฉez les pages add_event.html et show_event.htmlChacune contient un en-tรชte et une expression qui affiche le message injectรฉ par son contrรดleur.

  • add_event.html

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

show_event.html

<h2>Show Event</h2>

{{message}}

Si le code s'exรฉcute correctement, le rรฉsultat suivant s'affiche dans le navigateur.

Sortie :

sortie ng-view

sortie ng-view

Erreurs courantes liรฉes ร  ng-view et comment les corriger

Presque tous les รฉchecs liรฉs ร  ng-view proviennent du cรขblage du module, du format d'adresse ou de la maniรจre dont la page est servie, plutรดt que de la directive elle-mรชme.

  • La zone d'affichage reste vide : le ngRoute Le module n'a pas รฉtรฉ rรฉpertoriรฉ comme dรฉpendance, ou angular-route.js n'a pas รฉtรฉ chargรฉ. Les deux sont requis, et le script doit รชtre exรฉcutรฉ aprรจs angular.min.js.
  • Les liens modifient l'adresse mais rien ne s'affiche : L'attribut href ne correspond pas ร  la route. ร€ partir d'AngularJS 1.6, l'adresse doit รชtre dรฉfinie. #!/Route; ancien code รฉcrit pour la version 1.5 utilisรฉ #/Route.
  • Les modรจles ne peuvent pas รชtre chargรฉs en raison d'une erreur CORS : La page a รฉtรฉ ouverte directement depuis le disque. Servez-la via HTTP, car templateUrl est rรฉcupรฉrรฉ par une requรชte AJAX, le protocole de fichier est bloquรฉ.
  • Seule la derniรจre vue apparaรฎt : Plusieurs รฉlรฉments peuvent contenir l'attribut ng-view. AngularJS ne prend en charge qu'une seule zone d'affichage par page.
  • Rien ne s'affiche au premier chargement : aucune otherwise La clause est configurรฉe de telle sorte qu'une adresse vide ne correspond ร  aucun itinรฉraire.

FAQ

Non. ngRoute ne prend en charge qu'une seule rรฉgion d'affichage par page. Pour afficher plusieurs rรฉgions nommรฉes simultanรฉment, utilisez la bibliothรจque ui-router, qui fournit ui-view et prend en charge les vues imbriquรฉes et sล“urs.

Activer le mode HTML5 avec $locationProvider.html5Mode(true) et ajoutez une balise de base. Le serveur doit alors rรฉรฉcrire les chemins inconnus vers index.html, sinon un rafraรฎchissement renvoie une erreur 404.

En grande partie. AI Les outils convertissent les tables de routage en tableaux de routes Angular et remplacent ng-view par router-outlet. Les contrรดleurs doivent nรฉanmoins รชtre rรฉรฉcrits manuellement sous forme de composants.

Les assistants IA vรฉrifient rapidement les trois causes les plus frรฉquentes : une dรฉpendance ngRoute manquante, un prรฉfixe de hachage qui ne correspond pas ร  la route et un chemin de modรจle que le navigateur ne peut pas rรฉcupรฉrer.

Oui. Ajoutez un resolve AngularJS bloque la route. Il attend que ces promesses soient rรฉsolues avant d'instancier le contrรดleur, ce qui รฉvite qu'une vue ne reste vide pendant l'arrivรฉe des donnรฉes.

Rรฉsumez cet article avec :