Share
Ce que vous allez créerDans ce tutoriel, nous allons construire notre première application Ionic ensemble et apprendre les bases des composants JavaScript de Ionic. Ces composants fournissent à votre application un accès facile à des fonctionnalités telles que la navigation et les barres de navigation, le défilement infini et les listes. Si vous n'avez pas encore configuré Ionic ou si vous avez besoin d'actualiser l'utilisation de la CLI Ionic, vous pouvez consulter le premier tutoriel de cette série..
Le terme composants est un peu abusé dans le développement front-end car de nombreux frameworks ont leur propre notion qui décrit un composant. En fait, les composants Web, en tant que norme HTML officielle, peuvent compliquer davantage le concept. Définissons donc clairement ce qu'est un composant dans Ionic..
De manière générale, un composant est la mise en œuvre d'un ensemble de fonctionnalités qui sont encapsulées par une forme de convention de codage. En d'autres termes, vous pouvez considérer un composant comme un moyen d'isoler une fonctionnalité particulière du reste de l'application. Vous pouvez imaginer comment en HTML, il existe différents types d’entrées de formulaire et chacun d’eux est un type de composant qui possède des fonctionnalités spécifiques..
Dans Ionic, il existe deux types de composants, CSS et JavaScript. Les composants CSS sont implémentés sous la forme d'un ensemble de classes CSS qui modifient un élément pour lui donner une apparence spécifique, telle qu'une barre d'en-tête..
Les composants JavaScript sont implémentés techniquement sous forme de directives angulaires et utilisés en tant qu'éléments HTML dans l'application. Ils fournissent un ensemble plus riche de fonctionnalités. Cela inclut généralement la possibilité pour les utilisateurs d'interagir avec celle-ci ou avec l'application pour gérer autrement le composant. Les onglets, par exemple, permettent d'afficher ou de masquer le contenu en fonction du choix d'un onglet par l'utilisateur..
Dans ce tutoriel, nous allons nous concentrer sur certains composants JavaScript. Plus loin dans cette série, nous examinerons de plus près les composants CSS.
Parfois, Ionic implémente un composant en tant que composant CSS et JavaScript, tel que le composant tabs. Cela signifie que vous décidez lequel utiliser. Je recommande généralement d'opter pour l'implémentation de JavaScript. Dans la plupart des cas, l'utilisation du composant JavaScript nécessite un temps système négligeable et, à mon avis, rend le code plus facile à utiliser..
Dans ce tutoriel, nous allons créer une application à partir de rien et continuer à améliorer l'application dans le reste de cette série. Le principe de cette application est de créer une application d'information civique fournissant aux utilisateurs des informations sur leurs installations locales, telles que des bibliothèques et des parcs..
Dans ce didacticiel, nous commençons par créer une application qui affiche une liste des parcs de Chicago et utilise un défilement infini pour conserver les résultats du chargement tant qu'ils sont disponibles. Nous allons développer l'ensemble des fonctionnalités de l'application dans les prochains tutoriels.
J'ai créé une API qui fournit les informations nécessaires à l'application. L'API est basée sur les API Google Maps. Vous pouvez exécuter l'API vous-même, mais cela nécessite l'obtention d'une clé d'API personnalisée auprès de Google. Vous trouverez des instructions dans le projet d'API. Si vous rencontrez des problèmes lors de l'utilisation de l'API fournie, par exemple si quelqu'un abuse de l'API et dépasse les limites d'utilisation de l'API, l'exécution de votre propre version devrait vous aider..
Vous pouvez prévisualiser l'application en cours d'exécution sur Heroku et afficher le projet terminé sur GitHub. Cependant, je vous encourage à suivre et à créer l'application avec moi.
Tout d'abord, vous devez démarrer un nouveau projet. Nous pouvons le faire en lançant la commande suivante:
ionic start civinfo https://github.com/ionic-in-action/starter
Ceci télécharge un kit de démarrage qui inclut un modèle Ionic vide pour nous permettre de démarrer (conçu pour être utilisé avec mon livre Ionic in Action). Entrez le répertoire, cd civinfo, et courir service ionique.
Vous pouvez maintenant prévisualiser un chargement d'application vide à l'adresse http: // localhost: 8100 (ou sur le port défini par Ionic). Je recommande d'ouvrir les outils de développement de votre navigateur pour confirmer que vous voyez un écran vide. Oui, cela devrait être un écran blanc. Je suggère également d'utiliser l'émulation de périphérique de Chrome lors de la prévisualisation de votre application..
La navigation est tellement cruciale que nous devrions commencer par concevoir notre application. Les principaux composants de navigation sont ionNavBaret ionNavView. La plupart des applications ont une fonctionnalité de conception où il y a une barre de navigation avec divers titres et boutons d'action, puis le reste de la zone est consacré au contenu de la vue actuelle..
le ionNavBaret ionNavView les composants fournissent cette fonctionnalité avec une intelligence intégrée pour nous aider. Notre application va avoir plusieurs routes à la fin, mais nous n'en construisons qu'une dans ce tutoriel..
Ionic utilise le Routeur d'interface utilisateur sous le capot pour gérer la navigation et le routage. Si vous le connaissez bien, vous reconnaissez l'implémentation dans Ionic. Il y a beaucoup de nuances, mais nous allons garder les choses simples dans ce tutoriel. L’utilisation la plus courante et la plus simple consiste à définir chacune des différentes pages de votre application en tant que Etat, qui est le moyen Ionic / UI Router pour définir une vue particulière.
Pour commencer, nous incluons d’abord les deux composants de navigation dans www / index.html comme vous voyez ci-dessous, en le plaçant à l'intérieur du corps.
Une fois que vous avez ajouté le code à index.html, vous pouvez recharger l'application et devrait voir apparaître une barre verte en haut de l'application.
Vous avez défini le ionNavBar composant, qui apparaît automatiquement en haut de l'écran. Plus tard, lorsque nous créerons des vues individuelles, celles-ci pourront transmettre un titre et des boutons supplémentaires à afficher. Il est assez intelligent de savoir quelle doit être la hauteur de la barre de navigation pour différents appareils. Ce n'est pas cohérent sur toutes les plates-formes, donc c'est très utile. La barre de navigation reçoit une classe de barre équilibrée pour lui donner une couleur verte.
Puis il y a le ionNavView, qui est l'espace réservé qui rend le contenu pour chacune des vues. Une fois que nous avons défini une vue, le résultat obtenu est affiché ici et il s'ajuste automatiquement pour occuper l'espace disponible restant après le positionnement de la barre de navigation..
Les composants de navigation sont des exemples de composants JavaScript (également appelés directives angulaires). Elles ressemblent à des balises HTML personnalisées et, lorsqu'elles sont utilisées ensemble, elles sont suffisamment intelligentes pour maintenir la barre de titre synchronisée avec la vue actuelle et restituer le contenu approprié en fonction des choix de navigation de l'utilisateur. Pour voir cela en action, cependant, nous devons ajouter quelques États. Commençons par faire notre premier état qui affiche une liste de parcs.
Le but principal de l'application est d'afficher une liste de ressources liées à la citoyenneté. Initialement, il s’agira d’une liste de parcs, mais nous allons l’étendre à d’autres types de ressources, telles que les bibliothèques. Nous souhaitons inclure quelques fonctionnalités dans cette vue:
Maintenant que nous avons quelques objectifs pour cette vue, commençons par ajouter notre fichier JavaScript qui enregistrera cette vue. Créer un nouveau fichier places.js à www / vues / lieux / et ajoutez ce qui suit:
Accentsconagua
angular.module ('App') .config (function ($ stateProvider) $ stateProvider.state ('places', url: '/ places', contrôleur: 'PlacesController as vm', templateUrl: 'vues / places / places .html ');) .controller (' PlacesController ', function () );Nous déclarons un nouvel état pour le routeur d'interface utilisateur à l'aide de la commande $ stateProvider.state () méthode. Ceci est uniquement disponible pour être configuré dans Angular angular.config () méthode. Lorsque vous déclarez un état, vous passez d'abord une chaîne pour nommer la route, dans ce cas des endroits. Vous transmettez ensuite un objet avec diverses propriétés qui définissent l'état, tel qu'une URL, un contrôleur et un modèle. Vous pouvez consulter la documentation du routeur d'interface utilisateur pour connaître toutes les options de configuration possibles..
Nous avons déclaré un nouvel état, l'a nommé des endroits, lui a attribué une URL de /des endroits, nommé un manette en utilisant contrôleur en tant que syntaxe, et a énuméré un templateUrl charger. C'est une définition d'état assez commune et vous la voyez utilisée de la même manière avec les autres états. Le contrôleur déclaré ici est vide, mais nous y ajouterons bientôt.
Ce modèle est une partie essentielle de la vue et décrit les aspects visuels de cette vue. La plupart de la logique et du comportement de la vue seront gérés dans le contrôleur et le modèle. Notre état déclare que nous voulons charger un fichier HTML pour le modèle, mais nous n'en avons pas encore créé. Réparons cela en créant un nouveau fichier places.html à www / vues / lieux / et en ajoutant le code ci-dessous.
Jusqu'à présent, dans ce modèle, nous avons déclaré ionView et ionContenu Composants. le ionView composant est un emballage que vous placez autour d'un modèle qui est destiné à être chargé dans le ionNavView composant que nous avons déclaré plus tôt. le titre-vue attribut est également utilisé pour passer le titre de la barre de navigation devrait afficher.
le ionContenu composant est un wrapper de contenu utile, qui permet de s'assurer que l'espace de contenu est redimensionné par rapport à l'espace d'écran disponible, de gérer le défilement et de révéler d'autres comportements moins utilisés. Lorsque cette vue est chargée, le titre de la barre de navigation apparaît en tant que "Parcs locaux"..
Maintenant, nous devons nous assurer que l'application charge le script à exécuter en ajoutant places.js à index.html comme vous voyez ci-dessous. Je recommande d'ajouter ce droit avant la étiquette.
Vous pouvez voir l'application, mais vous ne verrez toujours pas la vue apparaître. Pour voir la vue, accédez à http: // localhost: 8100 / # / places. L'URL mappée dans la définition d'état peut être utilisée pour naviguer vers un itinéraire. Il devrait alors apparaître comme dans l'image suivante avec le titre réglé sur "Parcs locaux".
Ce n'est pas encore très excitant, mais cela représente la vue la plus basique que vous allez probablement configurer la plupart du temps. Travaillons maintenant sur le chargement des données et leur affichage à l'écran.
Avant de pouvoir faire beaucoup plus, nous devons charger certaines données. Pour ce faire, nous devons ajouter un service Angular pour nous aider à gérer la géolocalisation. Dans un prochain tutoriel, l'emplacement de l'utilisateur sera détecté par l'appareil. Jusque-là, nous allons le régler manuellement sur Chicago, l'une de mes villes préférées..
Ouvrir www / js / app.js et ajoutez le service suivant à la fin du fichier. Il faut enchaîner avec les méthodes existantes de module angulaire.
.factory ('Géolocalisation', fonction () retour "adresse_formatée": "Chicago, IL, États-Unis", "géométrie": "emplacement": "lat": 41.8781136, "lng": -87.6297982, " place_id ":" ChIJ7cv00DwsDogRAMDACa2m4K8 ";)Il s'agit d'un service angulaire qui renvoie un objet qui correspond à ce que l'API Google Maps renvoie pour Chicago. Nous avons maintenant des détails sur l'emplacement afin que nous puissions y charger des parcs.
Ensuite, nous allons mettre à jour le contrôleur pour charger la liste à partir de l’API. Pour simplifier, je charge les données à l’aide de la touche $ http service dans le contrôleur. La meilleure pratique serait de résumer cela dans un service. Ouvrir www / views / places / places.js à nouveau et mettez à jour le contrôleur comme ceci:
.contrôleur ('PlacesController', fonction ($ http, Géolocalisation) var vm = ceci; var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Géolocation.geometry.location .lat + ',' + Geolocation.geometry.location.lng; vm.places = []; vm.load = fonction load () $ http.get (base) .then (fonction handleResponse (réponse) vm.places = response.data.results;);; vm.load (););Le contrôleur a un vm.load () méthode pour exécuter la requête HTTP et stocke les résultats dans vm.places. Lorsque vous enregistrez ceci, vous devez voir la requête HTTP se déclencher dans les outils de développement de votre navigateur. Même si vous connaissez Angular, il est possible que vous ne reconnaissiez pas cette approche exacte pour stocker des données sur le disque. vm variable. Je recommande de lire l'article de John Papa sur la raison pour laquelle il s'agit d'une approche recommandée si vous avez besoin de clarté..
Pour afficher les données, nous devons également mettre à jour le modèle et parcourir la liste des parcs pour les afficher. Ouvrir www / views / places / places.html et le mettre à jour comme indiqué ci-dessous.
![]()
place.name
place.formatted_address
Dans le modèle, nous utilisons le ionList et ionItem Composants. le ionList composant est l’un des composants les plus utiles, car les listes sont un choix de conception très courant dans les appareils mobiles en raison des écrans plus petits et de leur utilisation typique en orientation portrait. Un peu comme une liste en utilisant ul et li, ionList enveloppe tout nombre de ionItem éléments.
Les listes peuvent adopter un certain nombre d'apparences différentes. Dans cet exemple, l'élément de liste affiche une image à gauche en déclarant la item-avatar classe sur le ionItem. La même approche pourrait être utilisée dans une application de messagerie où vous avez une liste de discussions avec un avatar de chaque personne..
À l'intérieur de ionItem, vous affichez le nom et l'adresse. Le style par défaut consiste à tronquer automatiquement (à l'aide de CSS) tout texte dépassant pour conserver les éléments à la même hauteur..
Nous avons chargé une liste de parcs et les avons affichés sous forme de liste en utilisant ionList et ionItem. Nous pouvons aller plus loin et ajouter un défilement infini pour charger des résultats supplémentaires lorsque l'utilisateur fait défiler vers la fin de la liste (s'ils sont disponibles)..
Pour que la liste charge automatiquement des éléments supplémentaires en fonction du défilement de l’utilisateur vers le bas, nous pouvons utiliser le ionInfiniteScroll composant. Ce composant est placé à la fin de la liste, surveille le moment où l'utilisateur a fait défiler la liste jusqu'à la fin, puis appelle une méthode pouvant charger des éléments supplémentaires. Il dispose également d'une roulette de chargement intégrée pour indiquer que davantage d'éléments sont en cours de chargement. Le compteur est masqué lorsque la réponse est résolue.
Notre API doit également prendre en charge une certaine forme de pagination pour que cela fonctionne. Dans ce cas, l'API Google Maps fournit un jeton qui doit être transmis pour charger le prochain ensemble de résultats. Nous devons mettre à jour le contrôleur pour gérer cette logique, alors commençons par mettre à jour www / views / places / places.js comme indiqué ci-dessous.
.controller ('PlacesController', fonction ($ http, $ scope, Géolocalisation) var vm = ceci; var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Géolocalisation. geometry.location.lat + ',' + Geolocation.geometry.location.lng; var token = "; vm.canLoad = true; vm.places = []; vm.load = function load () var url = base; if (jeton) url + = '& token =' + 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'););Nous avons ajouté une nouvelle propriété, vm.canLoad, qui est un booléen qui indique s'il y a des éléments supplémentaires à charger. C'est vrai par défaut. Jusqu'à ce qu'une demande soit retournée, nous ne savons pas s'il y a des articles supplémentaires disponibles.
le vm.load () La méthode est mise à jour pour ajouter le jeton s'il est disponible. Le gestionnaire de réponses concatène maintenant les résultats sur le tableau. Cela signifie que la deuxième page de résultats est ajoutée après la première page. L'API de Google Maps renverra un next_page_token à tout moment, il y a plus de résultats qui peuvent être chargés. Si cette propriété est manquante, nous pouvons supposer qu'il n'y a plus d'éléments à charger et vm.canLoad est réglé sur faux. Le composant de défilement infini utilise cette valeur pour déterminer quand arrêter de charger plus d'éléments.
Le changement final est l'ajout de $ scope. $ broadcast ('scroll.infiniteScrollComplete'). Le composant de défilement infini ne sait pas quand la requête HTTP est terminée ni exactement quand il est sauvegardé pour désactiver le symbole de chargement. Par conséquent, le composant écoute les événements pour se mettre à jour. Dans ce cas, le scroll.infiniteScrollComplete event indique au composant d'arrêter le tourniquet et de continuer à surveiller l'utilisateur en faisant défiler l'écran jusqu'au bas.
La dernière pièce consiste à l'activer dans le modèle. Ouvrir www / views / places / places.html et ajoutez la ligne entre la fin de la ionList et ionContenu Composants.
Le composant de défilement infini est maintenant activé dans votre modèle. Il commence à surveiller le moment où le composant est visible, ce qui est également déclenché lors du chargement car aucun emplacement n'est visible à ce moment-là et le composant de défilement infini est visible. Il appelle la méthode déclarée dans sur l'infini une fois quand il devient visible (ici il est vm.load ()) et attend que l'événement scroll complete complete soit déclenché.
le ngIf est utilisé pour désactiver le défilement infini une fois que l'API a renvoyé tous les résultats possibles. Dans ce cas, le défilement vers le bas ne déclenche plus le chargement de davantage de ressources..
Lorsque vous utilisez le défilement infini, il est important d’utiliser un ngIf pour le désactiver. Il peut être facile d'implémenter le composant de telle manière que le composant essaie de charger et de charger et ne s'arrête jamais.
Ceci termine la vue des lieux. Rétrospectivement, 12 lignes de code HTML dans le modèle et environ 20 lignes de code JavaScript dans le contrôleur offrent de nombreuses fonctionnalités..
Nous avons examiné un certain nombre de composants que vous utiliserez fréquemment dans vos applications Ionic..
ionNavView et ionNavBar pour prendre en charge la navigation coordonnée avec différentes vues.ionList et ionItem les composants facilitent la création de listes conviviales mobiles.ionInfiniteScroll composant déclenche automatiquement un appel pour charger des éléments supplémentaires et les ajouter à la liste.Le prochain tutoriel se penchera sur certains des services utiles fournis par Ionic, tels que les indicateurs de chargement et les popovers..
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..
