Dans cette étape, vous apprendrez à créer un modèle de mise en page et à créer une application avec plusieurs vues via la fonction de routage.
Veuillez réinitialiser le répertoire de travail:
Git Checkout -F Étape-7
Notez que maintenant lorsque vous accédez à App / index.html, vous serez redirigé vers App / index.html # / Phones et la même liste de téléphones s'affiche dans le navigateur. Lorsque vous cliquez sur un lien mobile, une liste de détails sur le téléphone mobile s'affiche également.
Les différences les plus importantes entre l'étape 6 et l'étape 7 sont répertoriées ci-dessous. Vous pouvez voir la différence complète dans GitHub.
Modèles multi-visualités, de routage et de mise en page
Nos applications se développent lentement et deviennent plus complexes. Avant l'étape 7, l'application ne fournit à nos utilisateurs qu'une interface simple (une liste de tous les téléphones), et tous les codes de modèle sont situés dans le fichier index.html. L'étape suivante consiste à ajouter une page qui affiche les détails de chaque téléphone dans notre liste.
Pour ajouter la vue Détails, nous pouvons étendre l'index.html pour inclure le code de modèle pour les deux vues en même temps, mais cela nous causera rapidement de grands problèmes. Au lieu de cela, nous devons convertir le modèle index.html en "modèle de mise en page". Il s'agit d'un modèle commun pour que nous appliquons toutes les vues. D'autres "modèles de mise en page locaux" sont ensuite remplis en fonction du "routage" actuel, formant ainsi une vue complète à afficher à l'utilisateur.
L'itinéraire appliqué dans AngularJS est déclaré via $ RouteProvider, qui est le fournisseur du service Route $. Ce service permet une intégration facile des contrôleurs, des modèles de vue et de l'URL du navigateur actuel. En appliquant cette fonctionnalité, nous pouvons implémenter des liens profonds, qui nous permet d'utiliser l'historique du navigateur (backback ou navigation avant) et les signets.
Sur l'injection de dépendance (DI), les injecteurs et les prestataires de services
Comme vous l'avez appris de la précédente, l'injection de dépendance est une caractéristique centrale d'AngularJS, vous devez donc en savoir un peu sur le fonctionnement de ce type.
Lorsque l'application démarre, AngularJS créera un injecteur, qui sera nécessaire par tous les services injectés après notre application. Cet injecteur lui-même ne sait pas ce que font $ http et $ Route. En fait, à moins qu'il ne soit configuré pendant la définition du module, il ne connaît pas du tout l'existence de ces services. La seule responsabilité de l'injecteur est de charger les modules de service spécifiés, d'enregistrer tous les fournisseurs de services définis dans ces modules et d'injecter des dépendances (services) dans une fonction spécifiée en cas de besoin. Ces dépendances sont instanciées par leur fournisseur "paresseux" (chargé si nécessaire).
Un fournisseur est un objet qui fournit (crée) une instance de service et fournit une interface API à l'extérieur. Il peut être utilisé pour contrôler le comportement de création et d'exécution d'un service. Pour le service de route $, $ RouteProvider fournit une interface API au monde extérieur, vous permettant de définir des règles de routage pour votre application via l'interface API.
Le module AngularJS résout les deux problèmes de supprimer l'état global de l'application et de fournir des méthodes pour configurer l'injecteur. Contrairement à AMD ou require.js (deux bibliothèques qui ne sont pas angularjs), le module AngularJS n'essaie pas de résoudre le problème de l'ordre de chargement du script et le chargement de script paresseux. Ces objectifs n'ont rien à voir avec les problèmes dont AngularJ a besoin à résoudre, de sorte que ces modules peuvent coexister pour atteindre leurs objectifs respectifs.
Module d'application
app / js / app.js
angular.module ('phonecat', []). config (['$ RouteProvider', fonction ($ RouteProvider) {$ RouteProvider. When ('/ Phones', {templateUrl: 'partiels / phone-list.html', contrôleur: phoneListctrl}). When ('/ Phones /: PhoneId', {templateUrl: 'Partials / Phone-Detail.html', Contrôleur: 'Partials / Phone-Detail. PhoneDeTailctrl}).Afin de configurer le routage pour notre application, nous devons créer un module pour l'application. Nous appelons ce module phonecat, et en utilisant ConfigAPI, nous demandons que $ RouteProvider soit injecté dans notre fonction de configuration et utilisons $ RouteProvider.Whenapi pour définir nos règles de routage.
Notez que pendant la phase de configuration de l'injecteur, le fournisseur peut également être injecté en même temps, mais une fois l'injecteur créé et que l'instance de service sera démarrée, il ne sera plus récupéré par le monde extérieur.
Nos règles de routage sont définies comme suit
Lorsque le segment de carte URL est / téléphones, la vue de la liste des téléphones mobiles s'affiche. Pour construire cette vue, AngularJS utilise le modèle de téléphone-list.html et le contrôleur phonelistctrl.
Lorsque le segment de la carte URL est / téléphone /: Phoneid, la vue des détails du téléphone s'affiche. Ici: PhoneId est la partie variable de l'URL. Afin de construire une vue détaillée du téléphone, AngularJS utilise le modèle de téléphone-Detail.html et le contrôleur PhoneDeTailCtrl.
Nous réutilisons le contrôleur PhoneListCtrl que nous avons créé auparavant, et en même temps, nous ajoutons un nouveau contrôleur PhoneDeTailCtrl à la vue détaillée du téléphone et la stockons dans le fichier app / js / contrôlers.js.
L'instruction $ Route.Wise ({redirectTo: '/ Phones'}) entraîne le déclenchement de la redirection vers / téléphones lorsque l'adresse du navigateur ne peut correspondre à aucune de nos règles de routage.
Notez que dans la deuxième déclaration de l'itinéraire: l'utilisation du paramètre PhoneID. Le service $ Route utilise la déclaration de routage / téléphones /: PhoneId comme modèle qui correspond à l'URL actuelle. Toutes les variables déclarées avec le: symbole (ici la variable est des téléphones) sera extraite et stockée dans l'objet $ RouteParams.
Pour que notre application guide notre module nouvellement créé, nous devons également spécifier le nom du module sur la valeur de la directive NGApp:
app / index.html
<! doctype html> <html lang = "en" ng-app = "phonecat"> ...
Contrôleur
app / js / contrôlers.js
... fonction phoneDeTailCtrl ($ scope, $ routeParams) {$ scope.phoneid = $ rateparams.phoneid;} // phoneDeTailctrl. $ inject = ['$ scope', '$ RouteParams'];modèle
Le service de route $ est généralement utilisé avec la directive NGView. Le rôle de la directive NGView est de charger le modèle de vue correspondant dans le modèle de mise en page pour l'itinéraire actuel.
app / index.html
<html lang = "en" ng-app = "phonecat"> <éread> ... <script src = "lib / angular / angular.js"> </ script> <script src = "js / app.js"> </ script> <script src = "js / contrôlers.js"> </script> </-head> <body> <div. ng-view> </div> </body> </html>
Notez que nous avons supprimé la majeure partie du code dans le modèle index.html, et nous n'avons placé qu'un conteneur <v>, qui a l'attribut NG-View. Le code que nous avons supprimé est désormais placé dans le modèle de téléphone-list.html:
application / partiels / téléphone-list.html
<div> <div> <div> <! - Contenu de la barre latérale -> Recherche: <entrée ng-model = "Query"> Trier par: <select ng-model = "OrderProp"> <option value = "name"> alphabetics </ option> <option Value = "Age"> nouveau </ option> </lect> </v> <v> <! - Body Content -> <ul> Filtre: Query | OrderBy: OrderProp "> <a href =" # / téléphones / {{téléphone <p> {{phone.snippet}} </p> </li> </ul> </div> </div> </div>Dans le même temps, nous ajoutons un modèle d'espace réservé à la vue Détails du téléphone mobile.
application / partiels / téléphone-detail.html
TBD: vue détaillée pour {{phoneid}}
Notez que notre modèle de mise en page n'a pas ajouté les propriétés du contrôleur PhonelistCtrl ou PhoneDetailctrl!
test
Pour vérifier automatiquement que tout est bien intégré, nous devons rédiger des tests de bout en bout, accéder à différentes URL et vérifier que la vue correcte est rendue.
... it ('devrait rediriger index.html vers index.html # / téléphones', function () {Browser (). NavigateTo ('../../ app / index.html'); attendre (Browser (). Location (). Url ()). Tobe ('/ Phones');}); Browser (). NavigateTo ('../../ app / index.html # / téléphones / nexus-s');});Vous pouvez maintenant actualiser votre navigateur et exécuter à nouveau le test de bout en bout, ou vous pouvez l'exécuter sur le serveur AngularJS.
pratique
Essayez d'ajouter une liaison {{OrderProp}} à index.html et rien ne change lorsque vous êtes sur la vue de la liste de votre téléphone. En effet Si vous ajoutez la même liaison au modèle de téléphone-list.html, la liaison sera rendue comme vous l'imaginiez.
Résumer
Après avoir configuré l'itinéraire et implémenté la vue de la liste des téléphones portables, nous pouvons déjà passer à l'étape 8 pour implémenter la vue Détails du téléphone mobile.
Ce qui précède consiste à régler les informations de routage AngularJS et multi-visualités, et nous continuerons d'ajouter des connaissances pertinentes à l'avenir. Merci pour votre soutien à ce site!