AngularJS

AngularJS : présentation et mode d’emploi

AngularJS est un framework Javascript permettant de développer des applications one-page complexes exécutées dans le navigateur. Quels sont les principes de base de ce framework ? Comment l’appréhender ? Quel est le lien entre AngularJS et Ionic ?

1. Présentation d’AngularJS

Pour la petite histoire, AngularJS est né dans les laboratoires de Google en 2009, alors qu’une équipe était en train de développer le projet « Google Feedback ». Alors que toute la partie Javascript du projet prenait 17.000 lignes (et que le projet était loin d’être terminé !), Shyam Seshadri proposa de créer un framework permettant d’organiser proprement le code et de le factoriser au maximum. Résultat : l’application a été recréée from scratch avec ce nouveau framework et a tenu sur moins de 1.500 lignes de code. Ce framework, devenu open-source, c’est AngularJS.

2. Principes de base d’AngularJS

Le premier principe à retenir est le suivant : les applications web créées avec AngularJS sont des SPA (single page applications). Concrètement, le seul fichier HTML qui sera exposé au navigateur par le serveur sera le fichier index.html. Le navigateur ne changera jamais de page. Toutes les données (templates HTML, données brutes, etc.) seront récupérées en AJAX et injectées dans le DOM par AngularJS.

AngularJS est un framework MVC (Modèle-Vue-Contrôleur), c’est-à-dire qu’il a pour principe de base de séparer, dans des fichiers distincts, les modèles (la structure des données), les vues (l’interface utilisateur) et les contrôleurs (qui font le lien entre les modèles et les vues).

Un autre principe fondateur d’AngularJS est le data-binding. Si vous avez l’habitude d’utiliser jQuery, la logique est… totalement différente. Avec AngularJS, on ne cible jamais les éléments de la page HTML par leur id, leur classe, ou tout autre attribut. De même, on ne définit jamais d’event-listeners (en tous cas pas de la même façon et pas pour la même utilisation qu’avec jQuery). Ici, la logique applicative est directement insérée dans le HTML des templates, sous la forme d’éléments ou d’attributs commençant par ng-, appelés directives. Par exemple : ng-app, ng-controller, ng-model ou encore ng-bind.

3. Comment débuter avec AngularJS ?

Pour utiliser AngularJS, il suffit d’inclure le script angular.min.js dans votre index.html, au-dessus de votre fichier Javascript personnel. Vous pouvez télécharger angular.min.js sur le site officiel https://angularjs.org/. Il est plus propre d’utiliser npm et bower pour injecter AngularJS dans votre projet, mais ce n’est pas le propos de cet article et j’y reviendrai ultérieurement.

Le data-binding, comment ça marche ?

Comme rien ne vaut un exemple pour bien comprendre, ouvrez celui-ci : https://jsfiddle.net/cqjesv34/. C’est une application AngularJS toute simple qui permet de savoir si un prix est cher (supérieur à 50€) ou pas cher (inférieur à 50€).

Vous pouvez constater que nous commençons, dans notre fichier javascript, par instancier la variable main comme un module AngularJS, que nous lions à notre vue par l’attribut HTML ng-app. Ensuite, nous attachons à notre module main un contrôleur que nous avons nommé mainCtrl, et que nous lions à notre vue par l’attribut HTML ng-controller.

Même si cet exemple est très simple et ne comprend qu’un module et un contrôleur, nous commençons à nous rendre compte que chaque module concerne une partie définie de code HTML, et, dans chacun de ces modules, chaque contrôleur concerne une sous-partie définie de code HTML. Tout est donc bien propre et cloisonné. A l’intérieur d’un contrôleur, nous pouvons accéder aux variable locales à ce contrôleur par l’intermédiaire de $scope.

Je m’explique. Vous remarquez au niveau de l’élément input l’attribut ng-model. Celui-ci permet de lier en temps réel le texte présent dans l’input avec la variable $scope.prix du Javascript. Ainsi, à chaque fois que l’utilisateur modifie le texte de l’input, la variable $scope.prix est automatiquement mise à jour.

De même, vous remarquez l’attribut ng-bind. Cet attribut nous permet d’injecter automatiquement le résultat d’une fonction dans un élément HTML, en l’occurence la fonction $scope.generateText() dans l’élément b.

Magique, non ? Essayez de réaliser la même application avec jQuery, vous constaterez la différence de quantité de code nécessaire !

Pour aller plus loin

Cet article n’a pas pour vocation à être un cours complet sur AngularJS. Pour aller plus loin, je vous conseille de vous renseigner sur les points suivants :

  • L’injection de dépendances
  • ng-repeat pour faire des boucles dans la vue
  • Les filtres
  • ng-show et ng-hide pour afficher et cacher une partie du code HTML
  • $location pour interagir avec l’adresse du navigateur
  • $route pour changer de vue en fonction de l’URL
  • $http pour faire des appels à une API
  • $watch pour surveiller une variable

4. Quel est le lien entre AngularJS et Ionic ?

Ionic Framework se présente comme un module AngularJS, qui apporte ses propres directives et ses propres méthodes utilitaires, complété par un fichier CSS permettant de copier les interfaces utilisateurs natives d’iOS et d’Android. Dans la logique Ionic, chaque « page » d’une application est un contrôleur AngularJS.

Les équipes d’Ionic développent également de nombreux outils simplifiant le développement d’applications mobiles hybrides :

  • Ionic Cli : un utilitaire en ligne de commande surchargeant cordova et permettant de réaliser toutes sortes d’opérations comme la création d’une application, sa compilation, la gestion des plugins cordova ou encore la génération des icônes et des splashscreens ;
  • Ionic Creator : Une application en ligne permettant de créer l’interface utilisateur de son application en drag-and-drop ;
  • Ionic View : Une application mobile permettant de tester facilement son application sur différents appareils ;
  • Ionic Cloud : une suite d’outils payante permettant d’analyse du comportement des utilisateurs de l’application, l’envoi de notifications push ou encore l’authentification des utilisateurs.

Et la suite ?

Ionic Framework 2 et AngularJS 2 sont en cours de développement. Ils promettent la simplification du scripting et du templating, le passage à la WAPI pour les animations et le changement du système de routing. Ces 3 points résolvent des problèmes récurrents que l’on peut actuellement rencontrer dans la v1 d’Ionic. L’utilisation des fonctions natives des appareils devrait également être simplifiée, grâce à Ionic Native. Nous aurons l’occasion d’en reparler lors de la sortie officielle de cette version 2, prévue pour fin 2016.

Ionic

Besoin d'un développeur Ionic freelance ? Contactez-nous !

Par e-mail : tristan@developpeur-ionic.fr