Mis à jour le jeudi 16 février 2017
  • 10 heures
  • Moyenne

Qu'est-ce qu'AngularJS

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Pour cette première partie, je vous propose de commencer en douceur en vous présentant Angular, ses fondements et ses concepts.

Fondements

AngularJS est né en 2009 dans les locaux de Google. Deux développeurs du nom de Brad Green et Shyam Seshadri commençaient sérieusement à déprimer devant leur projet appelé "Google Feedback". Une immense frustration les envahissait au fur et à mesure que leur code grandissait. Celui-ci comptait approximativement 17 000 lignes à ce moment-là. Autant de lignes de pur front-end  qui sont intestables et donc difficilement maintenables.

C'est à ce moment-là que Shyam Seshadri proposa de redévelopper entièrement la solution avec un framework fait maison. Au bout de trois semaines, l'application ne comptait plus que 1 500 lignes de codes, parfaitement testées.

À compter de ce jour, les autres développeurs de l'équipe ont décidé de prendre en main ce framework et de travailler avec au quotidien. Une histoire est née, l'histoire d'un framework que l'on nommera AngularJS.

Concepts

Angular est construit autour de concepts clés sur lesquels nous reviendront largement au cours de ce tuto. Comprenez bien que Shyam Seshadri, lorsqu'il créa Angular, n'a rien inventé. Il n'a fait qu'utiliser à bon escient des concepts et des bonnes pratiques incontournables dans le monde du développement web actuel.

  • Architecture MVC (Modèle-Vue-Contrôleur) : si vous connaissez le développement, vous avez sûrement entendu parler de ce type d'architecture incontournable qui consiste à avoir une stricte séparation entre les données (Modèle), la présentation des données (Vue), et les actions que l'on peut effectuer sur ces données (Contrôleur)

  • Data Binding : nous y reviendrons très largement au cours des prochains chapitres. Juste pour vous donner un avant-goût, je vous indique que, grâce à ce concept, les liens entre votre code HTML et JavaScript ne seront que plus forts. :p

  • Injection de dépendances : tout comme l'architecture MVC, lorsque l'on parle d'injection de dépendances, on parle d'un concept prépondérant dans tout développement. Grâce à cela, les modules que vous développerez n'auront plus à se soucier d'instancier leurs dépendances.

  • La manipulation du DOM au moyen de directives : la manipulation du DOM conduit souvent à la création de code difficilement maintenable et difficilement testable. Nous verrons qu'avec Angular, ce n'est plus le cas du tout !

Quelques exemples...

Je vous invite à consulter cette page : https://builtwith.angularjs.org/

Vous y trouverez une panoplie d'applications web développées à l'aide d'AngularJS.

Mes sources

Afin d'écrire ce cours, je m'appuie essentiellement sur le livre AngularJS  conjointement écrit par Brad Green et Shyam Seshadri publié chez O'Reilly. Tous les concepts que je vais vous exposer sont largement décrits dans ce livre et parfois de manière très précise. Le livre va plus loin sur beaucoup d'aspects mais ceux-ci sont parfois compliqués à appréhender. J'ai notamment peuplé mon cours de nombreux exemples qui sont directement extraits de ce livre!

Je vous invite sérieusement à vous appuyer sur la documentation ainsi que sur l'ensemble des documents fournis par Google qui seront largement plus exhaustifs que moi : https://angularjs.org/. D'ailleurs, tout au long de ce cours, je vous redirigerai régulièrement vers les pages de cette documentation.

Exemple de certificat de réussite
Exemple de certificat de réussite