Premiers pas avec AngularJS 2

AngularJS est un framework MVC/MVVM côté client, développé en JavaScript par GOOGLE, ce qui est obligatoire pour créer une application moderne à page unique (ou même un site internet). C'est un grand bond vers le futur de HTML et vers ce que HTML5 apporte. Cet article est une vue de bout en bout, issue de mon expérience, et contient des conseils et astuces au travers de mon utilisation d'AngularJS.

AngularJS avant tout est un moyen d’organiser son code, et de penser en mode application, ce n’est plus comme du jquery ou JavaScript simple, là où on insert des scripts un peu partout, AngularJS vous incite à le séparer en conteneur :

  • Des modules, qu’on appelle aussi apps. Ce sont les boîtes qui contiennent les autres boîtes.
  • Les providers : des fournisseurs de services. Tout le code métier est dedans.
  • Les directives : tout le code de manipulation du DOM est dedans.
  • Les contrôleurs : fait le lien entre le HTML et les données.

Le modèle MVC d’AngularJS :

Le modèle MVC utilisé en AngularJS se présente comme ci-dessous :

Modèle

Structure de données représentant une entité de l'application, généralement transmise en JSON. La communication entre un serveur et AngularJS passe par le biais de lignes de texte en format JSON, JSON (JavaScript Object Notation) est une forme d’écriture de donnée en JavaScript, Son avantage est de fournir un support pour une écriture simple et légère au format texte, relativement compréhensible par les développeurs JavaScript, mais aussi - et surtout - d'être nativement interprété contrairement au XML qui fait appel à de l'analyse syntaxique et parfois à DOM/XSLT pour accéder à sa structure et à son contenu. Il s'agit donc d'une arborescence de données, inspirée de XML mais dont l'emploi en JavaScript est plus aisé et plus performant, à partir du moment où on en connaît la structure. Un exemple d’un fichier JSON ou de la forme JSON est comme suit :
{
  "employee" : 
    [{
       "nom": "Takfarinass",
       "id": "82465646592"
    },{
       "nom": "Yougariten",
       "id": "84598148013"
    }]
}

Nous allons travailler dessus dans la partie pratique de ce tutorial.

Vue

La vue est simple, c'est votre HTML et/ou la sortie générée. Lorsque vous utilisez un framework MVC, vous utilisez les données issues du Modèle pour mettre votre Vue à jour et afficher les bonnes informations dans votre HTML.

Contrôleur

Comme son nom l'indique, cette couche contrôle des choses. Mais quelles choses ? Des données. Les contrôleurs permettent à votre serveur de communiquer avec la Vue, c'est le messager, vous pouvez donc mettre vos données à jour à la volée via ces canaux de communication entre le serveur et le client.
Donc en résumé le modèle c’est les données qu’on récupère du serveur au format JSON, Le contrôleur traite c’est donnée, et les envois à la vue qui le HTML, pour l’affichage sur le navigateur.