Angular est un framework JavaScript basé sur l'architecture MVC, structurant les données à travers des modèles, des vues HTML et des contrôleurs. Il permet une interaction dynamique via des expressions, des filtres, et gère les dépendances à travers des modules. Les services facilitent la communication avec des serveurs et les routes permettent de naviguer entre les différentes parties de l'application.

1. Angular
Réalisé par: Fatima Zahra Fagroud

2. Introduction
• Framework JavaScript basé sur l’architecture MVC
• Model: objets JavaScript contenant les données
• View: pages HTML accédant aux modèles exposés
• Controller: fonctions JavaScript qui exposent le modèle à travers l’objet
$scope et des méthodes utilitaires
• Version:
• Angularjs
• Angular 2
• Angular 4
• Angular 5

3. Expression et $scope
• Expression:
• Dynamique et le Framework qui la gère
• {{ expression }}
• $scope:
• Représente le modèle de l’application
• Peut être utilisé pour initialiser des valeurs de l’application ou récupérer
les champs modifiés par l’utilisateur
• Les valeurs peuvent être obtenue : un fichier json, un serveur, une vue,
services

4. Controllers
• Chargé d’initialiser les valeurs et contient les différentes fonctions à
appeler
• Nous permet de gérer la vue
• Créer un Controller dans un autre signifie que le $scope du controller
fils hérite du Controller parent
• Controller as : au lieu de $scope on met un objet

5. Filtres
• Permet de filtrer ou réordonner une collection
• Syntaxe: {{expression | filtre}}
• Il existe un ensemble de filtre disponibles
• Exemple: uppercase, lowercase
• Filtre dynamique: {{expression | filtre:param}}
• on peut créer nos propres filtres

6. Modules
• Chaque module déclare quelles dépendances il utilise
• Il est souhaitable d’utiliser plusieurs modules dans l’application
• Déclaration: angular.module(‘nom’,[])
• Exemple de module externes:
• ngRessource : pour interagir avec un serveur rest
• ngAnimate : pour animation

7. Services
• Fonctions ou objets avec un seul but bien précis
• Nom d’un service commence par $
• Si on change le nom du service rien ne fonctionne
• $http:
• permet de communiquer avec un serveur
• Méthodes: get, post, put, delete, head, jsonp
• Attributs: data, status, headers, config
• On peut créer nos propre services

8. Routes
• Permet de naviguer dans les pages de l’application
• $routeProvider: permet d’enregistrer les routes de notre application
• ngView: Pour savoir quelle partie de la page doit être remplacée par le
template
• Exemple:
$routeProvider
.when('/races', {
templateUrl: 'races.html',
controller: RacesCtrl
})
.when('/races/:raceId', {
templateUrl: 'race.html',
controller: RaceCtrl
})

9. Directives
• Une directive est un comportement ou un composant
réutilisable dans une application
• Types:
• les directives du framework
• les directives de templating (dont des tags HTML enrichis)
• les directives de style
• les directives de binding
• les directives d’action

10. Composant
• Chaque élément de l’application peut être un component
• Un component contient généralement 3 fichiers:
• component.html: vue
• component.css : code css
• component.ts : code type script
• On affiche un component web a l’aide de la balise <app-root>
• On le génére : ng generate component nom