Architecture MVC
Cours complet AngularJS
Qu'est-ce qu'AngularJS ?
AngularJS est un framework JavaScript open-source maintenu par Google,
utilisé pour créer des applications web dynamiques à une seule page (Single Page
Applications ou SPAs). Il est conçu pour créer des applications web dynamiques
en utilisant le modèle MVC (Modèle-Vue-Contrôleur). AngularJS étend le HTML
avec de nouvelles balises et attributs, permettant de créer des composants
réutilisables et de lier les données de manière bidirectionnelle.
Avantages d'AngularJS
- Structure MVC : Sépare clairement la logique de l'application, la présentation et
les données.
- Data Binding bidirectionnel : Synchronise automatiquement les données entre
le modèle et la vue.
- Directives : Permet d'étendre le HTML avec des comportements personnalisés.
- Injection de dépendances : Facilite la gestion des dépendances et améliore la
testabilité.
- Modularité : Encourage une structure d'application modulaire et réutilisable.
Différences entre AngularJS et Angular
- AngularJS (version 1.x) utilise JavaScript, tandis qu'Angular (2+) utilise
TypeScript.
- Les versions plus récentes d'Angular offrent de meilleures performances et une
meilleure scalabilité, mais avec une complexité accrue.
Structure de base d'une application AngularJS
Une application AngularJS de base comprend généralement :
1. Un fichier HTML avec la directive `ng-app`
2. Un module JavaScript pour définir l'application
3. Un ou plusieurs contrôleurs
Architecture MVC
Exemple de structure :
<!DOCTYPE html>
<html ng-app="monApp">
<head>
<title>Mon Application AngularJS</title>
<script src="angularjs-1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MonControleur">
<!-- Contenu de l'application -->
</body>
</html>
// app.js
var app = angular.module('monApp', []);
app.controller('MonControleur', function($scope) {
// Logique du contrôleur
});
Concepts fondamentaux
Modules
Définition et création de modules
Un module dans AngularJS est un conteneur pour les différentes parties de
votre application, comme les contrôleurs, services, filtres, directives, etc. Il aide à
organiser et structurer votre code.
Création d'un module
var app = angular.module('monModule', []);
Dépendances entre modules
Architecture MVC
Vous pouvez spécifier des dépendances pour un module en les listant dans
le tableau passé comme deuxième argument :
var app = angular.module('monModule', ['autreModule', 'encoreUnModule']);
Contrôleurs
Rôle des contrôleurs
Les contrôleurs dans AngularJS sont responsables de la logique métier de
votre application. Ils initialisent et contrôlent les données du $scope.
Création et utilisation des contrôleurs
Création d'un contrôleur :
app.controller('MonControleur', function($scope) {
$scope.message = 'Hello from controller!';
});
Utilisation dans HTML :
<div ng-controller="MonControleur">
{{message}}
</div>
Passage de données du contrôleur à la vue
Les données sont passées du contrôleur à la vue via le $scope. Tout ce qui
est attaché au $scope dans le contrôleur est accessible dans la vue.
Scopes
Comprendre le concept de scope
Le scope dans AngularJS est un objet qui fait référence au modèle de
l'application. Il agit comme une colle entre le contrôleur et la vue.
Hiérarchie des scopes
Les scopes sont organisés dans une structure hiérarchique qui imite la
structure DOM de l'application. Chaque ng-controller crée un nouveau scope
enfant.
Utilisation de $rootScope
Architecture MVC
$rootScope est le scope racine de l'application AngularJS. Il est accessible
partout dans l'application.
app.run(function($rootScope) {
$rootScope.appName = 'Mon Application AngularJS';
});
Expressions
Syntaxe des expressions
Les expressions AngularJS sont placées entre doubles accolades {{ }} et
peuvent contenir des variables, des opérateurs et des fonctions.
Exemple :
<p>1 + 2 = {{1 + 2}}</p>
<p>Bonjour {{nom}}</p>
Différences entre expressions et code JavaScript
Les expressions AngularJS sont évaluées par rapport au scope actuel et ont
quelques limitations par rapport au JavaScript pur. Par exemple, elles ne peuvent
pas utiliser des structures de contrôle comme if ou for.
Directives
Les directives sont un concept fondamental dans AngularJS. Elles
permettent d'étendre le HTML avec de nouveaux comportements.
Directives intégrées
AngularJS fournit plusieurs directives intégrées qui sont fréquemment
utilisées :
ng-model
Lie une propriété du scope à un élément de formulaire.
Exemple :
<input type="text" ng-model="nom">
<p>Bonjour, {{nom}} !</p>
ng-repeat
Architecture MVC
Itère sur une collection et répète un élément pour chaque item.
Exemple :
<ul>
<li ng-repeat="item in items">{{item.nom}}</li>
</ul>
ng-if
Ajoute ou supprime un élément du DOM basé sur une condition.
Exemple :
<p ng-if="estVisible">Ce paragraphe est visible si estVisible est vrai.</p>
ng-show/ng-hide
Montre ou cache un élément basé sur une condition, mais ne le supprime
pas du DOM.
Exemple :
<p ng-show="estAffiche">Ce paragraphe est affiché si estAffiche est vrai.</p>
<p ng-hide="estCache">Ce paragraphe est caché si estCache est vrai.</p>
Création de directives personnalisées
Vous pouvez créer vos propres directives pour encapsuler un comportement
réutilisable.
Exemple de directive personnalisée :
app.directive('maDirective', function() {
return { restrict: 'E',
template: '<div>Ceci est ma directive personnalisée</div>',
link: function(scope, element, attrs) {
// Logique de la directive
}
};
});
Utilisation
<ma-directive></ma-directive>
Architecture MVC
Attributs de directive
- `restrict`: Définit comment la directive peut être utilisée (E pour élément, A pour
attribut, C pour classe, M pour commentaire).
- `template`/`templateUrl`: Spécifie le HTML à utiliser pour la directive.
- `link`: Fonction pour manipuler le DOM et gérer les événements.
Filtres
Les filtres dans AngularJS permettent de formater les données affichées
dans la vue.
Utilisation des filtres intégrés
AngularJS fournit plusieurs filtres intégrés :
filter
Filtre un tableau basé sur un prédicat.
Exemple :
<li ng-repeat="item in items | filter: {categorie: 'fruits'}">{{item.nom}}</li>
orderBy
Trie un tableau.
Exemple :
<li ng-repeat="item in items | orderBy: 'prix'">{{item.nom}} -
{{item.prix}}€</li>
currency
Formate un nombre en monnaie.
Exemple :
<p>Prix : {{prix | currency:'€'}}</p>
date
Formate une date.
Exemple :
<p>Date : {{maDate | date:'dd/MM/yyyy'}}</p>
Création de filtres personnalisés
Vous pouvez créer vos propres filtres pour des besoins spécifiques.
Architecture MVC
Exemple de filtre personnalisé :
app.filter('capitalize', function() {
return function(input) {
if (!input) return '';
return input.charAt(0).toUpperCase() + input.slice(1).toLowerCase();
};
});
Utilisation :
<p>{{nom | capitalize}}</p>
Services et Factories
Les services et les factories sont utilisés pour partager du code à travers
l'application.
Différence entre services et factories
- Les services sont instanciés avec le mot-clé 'new'.
- Les factories retournent un objet sans utiliser 'new'.
Création et injection de services
Exemple de service :
app.service('MonService', function() {
this.direBonjour = function(nom) {
return "Bonjour, " + nom + "!";
};
});
Injection et utilisation dans un contrôleur :
app.controller('MonCtrl', function($scope, MonService) {
$scope.salutation = MonService.direBonjour('Alice');
});
Utilisation de services intégrés
AngularJS fournit plusieurs services intégrés utiles :
Architecture MVC
$http
Pour faire des requêtes HTTP.
Exemple :
$http.get('/api/data').then(function(response) {
$scope.data = response.data;
});
$location
Pour interagir avec l'URL du navigateur.
Exemple :
$location.path('/nouvelle-page');
Routage
Le routage dans AngularJS permet de créer des applications à page unique
(SPA) en changeant la vue affichée sans recharger la page.
Configuration des routes avec ngRoute
Pour utiliser le routage, vous devez d'abord inclure le module ngRoute :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-
route.js"></script>
Ensuite, injectez 'ngRoute' comme dépendance de votre module :
var app = angular.module('monApp', ['ngRoute']);
Utilisation de $routeProvider
Le service $routeProvider est utilisé pour configurer les routes :
app.config([‘$routeProvider’,function($routeProvider) {
Architecture MVC
$routeProvider
.when('/', {
templateUrl: 'pages/accueil.html',
controller: 'AccueilCtrl'
})
.when('/apropos', {
templateUrl: 'pages/apropos.html',
controller: 'AProposCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
Dans votre HTML principal, utilisez la directive ng-view pour indiquer où
le contenu routé doit être affiché :
<div ng-view></div>
Paramètres de route et résolution de dépendances
Vous pouvez passer des paramètres dans les routes :
.when('/utilisateur/:id', {
templateUrl: 'pages/utilisateur.html',
controller: 'UtilisateurCtrl'
})
Accès aux paramètres dans le contrôleur :
app.controller('UtilisateurCtrl', function($scope, $routeParams) {
$scope.userId = $routeParams.id;
Architecture MVC
});
Vous pouvez aussi utiliser `resolve` pour charger des données avant que la
route ne soit affichée :
.when('/utilisateur/:id', {
templateUrl: 'pages/utilisateur.html',
controller: 'UtilisateurCtrl',
resolve: {
utilisateur: function($http, $route) {
return $http.get('/api/utilisateur/' + $route.current.params.id);
}
}
})
Formulaires et validation
AngularJS offre des fonctionnalités puissantes pour gérer les formulaires et
leur validation.
Création de formulaires
Exemple de formulaire AngularJS :
<form name="monFormulaire" ng-submit="soumettre()" novalidate>
<input type="text" name="nom" ng-model="utilisateur.nom" required>
<input type="email" name="email" ng-model="utilisateur.email"
required>
<button type="submit" ng-
disabled="monFormulaire.$invalid">Soumettre</button>
</form>
Validation de formulaires
AngularJS ajoute plusieurs classes CSS aux champs de formulaire en
fonction de leur état :
- ng-valid / ng-invalid
Architecture MVC
- ng-pristine / ng-dirty
- ng-untouched / ng-touched
Vous pouvez utiliser ces classes pour styliser vos formulaires :
input.ng-invalid.ng-touched {
border: 1px solid red;
}
Messages d'erreur personnalisés
Vous pouvez afficher des messages d'erreur personnalisés en fonction de
l'état de validation :
<form name="monFormulaire">
<input type="email" name="email" ng-model="utilisateur.email"
required>
<div ng-show="monFormulaire.email.$dirty &&
monFormulaire.email.$invalid">
<span ng-show="monFormulaire.email.$error.required">L'email est
requis.</span>
<span ng-show="monFormulaire.email.$error.email">Format d'email
invalide.</span>
</div>
</form>
Interactions avec le serveur
AngularJS facilite les interactions avec le serveur grâce au service $http.
Utilisation du service $http
Exemple de requête GET :
Architecture MVC
$http.get('/api/utilisateurs')
.then(function(response) {
$scope.utilisateurs = response.data;
}, function(error) {
console.log('Erreur:', error);
});
Exemple de requête POST :
$http.post('/api/utilisateurs', {nom: 'Bo', email: '[email protected]'})
.then(function(response) {
console.log('Utilisateur créé:', response.data);
}, function(error) {
console.log('Erreur:', error);
});
Promesses et callbacks
$http retourne une promesse, ce qui permet d'utiliser .then() pour gérer les
réponses et les erreurs.
Gestion des erreurs
Vous pouvez utiliser un intercepteur pour gérer les erreurs de manière
globale :
app.config(function($httpProvider) {
$httpProvider.interceptors.push(function($q) {
Architecture MVC
return {
'responseError': function(rejection) {
// Gérer l'erreur ici
return $q.reject(rejection);
}
};
});
});
