AngularJS est un framework JavaScript structurel permettant de créer des applications web dynamiques. En étendant le vocabulaire HTML, il permet de transformer des documnets statiques en modèles dynamiques. Le framework s'intègre via une simple balise script :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

1. Les Directives de Base

Les directives sont des attributs HTML spéciaux préfixés par ng- qui indiquent à AngularJS de manipuler l'élément DOM.

• ng-app : Initialise l'application et définit l'élément racine.
• ng-model : Lie la valeur des contrôles HTML (input, select) aux données de l'application.
• ng-bind : Remplace le contenu textuel d'un élément par la valeur d'une expression.
• ng-repeat : Instancie un élément pour chaque item d'une collection (boucle).

<div ng-app="" ng-init="produits=[{nom:'Clavier', prix:45}, {nom:'Souris', prix:25}]">
   <ul>
       <li ng-repeat="item in produits">
           {{ item.nom }} - {{ item.prix | currency }}
       </li>
   </ul>
</div>

2. Directives Personnalisées

AngularJS permet de créer ses propres balises ou attributs via la méthode .directive. Cela favorise la réutilisation du code.

<body ng-app="storeApp">
   <catalogue-item></catalogue-item>

   <script>
   var app = angular.module("storeApp", []);
   app.directive("catalogueItem", function() {
       return {
           restrict: "E",
           template: "<h3>Élément du catalogue personnalisé</h3>"
       };
   });
   </script>
</body>

L'option restrict définit comment la directive est invoquée : E (Élément), A (Attribut), C (Classe), ou M (Commentaire).

3. Expressions et Liaison de Données

Les exprestions s'écrivent entre doubles accolades {{ expression }}. Contrairement au JavaScript classique, elles sont évaluées par rapport à l'objet scope, ne supportent pas les boucles complexes ou les exceptions, mais acceptent les filtres.

4. Le Scope et le Contrôleur

Le $scope est l'objet qui fait le pont entre le contrôleur (JavaScript) et la vue (HTML). Le $rootScope est le scope parent de tous les autres, accessible dans toute l'application.

<div ng-app="appSante" ng-controller="checkCtrl">
   <p>Utilisateur : {{ utilisateur }}</p>
   <p>Statut : {{ verifierStatut() }}</p>
</div>

<script>
var app = angular.module('appSante', []);
app.controller('checkCtrl', function($scope, $rootScope) {
   $rootScope.version = "1.0.2";
   $scope.utilisateur = "Jean Dupont";
   $scope.age = 30;
   
   $scope.verifierStatut = function() {
       return ($scope.age >= 18) ? "Adulte" : "Mineur";
   };
});
</script>

5. Les Filtres

Les filtres permettent de transformer la donnée pour l'affcihage sans modifier la source originale.

Filtre personnalisé exemple :

app.filter('majuscPremier', function() {
   return function(entree) {
       if (entree) {
           return entree.charAt(0).toUpperCase() + entree.slice(1);
       }
       return '';
   };
});

6. Services et Communication Asynchrone

Les services sont des objets singletons utilisés pour partager de la logique ou des données. Le service $http est essentiel pour les requêtes AJAX.

app.controller('dataCtrl', function($scope, $http, $timeout) {
   $scope.chargement = true;
   
   $http.get("https://api.exemple.com/donnees")
       .then(function(response) {
           $scope.listeDonnees = response.data;
           $timeout(function() {
               $scope.chargement = false;
           }, 1000);
       }, function(error) {
           console.error("Erreur de chargement", error);
       });
});

Services vs Usines (Factory)

Un service est instancié avec le mot-clé new, tandis qu'une factory retourne un objet. Les deux servent à encapsuler la logique métier hors des contrôleurs pour assurer la testabilité et la séparation des préoccupations.

7. Gestion des requêtes HTTP

Le service $http supporte toutes les méthodes standards (GET, POST, PUT, DELETE, etc.). Pour les problématiques de Cross-Origin (CORS), il est nécessaire de configurer les en-têtes côté serveur (Access-Control-Allow-Origin).