Ce que vous allez créer

Nous avons déjà couvert pas mal de choses dans cette série, y compris la navigation. Cependant, Ionic fournit quelques composants offrant des fonctionnalités supplémentaires pour une navigation plus fonctionnelle. Dans ce didacticiel, nous ajoutons les composants du menu latéral et des onglets à l'application, ainsi que des services supplémentaires pour rendre la navigation de notre application plus intelligente..

Fichiers de projet du tutoriel

Les fichiers de projet du tutoriel sont disponibles sur GitHub. Le principe général de l'application est qu'il affiche certaines informations sur les installations locales. Dans ce tutoriel, nous ajoutons la possibilité d'afficher des bibliothèques, des musées, des parcs et des hôpitaux. Actuellement, il n’affiche que les emplacements à Chicago, ce que nous allons corriger dans le prochain tutoriel..

Vous pouvez télécharger le projet terminé pour ce tutoriel à partir de GitHub à l’adresse. Si vous clonez le projet, vous pouvez également coder en utilisant Git et en exécutant git checkout -b start. Le dernier exemple est également disponible pour prévisualisation.

Notez que j'ai supprimé la résolution de la vue de l'espace que nous avions dans la troisième partie de cette série. Je ne veux pas en parler en profondeur, mais le contrôleur charge les données maintenant et simplifie la navigation..

1. Ajouter un menu latéral

L'un des modèles de navigation les plus courants dans les applications mobiles est le menu latéral. Il s’agit d’un tiroir qui se glisse latéralement et expose les liens de navigation et peut-être d’autres contenus, tels que le statut de connexion actuel. De par leur conception, ils sont hors écran et sont ouverts par une sorte de bouton, souvent l'icône hamburger, même si les gens ne sont pas d'accord sur l'utilisation de cette icône..

Les menus latéraux peuvent souvent être ouverts en glissant sur le côté pour l'ouvrir ou en glissant vers l'arrière pour le fermer. Cela peut être pratique, mais cela peut parfois gêner d'autres gestes et vous devriez garder un œil sur les comportements conflictuels. Vous devez envisager la meilleure utilisation du balayage en gardant à l'esprit la vision et l'expérience de votre application. S'il y a un problème, vous pouvez le désactiver..

Ionic fournit quelques composants qui facilitent la configuration d'un menu latéral. Vous pouvez créer jusqu'à deux menus latéraux, l'un à droite et l'autre à gauche. Un menu latéral comprend plusieurs composants, ionSideMenus, ionSideMenu, et ionSideMenuContent.

Pour voir cela en action, mettons à jour www / index.html et mettre en place un menu latéral. Vous allez remplacer le contenu existant par le code ci-dessous, qui ajoute les composants du menu latéral autour de notre code existant..

    
Civinfo
    Des endroits Réglages           Retour      

Pour activer un menu latéral, nous commençons par envelopper le contenu de notre application dans ionSideMenus. Il permet à Ionic de coordonner le menu latéral et les zones de contenu. Nous avons alors un ionSideMenu avec un side = "left" attribut pour désigner quel côté il occupe.

Dans le menu latéral, nous pouvons mettre le contenu que nous souhaitons. Dans ce cas, et probablement le scénario le plus courant, le contenu est une ionHeaderBar composant et un ionList composant pour rendre le titre de l'application et une liste de liens, respectivement. Nous n'avons pas encore défini la vue des paramètres, ce lien échouera pour le moment. Notez également que le ionItem les composants ont un menu-fermer attribut. Cela ferme automatiquement le menu latéral quand un utilisateur clique sur le lien, sinon il reste ouvert.

le ionSideMenuContent composant est utilisé pour contenir la zone de contenu principale. Cette zone de contenu occupe tout l'écran, mais ce composant aide simplement le composant de menu latéral à s'afficher correctement. Nous avons également utilisé le drag-content = "false" attribut pour désactiver les gestes de glissement car ils vont interférer avec la liste de défilement et les onglets.

Nous avons également ajouté un nouveau bouton à la barre de navigation en utilisant boutons ionNav. C'est l'icône de menu latéral qui apparaît en haut à droite sous forme de trois lignes empilées. Ce bouton a le menu-toggle = "left" attribut, qui déclenche le basculement du menu de gauche dans le menu de gauche.

Maintenant que notre menu latéral est en place, travaillons à la configuration du prochain composant de navigation principal en ajoutant des onglets pour la vue des paramètres..

2. Onglets avec historique de navigation individuel

Les onglets sont un autre modèle de navigation courant pour naviguer dans une application. Les onglets sont faciles à comprendre car nous les voyons dans de nombreux types d'interfaces, pas seulement les applications mobiles..

Les onglets peuvent être avec état ou sans état. Un onglet qui affiche un contenu qui ne conserve pas la mémoire des modifications est sans état, tandis qu'un onglet qui conserve un état basé sur l'interaction de l'utilisateur est avec état (par exemple, la persistance d'un résultat de recherche). Nous examinons comment construire des onglets stateful avec Ionic car ils sont plus complexes et plus puissants..

La configuration des onglets est assez facile avec le ionTabs et ionTab Composants. Tout comme les menus latéraux, vous insérez autant de composants d'onglets que vous le souhaitez. Il n'y a pas de limite stricte, mais je trouve que cinq est un maximum sain. Sur de plus petits appareils, trop d'icônes rendent difficile la sélection d'un onglet.

Nous allons configurer les onglets en créant deux nouveaux fichiers. Premièrement, configurons le modèle en créant un nouveau fichier à www / views / settings / settings.html. Ajoutez le code suivant au nouveau fichier.

le ionTabs composant est utilisé pour envelopper l'intérieur ionTab Composants. Plusieurs classes peuvent définir l'apparence des onglets, telles que les placer en haut ou en bas, utiliser des icônes avec ou sans titre, etc. Ici, nous avons décidé d’utiliser des onglets avec un titre avec l’icône en haut avec le préréglage de couleur stable.

le ionTab Le composant a un certain nombre d'attributs qui peuvent être utilisés pour définir son comportement. Il prend en charge de nombreuses fonctionnalités, telles que l'affichage d'un petit badge de notification, la liaison des onglets aux états, le comportement des icônes, etc. Pour nos onglets, chacun a un Titre, une classe d'icônes pour quand l'onglet est actif (icône sur) ou inactif (icône désactivée), et des liens vers un état en utilisant ui-sref.

Dans chaque onglet est un autre ionNavView. Cela peut sembler hors de propos puisque nous avons déjà un ionNavView Mis en place dans index.html. Ce que nous faisons consiste à déclarer des emplacements supplémentaires permettant de restituer un état, ce qui peut être considéré comme une vue enfant..

Chaque onglet peut avoir son propre historique de navigation, car chaque ionNavView est indépendant des autres. Chaque onglet a également un nom unique, ce qui sera très utile pour définir certains états dans le nom ionNavView.

Vous avez peut-être remarqué qu'il n'y a pas ionView élément sur cette page et qu’il est important de noter lors de l’utilisation d’onglets avec état. Ce n'est pas nécessaire quand vous utilisez ionTabs de cette manière, vous n’en aurez besoin que si vous utilisez les onglets sans état, la version du composant CSS.

nous devons maintenant configurer quelques états supplémentaires pour rendre l'exemple fonctionnel. Créez un autre fichier à www / views / settings / settings.js et ajoutez le code suivant.

angular.module ('App') .config (function ($ stateProvider, $ urlRouterProvider) $ stateProvider.state ('settings', url: '/ settings', abstract: true, templateUrl: 'vues / settings / settings. html ') .state (' settings.about ', url:' / about ', vues: about: templateUrl:' views / settings / tab.about.html ')) .state (' settings. license ', url:' / license ', vues: à propos de: templateUrl:' views / settings / tab.license.html ') .state (' settings.preferences ', url:' / preferences ' , views: preferences: controller: 'PreferencesController', controllerAs: 'vm', templateUrl: 'views / settings / tab.preferences.html'); $ urlRouterProvider.when ('/ settings', '/ settings / preferences ');) .controller (' PreferencesController ', fonction (Types) var vm = this; vm.types = Types;);

Vous pouvez voir que nous établissons plusieurs nouveaux états, mais ceux-ci semblent différents des autres états que nous avons définis jusqu'à présent. Le premier état est un état abstrait, qui est essentiellement un état qui ne peut pas être chargé directement et qui a des enfants. Cela a du sens pour nous avec l’interface des onglets car le réglages state charge le modèle de composants d'onglets, mais les utilisateurs ne se limitent jamais au composant d'onglets. Ils consultent toujours l'onglet actif, qui contient un autre état. Donc, utiliser abstract nous donne cette possibilité de les câbler correctement.

Les trois autres états sont définis comme paramètres. [nom]. Cela nous permet de définir une relation parent-enfant entre ces états, qui reflète essentiellement la relation parent-enfant du ionTabs et ionTab Composants. Ces états utilisent la propriété view, qui est un objet avec une propriété nommée par la vue à utiliser..

Le nom que vous donnez dans votre modèle avec ionNavView doit correspondre au nom de la propriété. La valeur de cette propriété est alors la même définition d'état, sans le url cela a été déclaré de la manière habituelle. le url suit également la relation parent-enfant en combinant les deux. Donc, tous ces états enfant rendent comme / paramètres / préférences.

Vous devez ajouter paramètres.js à index.html en utilisant une autre balise de script. Une fois que vous avez fait cela, vous verrez des erreurs car nous référençons un certain nombre de fichiers que nous n'avons pas encore créés. Finissons avec nos modèles d'onglets.

Nous devons en créer trois. Les deux premiers ont un contenu statique, je ne vais donc pas les détailler. Créer un fichier à www / views / settings / tab.about.html et y ajouter le contenu suivant.

  
  
Projet sur GitHub
 
Cliquez pour voir le projet
  
 
Licence
 
Voir la licence complète
 
 
  

Cela contient un modèle qui affiche des informations. Il est lié au projet GitHub et à la licence. Voici à quoi ça ressemble.

Créez un autre fichier à www / views / settings / tab.license.html et y ajouter le contenu suivant.

  
 
 La licence MIT (MIT) 
 
 
Droits d'auteur (c) 2016 Jeremy Wilken
 
Par la présente, une autorisation est accordée gratuitement à toute personne obtenant une copie de ce logiciel et des fichiers de documentation associés (le "Logiciel"), afin de traiter le logiciel sans restriction, y compris, sans limitation, les droits d'utilisation, de copie, de modification et de fusion. , publiez, distribuez, concédez en sous-licence et / ou vendez des copies du logiciel, et autorisez les personnes à qui le logiciel est fourni à le faire, sous réserve des conditions suivantes:
 
L'avis de copyright ci-dessus et cet avis de permission doivent être inclus dans toutes les copies ou parties substantielles du logiciel..
 
LE LOGICIEL EST FOURNI "EN L'ETAT", SANS AUCUNE GARANTIE, EXPRESSE OU IMPLICITE, Y COMPRIS DE MANIÈRE NON LIMITÉE À LA GARANTIE DE QUALITÉ MARCHANDE, D'ADÉQUATION À UN USAGE PARTICULIER ET D'INFRACTION. EN AUCUN CAS, LES AUTEURS OU LES TITULAIRES DU COPYRIGHT NE PEUVENT ÊTRE TENUS RESPONSABLES DE TOUTE RÉCLAMATION, DE DOMMAGES OU D'AUTRE RESPONSABILITÉ, QU'IL SOIT DANS UN ACTION DE CONTRAT, DE LORT OU DE AUTRE FACILITÉ QUI SOIT LIÉ AU LOGICIEL OU À L'UTILISATION OU AUTRE LOGICIEL.
 
 
  

Cela contient le contenu de la licence (MIT) pour ce code. Il existe une simple carte pour contenir le contenu. Voici à quoi ça ressemble.

Le modèle final contient des éléments de formulaire. Je vais y revenir un peu plus en détail. Créer un nouveau fichier à www / views / settings / tab.preferences.html et y ajouter le contenu suivant.

  
 
 Types de lieux 
 
 type.type   
 
 
  
 
  

Cette vue contient une liste de commutateurs indiquant les quatre types d’endroits que l’application peut afficher: musée, parc, bibliothèque et hôpital. Chacun de ces éléments de liste vous permet d'activer ou de désactiver un type de lieu de la liste. Le bouton bascule est un composant CSS. Nous devons simplement utiliser une entrée de case à cocher avec ce balisage spécifique et cette structure de classe CSS pour les afficher en tant que boutons bascule mobile..

Cette vue a un contrôleur déclaré dans paramètres.js, mais il injecte un Les types service que nous n'avons pas encore créé. Nous allons résoudre ce problème en ajoutant un nouveau service à www / js / app.js.

.factory ('Types', function () return [type: 'Park', activé: true, type: 'Hospital', activé: true, type: 'Bibliothèque', activé: true, type : 'Museum', enabled: true];)

Ce service contient un tableau de types de lieu. Il possède une propriété pour le nom de chaque type de lieu et pour déterminer s'il est activé ou non. Nous utilisons la propriété enabled dans le bouton bascule ngModel pour suivre l'état si ce type doit être affiché.

À ce stade, vous pouvez ouvrir le menu latéral et accéder au lien des paramètres. Vous pouvez voir les deux onglets, les préférences et à propos de. Dans l'onglet Préférences, vous pouvez activer ou désactiver les types de lieu..

Si vous accédez à l'onglet À propos de, vous pouvez sélectionner la licence pour voir comment elle navigue vers un autre itinéraire dans l'onglet. Si vous basculez entre les préférences et l'onglet À propos après la visualisation de la licence, vous pouvez voir que l'onglet se souvient que vous étiez dans l'état de la licence même après votre départ, démontrant ainsi le caractère dynamique de ces onglets..

La dernière étape de ce didacticiel consiste à mettre à jour la vue des lieux pour utiliser le Les types service pour charger uniquement les types d'emplacements souhaités et utiliser le service d'historique pour gérer quand recharger ou utiliser le cache.

3. Mise en cache et utilisation du service d'historique

Par défaut, Ionic met en cache les 10 dernières vues et les garde en mémoire. De nombreuses applications peuvent même ne pas avoir autant d'états, ce qui signifie que l'intégralité de votre application peut rester en mémoire. Ceci est utile car cela signifie qu'Ionic n'a pas à redonner la vue avant de naviguer, ce qui accélère l'application..

Cela peut entraîner des problèmes de comportement car vous pourriez penser que vos états rechargent et réinitialisent toujours le contrôleur chaque fois que l'utilisateur accède à l'état. Étant donné que seules 10 vues sont mises en cache, si vous en avez 20, seules les 10 dernières seront dans le cache. Cela signifie que vous ne pouvez pas garantir qu'une vue est dans le cache ou non. Vous devez donc éviter d'effectuer la logique de configuration dans vos contrôleurs en dehors des étapes de cycle de vie. Vous pouvez également configurer des stratégies de mise en cache à l'aide du $ ionicConfigProvider.

Parfois, vous devez consulter l'historique de navigation de l'utilisateur pour savoir quoi faire. Par exemple, dans cette application, nous souhaitons conserver la liste des lieux mis en cache si l'utilisateur appuie sur un lieu, puis revient à la liste. Si nous actualisions automatiquement la liste à chaque visite, les utilisateurs risquent de perdre leur place dans la liste après avoir fait défiler et affiché un lieu..

Par ailleurs, si un utilisateur accède à la page des paramètres, puis à la liste des lieux, nous souhaitons actualiser la liste car ils peuvent avoir modifié les types d’emplacement qu’ils souhaitent afficher..

Nous allons utiliser une combinaison des événements du cycle de vie que nous avons examinés auparavant avec le $ ionicHistory service pour ajouter une logique qui vous aidera à déterminer quand l’état des lieux doit recharger la liste. Nous voulons aussi utiliser le Les types service pour nous aider à charger uniquement les types de lieux que l'utilisateur souhaite voir.

Ouvrir www / views / places / places.js et le mettre à jour pour correspondre au code suivant. Nous devons changer la façon dont les données sont chargées et utiliser le $ ionicHistory service pour inspecter l'historique afin de déterminer quand recharger.

angular.module ('App') .config (function ($ stateProvider) $ stateProvider.state ('places', url: '/ places', contrôleur: 'PlacesController as vm', templateUrl: 'vues / places / places .html ');) .controller (' PlacesController ', fonction ($ http, $ scope, $ ionicLoading, $ ionicHistory, Géolocalisation, Types) var vm = this; var base =' https: // civinfo-apis .herokuapp.com / civic / places? location = '+ Geolocation.geometry.location.lat +', '+ Geolocation.geometry.location.lng; var token = "; vm.canLoad = true; vm.places = [] ; vm.load = function load () $ ionicLoading.show (); var url = base; var requête = []; angular.forEach (Types, fonction (type) if (type.enabled === true)  query.push (type.type.toLowerCase ());); url + = '' query = '+ query.join (' | '); if (jeton) url + =' & jeton = '+ jeton; $ http.get (url) .then (function handleResponse (response) vm.places = vm.places.concat (response.data.results); token = response.data.next_page_token; if (! response.data.next_page_token) vm.canLoad = false; $ scope. $ broadcast ('scroll.infiniteScrollComplete'); $ ionicLoading.hide (); ); ; $ scope. $ on ('$ ionicView.beforeEnter', function () var précédent = $ ionicHistory.forwardView (); if (! previous || previous.stateName! = 'place') token = "; vm.canLoad = false; vm.places = []; vm.load ();););

Premièrement, nous avons modifié la façon dont l'URL est construite pour que notre API passe de charger uniquement les parcs au chargement des types demandés. Si vous comparez cela à la version précédente, il utilise principalement angular.forEach faire une boucle sur chaque type et l'ajouter à l'URL.

Nous avons également modifié la façon dont le $ ionicLoading le service se comporte. Au lieu de fonctionner immédiatement lorsque le contrôleur fonctionne initialement, nous le déclenchons à tout moment, le vm.load () méthode est appelée. Ceci est important car le contrôleur sera mis en cache et ne rechargera pas les données par défaut.

Le plus gros changement est le $ ionicView.beforeEnter gestionnaire d'événement de cycle de vie. Cet événement se déclenche avant que la vue devienne la prochaine vue active et nous permette une configuration. Nous utilisons le $ ionicHistory.forwardView () méthode pour obtenir des informations sur le dernier affichage de l'utilisateur.

S'il s'agit du premier chargement, il sera vide, sinon il renvoie des données sur le dernier état. Nous vérifions ensuite si l'état précédent était l'état de l'espace et, si tel est le cas, nous utilisons la liste des résultats mis en cache. De plus, comme nous avons moins de 10 états, nous savons que cet état sera toujours conservé en mémoire..

Sinon, les valeurs mises en cache seront réinitialisées et un nouveau chargement de données sera déclenché. Cela signifie que chaque fois que je retourne à la vue des lieux après avoir accédé aux paramètres, les données seront rechargées. En fonction de la conception de votre application, vous souhaiterez probablement concevoir différentes règles conditionnelles expliquant comment gérer la mise en cache et le rechargement..

Le service d'historique fournit plus d'informations, telles que l'intégralité de la pile d'historique, la possibilité de modifier l'historique, des détails sur l'état actuel, etc. Vous pouvez utiliser ce service pour affiner l'expérience en naviguant dans l'application..

Nous allons faire deux autres petits ajustements à notre modèle d'endroits. Ouvrir www / views / places / places.html et changez le titre en Lieux locaux.

Ensuite, mettez à jour le composant de défilement infini avec un attribut supplémentaire, vérification immédiate, pour empêcher le composant de défilement infini de charger des données en même temps que le chargement initial. Cela permet essentiellement d'éviter les demandes en double pour plus de données.

À ce stade, nous avons mis au point une application assez solide dotée d'un ensemble de fonctionnalités plutôt agréable. Nous terminerons cette série par un dernier tutoriel sur Cordova et son intégration à certaines fonctionnalités de l'appareil, telles que l'accès aux données GPS..

Conclusion

La navigation avec Ionic commence toujours par la déclaration de certains états. Exposer cette navigation peut se faire de différentes manières, comme nous l’avons vu dans ce tutoriel. Voici ce que nous avons couvert dans ce tutoriel:

• Les composants du menu latéral permettent de créer facilement un ou deux menus latéraux pouvant être activés à la demande ou par balayage..
• Les onglets peuvent être sans état ou avec état. Les onglets avec état peuvent avoir des vues individuelles avec des historiques de navigation distincts.
• Les onglets ont de nombreuses options de configuration pour l’affichage des icônes et du texte..
• Un bouton bascule est un composant CSS qui fonctionne comme une case à cocher, mais il est conçu pour les appareils mobiles..
• Vous pouvez utiliser le $ ionicHistory service pour en savoir plus sur l'historique de navigation de l'application pour personnaliser l'expérience.