Angular JS : framework JavaScript étend HTML
Angular JS : un framework populaire
Angular JS : Qu’est-ce que c’est
Me dites pas que vous avez jamais entendu parler de AngularJS ? C’est un framework JavaScript inventé par Google qui permet de rendre dynamique un site HTML très facilement. Il permet de développer ses propres balises et attributs HTML. Il est doté d’un panel assez impressionnant de fonctionnalité. C’est un framework extensible et qui pousse le développeur à structurer son code en couche et le but n’étant pas seulement d’apporter de simples animations au DOM, mais bien d’apporter un aspect applicatif au front-office.
Sa popularité
La popularité d’Angular JS ne cesse de monté depuis deux ans en concurrence avec Knockout.js, Ember.js, ainsi que BackBone. Mais qu’est-ce qui fait qu’Angular reçoit tant d’engouement ? Selon certains développeurs, c’est le fait que Google soit à la tête de ce projet qui augmente sa popularité. Bien que je pense, que effectivement, cela peut être un atout de poids, je pense également que ce n’est pas la seule raison. Selon moi, ce qui fait qu’ Angular JS est populaire, c’est sa conception qui rend ce framework facile d’utilisation et donc un apprentissage rapide contrairement à d’autre framework JavaScript ou encore son ancêtre JQuery.
Son principe de fonctionnement
Ses concepts qui caractérisent le plus Angular JS sont :
- une architecture MVC
- le data-binding bidirectionnel
- l’injection de dépendance
- le routing
- les tests
Le data-binding bidirectionnel est rendu possible grâce au scope. Le scope est la “colle” d’une application AngularJS, c’est lui qui contient les variables et fonctions qui font la liaison entre vues et contrôleurs (ou autres). Il permet donc aux données de pouvoir être mises à jour par les vues et par le modèle. L’injection de dépendances permet de charger certaines parties de l’application seulement quand c’est nécessaire. Et l’un des gros point fort d’AngularJS vient du fait que les applications écrites sont entièrement testables.
Comme un bon exemple vaut mieux qu’un long discours, je vous propose après ces quelques mots de passer aux illustrations.
Comme tout apprentissage d’un nouveau code, on va afficher un petit Hello World pour commencer :
<html ng-app="helloApp">
<head>
</head>
<body>
<h1>Introduction à AngularJS<h1>
<div ng-controller="helloCtrl">
<h2>Hello world!</h2>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"> </script>
<script src="app.js"></script>
</body>
</html>
Une page HTML avec la délimitation de la zone d’action de notre application : ng-app=”helloApp” que j’ai positionné sur la balise html, la délimitation de la zone de notre contrôleur : ng-controller=”helloCtrl”, le chargement d’AngularJS, et de notre fichier d’application.
Le fichier d’application :
var helloApp = angular.module('helloApp', []);
helloApp.controller(‘helloCtrl’, [‘$scope’, function ($scope) {
}]);
Se rendre sur la page maintenant nous affiche bien sur “Hello World!”, mais ce n’est pas grâce à notre application. Par contre on peut déjà observer que la déclaration de notre contrôleur prend un paramètre : le scope. Voici donc notre première injection de dépendance (au passage les contrôleurs ont toujours au minimum le scope en dépendance). Mais au fait ce scope qu’est ce que c’est exactement ? Et bien c’est un objet fournit par AngularJS qui défini le contexte d’exécution d’un contrôleur.
Insérons maintenant une variable dans notre contrôleur qui contiendra “world” et affichons la dans la vue :
helloApp.controller('helloCtrl', ['$scope', function ($scope) {
$scope.name = 'world';
}]);
<div ng-controller="helloCtrl">
<h2>Hello {{ name }}!</h2>
</div>
L’interprétation de variable par la vue se fait par défaut avec {{ }}. Nous avons initialisé une variablename contenue par le scope dans notre contrôleur avec la chaîne de caractères “world”, puis nous l’avons placée dans notre vue (tout ce que contient le scope est accessible directement par la vue sans préfixer les variables). Maintenant rafraîchir la page nous affiche toujours “Hello world!”, mais cette fois dynamiquement.
Conclusion
Un framework qui nous réserve bien des surprises quand on est plongé dans sont apprentissage. Et déjà l’annonce de la version 2de d’Angular JS dans les prochains mois.
D5 Creation