Angular.js

jQuery vs Angular

C'est comparer un marteau à une boite à outils. jQuery n'est pas un framework, c'est une très bonne librairie de scripts préparés. Angular offre une véritable plateforme de développement côté client. Rien n'empêche de développer avec Angular et de bénéficier des raccourcis jQuery. Afin de ne pas semer le trouble, on va éviter de le faire au début.

Sructure MVC

Au même titre que beaucoup de frameworks serveur, Angular fonctionne sur le principe Models, Views & Controlers. Le Model s'occupe de récupérer ou d'envoyer des datas, le controler est le gestionnaire d'une méthode (comportement) du système et appelle la view s'occupe de l'affichage.

Le modèle

Vu qu'on est en JS, les données seront structurées en format Json. Réception du serveur et communication à la view seront optimisée grâce à Json. Les échanges avec le serveur se réaliseront en Ajax la plupart du temps.

La vue

Simple, c'est le code HTML et/ou la sortie générée. Les datas sont issues du Modèle et injectées dans l'HTML.
Angular utilise un système de templates pour injecter les datas dans l'HTML. Ca ressemble à ceci {{ handlebars }} où handlebars fait référence à une variable JS.

Le controleur

C'est le messager. Il controle tout, quelle vue utiliser, quel model appeler.... et il fait transiter les datas du Model à la Vue.
Un concept clé : $scope. Il fait référence à l'élément courant dans le DOM et se limite à ce dernier.
Aucune manipulation du DOM ne doit y figurer. Donc pas de jQuery ici.

Mise en place

Un attribut data-ng- ou simplement ng-..., mise en place d'un controleur, intégration d'Angular et injection dans le DOM.
En fait on utilise une directive "ng-...", marqueur sur un élément du DOM qui force Angular à associer un comportement spécifique à un élément du DOM et ses enfants.
Le data-binding assure une synchronisation automatique des données entre le modèle et la vue. Quand le modèle change, la vue change et inversément. {{ handlebars }} est du data-binding.