Ionic 1 permet de développer des applications mobiles hybrides à l’aide de Cordova ou PhoneGap plutot que des sites web responsives. A partir de Ionic 2, les Progressive Web Applications sont également supportées.
-
Documentation de Ionic 1
-
Site officiel de Cordova
-
Documentation d’Angular UI-Router
ImportantL’implémentation de Ionic 1 est basé sur AngularJS. Angular2 à partir de Ionic 2.
Les étapes nécessaires pour bien démarrer le travail sont les suivantes.
Pour disposer des sources, utiliser git :
git clone https://github.com/monp/angular-comics-ionic.gitLa branche de travail est master.
Les outils utilisés pour ce workshop sont les mêmes que pour le workshop AngularJS.
- ionic
-
Installer Ionic CLI et Cordova.
npm install -g ionic cordova
Le travail consiste à développer une application mobile pour visualiser des comic books. Nous allons essentiellement réutiliser le code du workshop AngularJS.
├── hooks // Cordova hooks permet d'exécuter des commandes spécifiques pendant le build
├── platforms // build spécifiques iOS/Android
├── plugins // plugins Cordova et Ionic
├── resources // icône et écran de démarrage
├── scss // styles scss, générés par gulp dans www/css/
├── www
├── css // styles css
├── img // images
├── js // code Angular + JS
├── lib // bibliothèques
├── manifest.json // informations de déploiement
├── index.html // master page
├── bower.json
├── config.xml // configuration Cordova
├── gulpfile.js // configuration gulp
├── ionic.config.json // configuration ionic
├── package.json|
Warning
|
Nous utiliserons |
Nous allons compléter le code afin d’afficher la liste des comics, à cet effet nous pourrons réutiliser le code AngularJS du précédent workshop.
-
Modifier le fichier
/www/templates/tabs.htmlet ajouter un onglet Comics
Les attributs icon-off et icon-on permettent de changer l’apparence de l’icône en fonction de son état.
-
Créer une vue associée
tab-comics.html, dans un premier temps les données sont saisies en dur dans le modèle html. -
Modifier le fichier
app.jset créer une règle de routage pour la vuetab-comics.html
Normalement vous devriez être maintenant en mesure d’afficher un listing de comics en naviguant dans votre nouvel onglet.
Lors de la navigation, le titre de la vue s’affiche automatiquement dans le composant ion-nav-bar définit dans le fichier index.html.
-
Créer un service
comicsServicepour récupérer les données à partir du serveur de Marvel.
|
Warning
|
N’oubliez pas d’indiquer votre clé d’API. |
|
Important
|
Si vous souhaitez utiliser |
-
Créer un controleur
comicsController, injecter le servicecomicsServiceet retourner la liste de comics. -
Associer le controleur
comicsControllerà la vuetab-comics.htmlen modifiant la règle de routage dansapp.js.
Pour associer un controleur à une vue, ajouter l’attribut controller à la suite de templateUrl
-
Modifier le modèle
tab-comics.htmlafin de prendre en compte les données chargées.
-
Créer une vue
comic-detail.htmlpour afficher les détails d’un comic. Reprendre les données affichées dans le workshop AngularJS.
-
Modifier la vue
tab-comics.htmlafin de déclencher la navigation lors de la séléction d’un comic.
Utiliser l’attribut href pour déclencher la navigation et n’oublier pas de transmettre l’identifiant du comic dans l’URL.
-
Créer une règle de routage en modifiant le fichier
app.jset récupérer le paramètre transmis lors de la navigation.
Le paramètre récupérer doit être nommé, par exemple /comics/:comicId. Afin de récupérer sa valeur, injecter $stateParams au niveau du controlleur et appeler $stateParams.comicId
-
Compléter le contrôleur et le service associé.
-
Remplacer Gulp par Grunt
-
Ajouter des tests unitaires et e2e
-
Intégrer les commandes Ionic CLI
-
-
Gérer une liste de favoris
-
Tester différentes méthodes de stockage
-
Intégrer des fonctionnalités proposées par Cordova
-
-
Utiliser un simulateur ios ou Android
-
cordova add platform {ios|android} -
En développement, résoudre les problèmes de sécurité (CORS)
-
-
Migrer le code vers Ionic 2