De nos jours, tout le monde aurait entendu parler des "Applications à une seule page". De nombreux sites Web bien connus tels que Gmail utilisent le concept d'applications à page unique (SPA).
SPA est le concept dans lequel lorsqu'un utilisateur demande une page différente, l'application ne naviguera pas vers cette page mais affichera plutôt 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 Views en conjonction avec Routes.
Dans ce didacticiel, vous apprendrez-
- Qu'est-ce qu'une vue?
- Directive ng-view dans AngularJS
- Exemple ng-view
Qu'est-ce qu'une vue?
Une vue est le contenu qui est montré à l'utilisateur. Fondamentalement, ce que l'utilisateur veut voir, en conséquence, cette vue de l'application sera montrée à l'utilisateur.
La combinaison de vues et d'itinéraires permet de diviser une application en vues logiques et de lier différentes vues aux contrôleurs.
La division de l'application en différentes vues et l'utilisation du 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 ayons une application de commande, dans laquelle un client peut consulter les commandes et en passer de nouvelles.
Le diagramme ci-dessous et les explications suivantes montrent comment faire de cette application une application sur une seule page.
Désormais, au lieu d'avoir deux pages Web différentes, une pour "Afficher les commandes" et une autre pour "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 affiche la vue des commandes de visualisation, en même temps qu'elle ne quitte pas la page. Il rafraîchira simplement la section de la page existante avec les informations de "Afficher les commandes". Il en va de même pour la vue "Nouvelles commandes".
Ainsi, 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 la route actuelle dans le fichier de mise en page principal (index.html).
Chaque fois que l'itinéraire actuel change, la vue incluait des modifications en fonction de la configuration du service $ route sans changer la page elle-même.
Nous couvrirons les 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 allons passer en revue en détail chaque processus dans notre exemple ci-dessous.
Exemple ng-view
Jetons un coup d'œil à un exemple de la façon dont nous pouvons implémenter des vues.
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" s'affiche 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 angular-route comme référence de script.
Ce fichier d'itinéraire est nécessaire pour utiliser les fonctionnalités de plusieurs itinéraires et vues. Ce fichier peut être téléchargé à partir du site Web angularJS.
Étape 2) Dans cette étape,
- Ajoutez des balises href qui représenteront des liens vers «Ajouter un nouvel événement» et «Afficher 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 le verrons dans un chapitre ultérieur. Voyons simplement le code des vues pour le moment.
- Cette section de code signifie que lorsque l'utilisateur clique sur la balise href "NewEvent" qui a été définie dans la balise div plus tôt. Il ira à la page Web add_event.html, et 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 dans la balise div plus tôt. Il ira sur 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 à "ShowDisplayController".
- Cette section de code signifie que la vue par défaut présentée à l'utilisateur est la vue DisplayEvent
Étape 4) Ensuite, ajoutez des contrôleurs pour traiter la logique métier pour les fonctionnalités «DisplayEvent» et «Add New Event».
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.
Event Registration Guru99 Global Event
Étape 5) 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 "Add New Event" et une expression pour afficher le message "This is to Add a new Event".
De même, la page show_event.html aura également une balise d'en-tête pour contenir le texte «Show Event» et aussi une expression de message pour afficher le message «Ceci est pour 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 de message, qui sera injectée depuis chaque contrôleur respectif.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
De la sortie, on peut remarquer 2 choses
- La barre d'adresse reflétera la vue actuelle affichée. Ainsi, étant donné que la vue par défaut est d'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 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 la sortie ci-dessous.
Production:
- La barre d'adresse indiquera maintenant que la vue actuelle est maintenant 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 d'application.
- 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 est pour ajouter un nouvel événement" sont affichés à l'utilisateur.