D'après Wikipedia...

internet

dérivé du concept d'internetting ("interconnecter des réseaux" en français).

Internet

plus grand internet du monde.

Web

de "World Wide Web", la "toile (d’araignée) mondiale", est un système hypertexte public fonctionnant sur Internet.

• Du texte
• Des liens vers du texte

Une page web statique est une page web dont le contenu ne varie pas en fonction des caractéristiques de la demande

• Tout le monde reçoit la même page
• Envoie du fichier contenant la ressource demandée
• Serveur web

est une page web générée à la demande

• Contenu variable en fonction d'informations connues au moment de la consultation
• Requête transmise à un logiciel chargé de générer la page
• Server d'application

architecture informatique

• DOM et JavaScript pour modifier l'information présentée
• Dialogue asynchrone avec le serveur
• Sonnées échangées avec le serveur sérialisées en XML ou autre (JSON)

• Charger du contenu de manière asynchrone
• Animer
• Créer du contenu interactif
• Valider des contenus de formulaires
• Collecter des données (tracking)

• Requêtes asynchrones
• JIT compilation

• Langage de script
• Orienté prototype
• Typage dynamique
• Fonctions comme objets de première classe :

window.alert("Hello, world");

• Moteur intégré dans le navigateur
• Host object : Window
• Document
• History
• Location
• ...

• Qu'est-ce que c'est ?
• Concepts généraux
• Concepts plus détaillés
• Data Binding
• Controller
• Services

• Framework libre
• Première version : 2009
• Dernière version stable : 1.3.6 du 08/12/2014
• Taille (dev/prod) : 122Kio/922Kio
• Licence : MIT

• Découpler les manipulations du DOM de la logique métier.
• Considérer le test d'une application aussi important que l'écriture de l'application elle-même.
• Découpler les côtés client et serveur d'une application.

Template

• Même concept que les template d'applications Web (JSP...)
• Compilé à l'éxécution de l'application
• Hautement extensible

Vue

• Affichée par le navigateur

Modèle

• Contient les données

Controller

Rôle

mettre à la disposition du Scope des variables et des méthodes.

Comment ?

Manipulation de l'objet représentant le modèle

Service

Rôle

Sortir la logique métier de l'IHM

Comment ?

Création de composants réutilisable et injection de dépendance (DI)

Compilation

• En entrée : un template
• En sortie : une vue et un modèle

Deux liens entre scope et vue :

En fait pas tout à fait... spoil

• Filter (formatage des données)
• Form Controls (validation de formulaire)

• Angular markup : {{markup}}
• Directives

Two-way Data Binding

Quand le modèle change, la vue change. Quand la vue change, le modèle change.

Live binding

A n'importe quel moment, si la valeur change, le DOM est mis à jour. Et vice-versa.

Portée limitée

Modèle découpé en scopes

<div ng-app ng-init="qty=1;cost=2">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="cost">
  </div>
  <div>
    <b>Total:</b> {{data_13}}
  </div>
</div>		

Rôle :

• Restriction du scope à une portion de DOM (au plus large : Application (ng-app))
• Manipulation de l'objet scope

Lien avec le DOM :

Directive ng-controller

Que se passe t-il ?

• Nouvelle instance de Controller
• Mise à disposition (par injection) d'un nouveau objet scope ($scope)

A utiliser pour :

• Initialiser le scope
• Lui ajouter des comportements

<div ng-app ng-controller="xposeDemoCtrl">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="cost">
  </div>
  <div>
    <button ng-click="demo_function()">Go</button>
  </div>
</div>		

Rôle

Organiser et partager du code métier sur toute l'application

Les services sont :

• Instanciés paresseusement
• Des singletons

Angular fournit quelques services ($http pour les requêtes AJAX par exemple), il est possible d'en écrire soit-même.

Angular c'est aussi...

• Des tests unitaires et de bout en bout
• Des filtres de formatage des données
• Une biliothèque de comportements riche et extensible
• Une grande modularité
• Une manipulation du DOM très encadrée
• Beaucoup de magie

Angular vous permet de :

• Disposer d'un modèle MVC sur le client
• Construire des applications complètes
• Réutiliser votre code
• Bénéficier des avantages de l'architecture AJAX
• Disposer d'un très grosse et croissante communautée

Merci pour votre attention

Si vous avez des questions...

Pour aller plus loin :

En ordre décroissant d'imbuvabilité

• https://docs.angularjs.org
• Vidéos ng-conf
• https://egghead.io/
• https://docs.angularjs.org/tutorial
• L'Internet