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.

Ne manquez pas:

É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 :