Initialisation du projet

La création d’un nouveau projet Ionic est similaire en tout point à la création d’un nouveau projet Cordova. En coulisse, c’est d’ailleurs la commande cordova create qui est appelée lors de ce processus. Mais Ionic ne se contente pas de réutiliser la commande Cordova, il met aussi en place plusieurs outils, scripts et configurations, qui vont rendre le développement plus efficace et moins fastidieux. Afin de ne pas avoir à partir de zéro, Ionic met également en place un projet AngularJS par défaut. Celui-ci consiste en une simple page, équipée de tous les composants d’un projet AngularJS basique : configuration et comportement au démarrage de l’application, contrôleurs, services, routes et templates.

1. Création de l’application

Une seule commande est requise pour débuter un projet avec Ionic. Après avoir installé Ionic (chapitre Découverte de Ionic), ouvrez un terminal et tapez la commande suivante :


ionic start NOM_APPLICATION blank

La commande est composée de plusieurs paramètres :

start : indique à Ionic de créer un nouveau projet et de l’initialiser.
NOM_APPLICATION : nom de l’application utilisé pour nommer le répertoire contenant le projet et qui sera réutilisé par la suite pour la configuration des plateformes et des outils.
blank : modèle d’application utilisé par Ionic. Le projet blank est un projet vierge ne contenant qu’une page.

Plusieurs modèles d’applications sont proposés par Ionic. Dans cet ouvrage, c’est le projet blank qui est utilisé car il permet de bâtir une application en partant de la page blanche, tout en ayant la structure AngularJS de mise en place. Un projet peut être initialisé avec les modèles tabs et sidemenu qui exploitent des fonctionnalités plus avancées de Ionic, qui seront abordées plus loin dans cet ouvrage.

Ionic exécute alors la commande Cordova permettant de créer une nouvelle application multiplateforme et télécharge le projet AngularJS par défaut. Cette dernière étape peut mettre plusieurs minutes à s’exécuter en fonction des performances...

Découverte du projet par défaut

Lors de la création d’un nouveau projet, Ionic met en place une application web par défaut qui ne se contente pas, comme le fait Cordova, de présenter une simple page blanche, mais propose un socle simple et universel pour débuter le développement d’une application basée sur AngularJS.

Aperçu du projet par défaut

1. Fichier index.html

Le fichier index.html est le point d’entrée de l’application web qui sera exécutée dans la webview ouverte par le smartphone de l’utilisateur. Ce fichier a pour vocation d’importer tous les fichiers JavaScript et CSS requis par l’application, d’initialiser les modules Cordova et Ionic, et enfin de démarrer AngularJS.

a. Section Head


<head> 
   <meta charset="utf-8"> 
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, 
user-scalable=no, width=device-width"> 
   <title></title> 
 
   <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
   <link href="css/style.css" rel="stylesheet"> 
 
   <script src="lib/ionic/js/ionic.bundle.js"></script> 
   <script src="cordova.js"></script> 
   <script src="js/app.js"></script> 
</head>

Dans la section head sont présentes deux balises méta :

la première spécifie que l’encodage UTF-8 sera utilisé pour encoder les pages de l’application (cela évitera des problèmes en cas d’internationalisation de l’application),
la deuxième contraint l’affichage pour éviter que l’utilisateur puisse zoomer comme sur une page web classique.

Deux fichiers CSS sont également importés : ionic.css et style.css. Le premier est le résultat de la compilation du fichier SCSS...

Création du premier couple contrôleur/service

Le projet blank se contente d’initialiser AngularJS et Ionic et laisse le développeur libre d’implémenter sa propre application, sans lui imposer d’architecture type ou de modules spécifiques. L’objectif est maintenant de remplacer la vue statique qui s’affiche actuellement (la barre de statut indiquant Ionic Blank Starter) par une vue dynamique, pilotée par un contrôleur et tirant ses données d’un service. Ce découpage permet de respecter le principe MVC (modèle, vue, contrôleur) en isolant les composants qui vont traiter le métier et les données (modèle) de ceux qui vont piloter la vue, interroger le modèle et vérifier les entrées utilisateur (contrôleur), et de la vue elle-même qui se contentera de restituer et de mettre en forme les informations envoyées par le contrôleur.

1. Création du contrôleur

La première étape consiste à créer le contrôleur qui va interroger le service pour récupérer les données à afficher et qui va mettre ces données à disposition de la vue.

Dans le répertoire www/js, créez un fichier accueil.ctrl.js. Par convention, les fichiers contenant un contrôleur seront suffixés de ctrl.js, ce qui permet de les identifier aisément dans un projet de grande ampleur.

Dans le fichier accueil.ctrl.js, saisissez le code JavaScript suivant :


var AccueilCtrl = function() { 
  this.titre = "Bonjour Ionic !"; 
};

Ce contrôleur est rudimentaire : il se contente de déclarer un objet AccueilCtrl et de référencer un attribut titre qui a pour valeur Bonjour Ionic !. Cet attribut sera utilisé par la vue pour afficher du texte à l’écran.

Maintenant que le contrôleur est créé, il est nécessaire de le faire connaître à l’application et au module principal starter.

Ouvrez le fichier app.js et ajoutez la ligne suivante, après l’appel à la méthode run :


.run(function($ionicPlatform) { 
... 
}) 
.controller('AccueilCtrl', AccueilCtrl);

L’objet AccueilCtrl créé précédemment...

Vues

L’isolation entre contrôleur et service est maintenant effective et permet de séparer les traitements métier de la présentation. Néanmoins, la vue contenue dans le fichier index.html est statique et n’est capable de présenter qu’une liste de films. Pour poursuivre l’effort d’isolation, il convient de mettre en place un système permettant d’isoler les vues les unes des autres et d’afficher la vue courante à l’utilisateur.

AngularJS s’appuie sur une technologie dite one page, c’est-à-dire que l’application n’est pas une succession de pages comme c’est le cas en PHP ou avec un site HTML statique. L’application est en fait constituée d’une seule page dont l’arbre DOM (Data Object Model) est manipulé afin d’ajouter, de modifier et de supprimer des composants en temps réel. Le navigateur redessine ensuite le contenu de la page pour tenir compte de ces modifications. Lorsque la quasi-totalité de l’arbre DOM est remplacée, l’utilisateur a l’illusion d’arriver sur une autre page, le contenu étant radicalement différent, alors que techniquement, le navigateur n’est pas passé sur une autre page.

C’est cette technique qui va être utilisée dans une application Ionic : le contenu de la balise head et une partie...

Routes

Une route est l’association de quatre éléments :

Un nom unique qui servira de référence pour cette route.
Une URL qui indique l’adresse avec laquelle on va accéder à la vue.
Un contrôleur qui va piloter la vue, traiter les interactions avec l’utilisateur et la communication avec les services de l’application.
Une vue qui sera injectée dans la page principale afin d’afficher des informations à l’utilisateur.

Une application n’est donc qu’une succession de routes qui vont permettre à l’utilisateur de naviguer entre toutes les fonctionnalités et d’afficher tous les éléments disponibles.

1. Création d’une route

Une route peut être déclarée au niveau de l’application ou d’un module (cf. chapitre Développement générique).

Dans le fichier app.js, ajoutez la déclaration d’une première route qui affichera la liste des films :


angular.module('starter', ['ionic']) 
.controller('AccueilCtrl', AccueilCtrl) 
.service('FilmSvc', FilmSvc) 
.config(function($stateProvider) { 
    $stateProvider 
        .state('listeFilms', { 
            url: '/films/liste', 
            templateUrl: 'templates/liste.html', 
            controller: 'AccueilCtrl as AccueilCtrl' 
        }); 
});

La configuration des routes est réalisée dans la fonction config qui permet de paramétrer le comportement de l’application. Le service $stateProvider, exposé par ui-router, permet d’enregistrer de nouvelles routes ainsi que leurs caractéristiques. Pour enregistrer une route, il suffit d’appeler la méthode $stateProvider.state() et de préciser le nom de la route ainsi qu’un objet précisant :

L’URL unique qui mène à la route.
Le chemin vers la vue. Ce chemin part du répertoire www du projet et doit mener jusqu’au fichier HTML concerné.
Le nom du contrôleur qui pilote la vue.

Le nom de la route ainsi que l’URL seront réutilisés plus tard dans l’application pour rediriger l’utilisateur vers cette route suite à un événement : clic sur un bouton, entrée de menu, réception d’une...