Angular a été créé par une équipe de Googlers en 2009. Aprés quelques années, il est devenu l’un des meilleurs frameworks JavaScript pour créer des applications Single Page. Il se base sur plusieurs concepts qui sont nécessaire à comprendre avant qu’Angular proprement dit.
On a
– le Data Binding
– L’architecture MVVM (Model-View-ViewModel);
– L’injection des dépendances
– La manipulation du DOM au moyen des directives
Pour commencer, je vais expliquer chacun de ces concepts séparément et brièvement, Mais avant de le faire créez un nouveau fichier sur votre éditeur de texte dans lequel on va tester quelques exemples juste pour bien illustrer les explications sans entrer dans les détails du code car ceci sera réservé pour nos prochains articles.
Table Des Matières
Data Binding:
Grâce à cela, les éléments du code HTML seront liés au contrôleur JavaScript. AngularJS pratique ce qu’on appelle le « Two-way data binding »: data-binding bidirectionnel, c’est à dire lorsqu’on fait des actions sur la page HTML, les variables dans le JavaScript se mettront à jour et vice-versa : lorsqu’on change nos variables dans le JavaScript, les répercussions sur la vue seront immédiates.
Pour utiliser Angular JS il suffit de l’ajouter à votre code via cdn:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js
ou le télécharger sur le site officiel:
Tapez le code suivant:
Vous n’avez que l’ouvrir sur un navigateur et voilà:
Tout ce que vous ajouter sur l’input apparaitra directement sur le message sans avoir un taper un long code en Javascript ou même rafraichir a chaque fois la page.
MVVM:
Dérivée de l’architecture MVC qui permet une stricte séparation entre la vue (ce que l’utilisateur voit), le modèle (les données du système) et le contrôleur (les actions possibles du système, c’est le pont entre la vue et le modèle). On peut dire que le fait de joindre vue aux données via du DataBinding vu précédemment invoque le MVVM comme décrit sur les deux schémas suivants.
Injection des dépendances
Il s’agit d’avoir la possibilité d’utiliser d’autres services ou composants comme ‘angular-ui-bootstrap’ qui permet d’utiliser les composants basés sur le Framework CSS Boostrap, et les services comme $http, $q…
C’est ainsi qu’on fait pour injecter bootstrap en AngularJS (il est possible d’utiliser Bootstrap normalement sans l’injecter au module mais il y ‘a quelques de différences entre les API conçus pour travailler avec AngularJS et ceux pour travailler avec n’importe quelle technologie)
La manipulation du DOM par les directives:
Comme son nom l’indique, les directives permet de manipuler le DOM sans avoir recours a de longs bouts de code en JavaScript. Il y en a plusieurs types, on peut citer:
• les directives du Framework (ng-app, ng-init …)
• les directives de templating (ng-model, ng-options…)
• les directives de style (ngCloak, ngClass…)
• les directives de binding (ngBind, ngBindHtml…)
• les directives d’action (ngClick, ngChange…)
Et on peut aussi créer nos propres directives.
tapez ce code:
On a dans notre exemple 3 simples directives:
- ng-app: permet de désigner le bout de code qui va fonctionner avec AngularJS plus d’autres utilité qu’on verra par la suite.
- ng-model: permet le binding des champs des formulaires à des variables, dans notre cas on l’a nommé nom et on l’a affiché sur le message par l’expression {{}}.
- ng-init: Initialiser une variable dans le Scope, sans passer par le Controller. L’important est qu’ici on’a initialisé nom par ‘le visiteur’.
Conclusion:
Je tiens à vous le rappeler que cet article n’est qu’une brève introduction à AngularJS juste pour avoir une idée globale sur ces concepts.
En attendant notre prochain article n’hésitez pas de consulter la documentation officielle:
https://docs.angularjs.org/api
