Share
Ce que vous allez créerDans la première et la deuxième partie de cette série sur Ionic, nous avons mis en place un développement local et quelques vues pour charger une liste de parcs à l'aide de certains composants Ionic, tels que la navigation de base et les composants de liste. Dans ce didacticiel, nous allons expliquer comment Ionic fournit un certain nombre de services vous permettant de gérer par programme l’application et l’interface..
Auparavant, nous avions montré comment Ionic fournissait des fonctionnalités interactives à l'aide de composants utilisés comme éléments HTML (implémentés sous forme de directives angulaires). Cependant, certains éléments d'interface n'ont pas de sens en tant que composants instanciés avec HTML, tels qu'un chargeur ou des superpositions de feuille d'action.
Commençons par examiner le rôle joué par les services dans votre application. J'ai identifié trois types principaux de services dans Ionic:
Les services de composants permettent l'utilisation de composants, mais au lieu d'utiliser HTML pour les déclarer (comme nous l'avons vu avec ionNavBar) ils sont gérés en JavaScript. En d'autres termes, vous allez exploiter ces composants en ajoutant du code à vos contrôleurs. Nous en utiliserons deux dans l'exemple ci-dessous.
Il peut être utile de considérer ces services comme des composants ayant un cycle de vie. En règle générale, vous souhaitez qu'ils soient chargés à un moment donné et, une fois qu'ils sont terminés, ils sont supprimés. Par exemple, $ ionicModal vous permet de créer un modal. Les modaux ont un cycle de vie, ils sont ouverts et fermés pour des raisons spécifiques. Vous avez peut-être un mode qui demande aux utilisateurs de se connecter ou de fermer le modèle pour le sauter, complétant ainsi le cycle de vie..
Certains composants ont un service de délégation associé qui peut modifier ou gérer le composant. Vous souhaiterez peut-être manipuler par programmation un composant après sa création et ces services sont conçus pour rendre cela possible. Ils sont nommés car ils délèguent le comportement au composant.
le ionNavBar composant a un service de délégué appelé $ ionicNavBarDelegate. Ce service a plusieurs méthodes, mais un exemple est le Titre() Cette méthode vous permet de mettre à jour le titre de la barre de navigation. La portée des fonctionnalités disponibles pour chaque service délégué varie, mais elles doivent être faciles à repérer dans la documentation par leur nom..
La dernière catégorie regroupe les services fournissant une sorte de fonctionnalité d'assistance ou fournissant des informations. Il n'y en a que quelques-uns et ils ne correspondent pas tout à fait aux deux autres catégories. Quelques exemples sont:
Accentsconagua
$ ionicPlatform: vous aide à interagir avec le matériel de l'appareil$ ionicGesture: permet de gérer les événements de geste$ ionicPosition: vous indique l'emplacement des éléments à l'écranCes services d'assistance ont tendance à vous aider à développer une logique ou à gérer une interaction. Ils ne génèrent ni ne modifient aucun composant par eux-mêmes.
Nous verrons également quelques autres choses dans ce tutoriel:
Dans ce tutoriel, nous allons étendre l'application que nous avons commencée dans le précédent tutoriel. Pour rappel, l'application est conçue pour fournir aux utilisateurs des informations sur leurs installations publiques locales, telles que les bibliothèques et les parcs. L'application affiche déjà une liste de parcs à Chicago et nous allons maintenant ajouter la possibilité d'afficher des indicateurs de chargement, d'afficher des écrans de détail de parc, d'ouvrir un menu d'actions et d'implémenter certaines fonctionnalités de partage de base..
Vous pouvez voir le projet terminé sur GitHub. Le dernier exemple est également disponible pour prévisualisation.
Vous pouvez télécharger les fichiers ou les extraire avec Git. Une fois que vous avez les fichiers sur votre machine, vous devez exécuter npm installer mettre en place le projet. Si vous extrayez le code à l'aide de Git, vous pouvez continuer à coder si vous réinitialisez le référentiel pour qu'il corresponde à l'endroit où la dernière partie s'est terminée en cours d'exécution. git checkout -b start. Une fois que vous avez les fichiers, démarrez votre serveur Ionic en lançant service ionique.
Actuellement, l'application charge les données et il y a un petit indicateur de cercle provenant du composant de défilement infini qui s'affiche jusqu'au chargement. Cependant, nous souhaitons réellement superposer l’application entière afin qu’il soit très clair que l’application est en cours de chargement..
le $ ionicLoading Le service est très utile pour superposer et empêcher l’utilisateur d’interagir avec l’application jusqu’au chargement des données. C'est configurable. Par exemple, vous pouvez déclarer si une icône de chargement ou un texte apparaît, si vous voulez ou non le fond, ou s'il doit automatiquement se cacher après un certain temps. Vous pouvez voir le chargeur en action dans la capture d'écran ci-dessous.
Ouvrir www / views / places.js faire quelques modifications pour utiliser le chargeur. Premièrement, nous devons injecter le service dans notre contrôleur en ajoutant $ ionicLoading aux paramètres de fonction. Le service est assez simple, il n'y a que deux méthodes, spectacle() et cacher(). Nous pouvons rendre le chargeur visible et masqué en appelant les méthodes telles que vous les voyez dans cet extrait..
.controller ('PlacesController', fonction ($ http, $ scope, $ ionicLoading, Géolocalisation) var vm = ceci; var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location.lat + ',' + Geolocation.geometry.location.lng; var token = "; vm.canLoad = true; vm.places = []; $ ionicLoading.show (); vm.load = function load () var url = base; if (jeton) url + = '& jeton =' + jeton; $ http.get (url) .then (fonction handleResponse (réponse) 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. cacher(); ); ; );le $ ionicLoading.show () La méthode est appelée dès que le contrôleur est chargé, ce qui signifie qu'il se déclenche immédiatement. Maintenant, nous devons dire au chargeur de se cacher après le chargement des données, comme vous le voyez juste après $ diffusion.
Vous remarquerez peut-être que le $ ionicLoading.hide () La méthode est appelée chaque fois que les données sont chargées. Ce n'est pas un problème. Puisque le chargeur est déjà caché, cet appel n'a aucun effet..
Nous avons maintenant mis en place un service ionique. Assez simple. Droite? Certaines sont un peu plus complexes et nous allons travailler sur un autre exemple en utilisant la fiche d'action. Avant d’y arriver, cependant, nous souhaitons développer notre application pour avoir deux vues à la fois pour la liste des notes et l’affichage d’une note individuelle..
Notre prochaine étape consiste à créer une nouvelle vue qui affichera plus de détails sur un parc particulier. Les informations peuvent varier d'un parc à l'autre, mais nous nous concentrerons sur l'obtention d'une image, d'un site Web, d'un téléphone et d'une adresse. Les résultats de l'ajout de cette vue sont affichés ici.
Pour créer une nouvelle vue, créez un fichier à www / views / place / place.js et incluez le contenu que vous voyez ci-dessous. C’est la définition du contrôleur et de l’état pour le endroit vue.
angular.module ('App') .config (function ($ stateProvider) $ stateProvider.state ('place', url: '/ places /: place_id', contrôleur: 'PlaceController as vm', templateUrl: 'views / place / place.html ', solution: Place: function ($ http, $ stateParams) var url =' https://civinfo-apis.herokuapp.com/civic/place?place_id= '+ $ stateParams.place_id; return $ http.get (url););) .controller ('PlaceController', fonction ($ scope, Place) var vm = this; vm.place = Place.data.result;);Si vous regardez le config () méthode, vous voyez que nous déclarons un nouvel état. Ceci est le routeur ui en action, vous devriez donc consulter la documentation du routeur ui pour tous les détails sur la déclaration des états.
La définition d'objet montre que nous utilisons une URL de / places /: place_id. Lorsque vous voyez une partie de l'URL avec deux points devant, telle que : place_id, il marque cette partie du chemin en tant que paramètre d'état. L’État est en mesure d’obtenir la valeur et de vous la fournir à l’aide du $ stateParams objet. Par exemple, / places / 12345 aboutirait à $ stateParams.place_id = '12345'.
Vous avez déjà vu les autres parties de la définition, à l'exception du résoudre propriété. C'est une fonctionnalité qui vous permet de demander que différentes fonctions soient appelées avant la création de l'état. Il accepte un objet de valeurs de clé et de fonction, nous avons donc ici Endroit comme la clé et le résultat de la fonction lui seront attribués.
Dans la fonction, il peut accepter des paramètres à injecter, similaires à ce que vous pouvez faire avec un contrôleur. Ici le $ http et $ stateParams les services sont injectés. La fonction utilise ensuite la valeur de la place_id passé via l'URL et construit et retourne une requête HTTP. C’est essentiellement ce qui est fait dans la vue des lieux, sauf que le contrôleur le fait.
La fonctionnalité de résolution est suffisamment intelligente pour déterminer que si vous retournez une promesse, il attendra que cette promesse soit résolue avant de créer l'état. En d'autres termes, $ http.get () retourne une promesse de charger les données et ui-router attend que les données soient disponibles avant de créer l'état et de passer le Endroit au contrôleur. La fonctionnalité de résolution est très utile pour le préchargement de données dans vos applications. Il s'agit d'un exemple assez basique de la façon de l'exploiter..
Maintenant que nous avons l'état défini, le contrôleur est déclaré et assigne les données résultantes de Endroit (c'est ce qui a été résolu dans l'état) à vm.place. Nous devons également créer notre modèle pour cet état. Créez donc un nouveau fichier à www / views / place / place.html et y ajouter le contenu suivant.
![]()
Ce modèle commence par utiliser le ionView pour envelopper le contenu, afin que le système de navigation ionique puisse en assurer le suivi correctement. Il attribue également un titre basé sur le nom du lieu. le ionContenu le wrapper contient le contenu principal et vous remarquerez que le modèle utilise des classes CSS au lieu d'éléments pour créer un composant de carte.
Dans la partie précédente, nous avons expliqué comment certains composants ne sont que des classes CSS. La carte en est un exemple. Conceptuellement, c'est comme une liste. Le contenu interne s'empile verticalement comme une liste, mais le style apparaît plus comme une carte. Ceci exploite les styles de carte, qui incluent des fonctionnalités telles que le support des images, des icônes et d’autres présentations soignées présentées dans la documentation..
Il y a un peu ngIf directives utilisées, car rien ne garantit que les données renvoyées auront un numéro de téléphone ou un site Web. le ngIf directive assurez-vous qu'aucune valeur vide n'est affichée. Il utilise aussi ngHref ou ngSrc construire correctement des liens.
Vous remarquerez également l'utilisation de la tel: // protocole qui, lorsqu'il est utilisé sur un téléphone, doit inviter l'utilisateur à appeler le numéro lorsqu'il le sélectionne. C'est une fonctionnalité pratique, facile à utiliser et qui s'intègre parfaitement sur un périphérique physique. Certains programmes de votre ordinateur, tels que Skype, peuvent également essayer de gérer un appel téléphonique pour vous, en fonction de vos paramètres..
Cela devrait nous donner une vue de travail, mais comment pouvons-nous y accéder? Nous aurons besoin de faire quelques petites modifications pour que la navigation fonctionne à partir de la vue des lieux..
Le routeur ui fournit un ui-sref directive utilisée pour lier des éléments à un autre état. Dans ce cas, nous voulons que chaque élément de la liste des vues d’emplacement soit lié à la vue d’emplacement correspondante..
Ouvrir www / views / places / places.html et ajoutez la directive pour relier chaque lieu. Mettre à jour le ionItem avec le nouvel attribut ici.
le ui-sref directive a un format où vous pouvez créer un lien vers un autre état par son nom, et non par une URL comme vous le feriez avec href. C'est pratique puisque les URL peuvent changer. Il peut également accepter les paramètres à utiliser pour construire l’URL et, dans notre cas, nous souhaitons passer le place.place_id propriété. le ui-sref prend les propriétés comme un objet, donc nom-d'état (param: valeur) est la syntaxe.
Maintenant, prévisualisez l'application et sélectionnez un parc, il va naviguer vers le nouveau endroit voir et vous pouvez regarder la barre d'adresse pour voir l'URL ajoute un place_id valeur. Cependant, nous avons maintenant un problème. Comment pouvons-nous revenir à la liste?
Nous utilisons le ionNavBackButton fonctionnalité pour nous donner un bouton de retour automatique. Ouvrir www / index.html et ajoutez l'extrait suivant à l'intérieur du ionNavBar. Cela ajoute un bouton de retour qui ne sera affiché que s’il ya un endroit où retourner.
Retour
La navigation d'Ionic est suffisamment intelligente pour garder une trace de l'historique lorsque vous utilisez l'application. Si vous devez revenir à une vue précédente, le bouton Précédent apparaît. Sinon, il sera simplement caché.
Nous voulons également déclarer que la vue des lieux ne doit jamais afficher le bouton Précédent, ce que nous pouvons faire en ajoutant le hideBackButton directive en www / views / places / places.html.
Lors du développement et de la prévisualisation dans le navigateur, l'historique est parfois réinitialisé. Par exemple, lorsque vous êtes sur la vue de l'espace et que vous enregistrez une modification dans votre éditeur, le navigateur se recharge automatiquement et réinitialise l'historique. Dans ce cas, le bouton Précédent n'apparaît pas comme prévu. Vous pouvez résoudre ce problème en revenant à la liste et en l'actualisant pour rétablir l'historique..
Nous avons bien progressé, mais pour le moment, lorsque vous appuyez sur un élément de la liste, il attend la transition vers la nouvelle vue jusqu'à ce que l'appel de l'API retourne avec les données. Cela peut sembler rapide pour vous, mais parfois, cela peut être lent si l'API est lente. Cela pourrait amener quelqu'un à penser que l'application est bloquée, lente ou qu'elle n'a pas enregistré son robinet, car elle n'a pas immédiatement commencé à réagir au robinet. Nous traitons cela avec certains événements de cycle de vie qui nous aident à configurer un chargeur à afficher pendant ce temps..
Pour offrir une meilleure expérience utilisateur, nous allons utiliser le $ ionicLoading service de superposition de l'application pendant le chargement des données pour la vue de l'espace. Afin de savoir quand afficher et masquer le chargeur, nous utilisons les événements de cycle de vie.
Ces événements sont déclenchés en fonction des événements de navigation, tels qu'avant / après l'entrée dans une vue ou avant / après avoir quitté une vue. Vous pouvez faire tout ce qui est nécessaire à ces moments-là, comme réinitialiser certaines données ou éventuellement les utiliser pour soumettre des informations d'utilisation..
Pour le démontrer, ajoutons un écouteur d'événement à la vue des espaces qui gère le déclenchement du chargeur lorsque vous commencez à naviguer vers la vue des espaces. Ouvrir www / views / places / places.js et ajoutez ce qui suit au contrôleur. Vous devez également vous assurer que $ scope est déclaré dans les paramètres de la fonction de contrôleur afin qu'il soit disponible.
$ scope. $ on ('$ ionicView.beforeLeave', fonction () $ ionicLoading.show (););Ceci est un écouteur d'événements de portée qui écoute le $ ionicView.beforeLeave événement (voir Événements de portée angulaire). Ionic diffuse cet événement sur votre contrôleur et appelle la fonction anonyme déclarée ici. Cette fonction appelle simplement le $ ionicLoading.show () méthode pour allumer le chargeur.
Cela déclenche l'apparition du chargeur dès que l'utilisateur appuie sur un élément. Nous ajoutons maintenant un extrait similaire à la vue d’emplacement, qui permet de masquer le chargeur lorsque le chargement de la vue est terminé. Ouvrir www / views / place / place.js et ajoutez ce qui suit au contrôleur. Vous devez ajouter les deux $ ionicLoading et $ scope aux paramètres de fonction du contrôleur car ils ne sont pas injectés actuellement.
$ scope. $ on ('$ ionicView.afterEnter', function () $ ionicLoading.hide (););Ceci écoute un événement de portée différent qui se déclenche lorsque la vue est terminée et appelle la fonction pour masquer le chargeur. Le chargeur est affiché entre l'instant où l'utilisateur appuie sur un endroit à afficher jusqu'à ce que la vue soit complètement chargée. Vous pouvez essayer d’autres événements et voir quand ils se déclenchent.
La dernière chose que nous faisons dans ce tutoriel est de configurer un bouton de partage de feuille d’action qui vous permet de publier sur Twitter, Facebook ou par courrier électronique et de partager les informations sur le parc..
Les feuilles d'action sont très utiles pour fournir une liste d'options supplémentaires. L'intention est généralement destinée aux situations où vous souhaitez présenter une liste d'actions groupées et, dans notre exemple, à une liste de moyens de partager les informations de parc. La feuille d'action que nous allons construire ressemble à ceci.
Le service de feuille d'action est un peu plus complexe que le service de chargement, car il gère la configuration et les entrées utilisateur. Ouvrir www / views / place / place.js et ajoutez cette nouvelle méthode à votre contrôleur. Vous devez également vous assurer que $ ionicActionSheet est injecté dans votre contrôleur.
vm.openSheet = function () var sheet = $ ionicActionSheet.show (titleText: 'Partager cet endroit', boutons: [texte: 'Partager via Twitter', texte: 'Partager via Facebook', texte : 'Share via Email'], cancelText: 'Cancel', buttonClicked: function (index) if (index === 0) window.open ('https://twitter.com/intent/tweet?text= '+ encodeURIComponent (' J'ai trouvé ce super endroit! '+ vm.place.url)); if (index === 1) window.open (' https://www.facebook.com/sharer/sharer .php? u = '+ vm.place.url); else if (index === 2) window.open (' mailto:? subject = '+ encodeURIComponent (' J'ai trouvé ce super endroit! ') +' & body = '+ vm.place.url); sheet ();); ;le openSheet () La méthode est responsable de la création de la feuille d’action. Il le fait en appelant $ ionicActionSheet.show (), qui retourne une fonction qui est stockée sur drap. Cela vous permet de fermer la feuille lorsque vous avez fini avec elle en appelant drap(). le spectacle() méthode prend un objet avec un certain nombre de propriétés que nous allons décomposer. Il existe plusieurs exemples de services ioniques qui suivent ce modèle, tels que les modaux et les popovers, afin que vous puissiez toujours gérer leur fermeture..
La feuille gère le titre en utilisant le titreTexte Cette propriété est généralement utilisée pour indiquer à l'utilisateur comment utiliser les boutons. le cancelText Cette propriété accepte une chaîne utilisée pour activer un bouton d'annulation. Si vous ne le déclarez pas, aucun bouton d'annulation ne sera sélectionné. Vous pouvez également annuler en tapant sur la toile de fond en dehors des boutons..
Pour déclarer les boutons, utilisez le boutons propriété, qui est un tableau d'objets qui ont un texte propriété. Ils sont affichés dans l'ordre dans lequel ils ont été déclarés, alors classez-les en conséquence.
le bouton cliqué La propriété prend une fonction et passe l'index du bouton qui a été sélectionné (comme il a été déclaré dans boutons). Par conséquent, vous pouvez déterminer quoi faire en fonction de l'index transmis. Dans cette fonction, l’index est vérifié et ouvre Facebook, Twitter ou utilise mailto: pour déclencher le client de messagerie.
Selon les paramètres de l'utilisateur et peut-être même le périphérique, ces liens peuvent être ouverts dans les applications Facebook, Twitter ou de messagerie, mais au moins, ils seront ouverts à l'extérieur de votre application (dans un navigateur externe). La dernière pièce est d'appeler le drap() méthode, qui ferme la feuille d'action.
La feuille d'actions est maintenant prête pour l'action, mais il reste à ajouter un bouton pour déclencher la feuille. Pour ce faire, nous ajoutons un bouton de barre de navigation à la vue du lieu qui appelle vm.openSheet (). Ouvrir www / views / place / place.html et ajoutez le boutons ionNav extrait entre le ionView et ionContenu.
Voici encore une autre fonctionnalité de navigation ionique utile qui vous permet d’ajouter un bouton de barre de navigation à une vue particulière en utilisant boutons ionNav. Tous les boutons à l'intérieur sont ajoutés à la barre de navigation et vous pouvez configurer leur côté..
À ce stade, tout fonctionne. Les utilisateurs peuvent ouvrir la fiche d’action pour partager le parc avec leurs amis..
Dans ce tutoriel, nous avons abordé les services ioniques et leur utilisation. En cours de route, nous avons découvert plusieurs autres fonctionnalités ioniques:
$ ionicLoading service est utile pour afficher et masquer un indicateur de chargement pendant que votre application charge des données ou doit sinon bloquer l'interface utilisateur.$ ionicActionSheet le service présente à l'utilisateur une liste de boutons superposant l'application pour faciliter l'accès aux actions importantes.ionNavBackButton pour afficher automatiquement un bouton de retour lorsqu'il est possible de revenir en arrière. boutons ionNav vous permet d'ajouter des boutons de barre de navigation à des vues spécifiques.Dans le prochain épisode, nous approfondirons certaines des fonctionnalités de navigation d'Ionic..
Si vous êtes déjà à l'aise avec le cadre Ionic, vous pouvez envisager de participer au concours Most Wanted d'Envato pour les modèles Ionic. Comment? Créez un modèle Ionic unique et envoyez-le au marché Envato d'ici le 27 avril 2016..
Les cinq meilleurs modèles reçoivent 1000 $. Intéressé? Pour en savoir plus sur les exigences et les directives du concours, consultez le site Web du concours..
