AngularJS

@salemsaiid

Un framework Javascript MVC pour créer des Single Page Applications CRUD

SONDAGE

. A déjà utilisé un framework JavaScript ?

. A déjà utilisé AngularJS ?

. Est à l'aise avec AngularJS ?

. Framework JS développé par Google

. Première version 2009

. Fondé sur la programmation déclarative

. Utilisation des paternes MVC et MVVM

. L'injection de dépendance

Les frameworks MVC

...

Le succès de AngularJS

Points forts

. Open Source

. Maintenu par Google

. Injection de dépendance

. Couplage faible entre présentation, données, composants métier

. Tests unitaires

. Compatible REST

. Compatible WebSockets

Points faibles

. Encore en évolution

. Ne fonctionne pas sur IE6, et adaptations à faire pour IE7 et IE8

. La gestion des fichiers peut vite devenir chaotique si on ne la maîtrise pas.

. Validation à implémenter côté client

. Possibilité d'être remplacé un jour par DartJS

SPA - Single Page Application

.Une SPA est composée d'une seule page.

.L'utilisateur navigue à travers plusieurs vues tout en restant sur cette même page.

.Le rôle du navigateur est beaucoup plus important que dans un site web classique, c'est lui qui gère toute la logique applicative.

.Le navigateur gère les mécanismes de navigations entre les vues, la récupération des données puis la page à afficher, etc.

.Le serveur fournit les ressources de l'application(templates de vues, fichiers CSS, JS, etc.) et permet d’accéder aux données, via une API web.

◄------------

------------►

◄------------

------------►

API (Back-end)

Database

AngularJS (Front-end)

...

AJAX CALL

GET INFORMATION OR POST TO DB

SEND BACK OBJECT

RETURN JSON OBJECT

Exemple de SPA "Gmail"

Installation

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Mon application</title>
  <script src="angular.min.js"></script>
</head>
<body>
    CONTENU
</body>
</html>

!!?

AngularJS compile le HTML et l'attribut ng-app lui permet justement de repérer quelle partie de la page il doit compiler.

angular.module() pour déclarer un module

var myApp = angular.module('myApp', []);

<html ng-app="myApp">
...
</html>

Le second paramètre permet de déclarer (injection de dépendance $injector) les autres modules dont dépend ce propre module.

Injection de dépendances

(Nous n'avons pas encore évoqué ng-controller, controller et factory, je les utilise simplement pour illustrer le principe.)

MVC Design Pattern (View)

La Vue

C'est ce que voit l'utilisateur final. Elle est générée à partir du template. Le template est le fichier HTML enrichi de certains attributs et balises propres à AngularJS que l'on découvrira au fur et à mesure.

Moteur de template

AngularJS, intègre nativement un moteur de template. Ceci permet d'utiliser des raccourcis syntaxiques pour afficher des variables ou même des entités logiques telles que les boucles et bien d'autres choses encore. Exemple: ng-app, ng-controller, ng-repeat etc.

<div data-ng-app="" data-ng-init="names=['Salem','Hedi','Said']">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li data-ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

MVC Design Pattern (Controller)

. Le controlleur permettant de gérer des variables

. En JavaScript, des variables peuvent être des fonctions

. Les variables d'un controlleur sont contenue dans son $scope

. Le $scope permet l'étanchéité des variables au sein du controlleur

<html ng-app="myApp">
<head>
  <script src="angular.min.js"></script>
  <script type="text/javascript">
  var myApp = angular.module('myApp', []);
  myApp.controller('MyCtrl', function MyCtrl($scope) {
    $scope.welcome = 'Bonjour Salem !!';
  });
  </script>
</head>
<body ng-controller="MyCtrl">
  Réponse : {{ welcome }}
</body>
</html>

MVC Design Pattern (Model)

Le Modèle

. Le modèle selon AngularJS, c'est l'ensemble des scopes de la page.

. C'est en quelque sorte une grande famille au sein de laquelle les variables peuvent intéragir sans risquer de modifier les autres familles de variables.

. On peut se représenter ces familles de scopes sous la forme d'un arbre. La racine de tous les scopes est le $rootScope qui est instancié lorsqu'AngularJS voit la directive ng-app .

. Le $scope permet de faire la jointure entre le Controller et la Vue en permettant de transférer les variables dans les 2 sens.

$scope

. Le $scope n'est rien d'autre que le VueModèle dans le patron MVVM.

Exemple d'une arbre des scopes pour une application

Le data-binding (MVVM)

. Pour afficher une donnée de modèle dans le vue on passe par du binding.

. Le principe de binding est de synchroniser une donnée du modèle et l'affichage de cette donnée.

. Il existe 3 types de bindings gérés par AngularJS.

. Le binding one-way permet de mettre à jour la vue lorsque le modèle change.

. Le binding two-way permet en plus de mettre à jour le modèle lorsque la vue change, par exemple lorsque l'utilisateur modifie la valeur d'un champ d'une formulaire HTML.

. Le binding one-time permet d'afficher une donnée du modèle dans la vue puis de désactiver la relation de binding.

Les services

. Un service est objet javascript qui fournit des méthodes et des propriétés et pouvant être injecté dans un contrôleur, un filtre, une directive ou dans un autre service.

. AngularJS propose plusieurs services, comme $http pour effectuer des raquettes HTTP ou $location pour gérer la navigation.

. Les noms des services AngularJS sont préfixés par le caractère $ pour différencier les services d'AngularJS des autres service.

. Pour utiliser un service, utilisez simplement la fonctionnalité d'injection de dépendance.

module.controller('myController',function($scope, $location){  
   $scope.item = null;
   $location.url('home');
});

. Vous pouvez également créer des services

. La déclaration d'un service dans un module se fait avec les méthode service, factory et provider.

module.provider('providerName', function() { ... });  
module.service('serviceName', function() { ... });  
module.factory('factoryName', function() { ... });

Les Filtres

. La syntaxe pour utiliser un filtre est la suivante: {{ expression | nomDuFiltre }}

. Les filtres peuvent aussi être utilisés avec la directive ng-bind:

. les différents filtre d'AngularJS :

- currency: affiche un nombre au format monétaire.

- date: formate l'affichage d'une date.

- lowercase / uppercase: affiche une chaîne de caractères en minuscules ou en majuscules.

- number: formate l'affichage d'un nombre.

- json: affiche un objet JavaScript sous la forme d'une chaîne de caractère au format JSON

. Avec les filtres, vous pouvez aussi manipuler des listes pour par exemple les ordonner ou les filtrer.

. Cette fonctionnalité des filtres est utilisée avec la directive ng-repeat.

. AngularJS propose par défaut 3 filtres pour manipuler les listes: filter, limitTo et orderBy.

Créer ses propres filtres

myApp.filter('capitalize', function() {
    return function(text) {
        return text[0].toUpperCase() + text.slice(1);
    }
});

{{'jE SuiS Là' | lowercase | capitalize}}   <!-- Je suis là -->

Les directives

. Les directives sont l'une des fonctionnalités les plus puissantes de AngularJS, puisqu’elles permettent d’étendre les capacités du langage HTML, d’apporter de nouvelles fonctionnalités..

. En voici quelques unes :

ng-if, ng-click, ng-repeat, ng-show, ng-hide ...

<div ng-show="user.isLogged">Bonjour {{user.name}}</div>

. En plus de toutes les directives que propose AngularJS(qui sont préfixés par " ng-"), vous pouvez créer les vôtres.

app.directive('avatar', function(){
    return{
        restrict: 'E', //Element (Tag)
        template:
        '<div class="avatar">'+
            '<img ng-src="{{user.picture}}">'+
            '<div class="name">{{user.name}}</div>'+
        '</div>'
    };
});

<div ng-controller="MainCtrl">
    <h1>Exemple de directive</h1>
    <!-- Ceci est une directive de type "Element" -->
    <avatar></avatar>
</div>

Routing

. C'est grâce au module de routing AngularJS (ngRoute) que l'on va pouvoir faire du Single Page Application.

. Il faut tout d'abord, déclarer une vue (ngView) dans l'application.

<div ngView></div>

. Cette vue sera modifiée en fonction de l'url. Si l'application se trouve sur app/index.html alors app/index.html#/detail chargera la route 'detail' avec la vue qui lui sera associée.

myApp.controller('myController', function($scope, $routeParams) {
    console.log($routeParams);
});
myApp.config(function($routeProvider) {
    $routeProvider.
    when('/',{
        template:'Page Principale <a href="#/lorem/toto/detail/122">Lorem</a>'
    }).
    when('/lorem/:name/detail/:id', {
        templateUrl:'views/lorem.html',
        controller: 'myController'
    }).
    otherwise({
        redirectTo:'/'
    })
})

AJAX avec $http

$http : un service bas niveau qui encapsule les appels HTTP via XMLHttpRequest ou JSONP.

$http.get

$http.get("fichier.json").
success(function(data, status) {
	$scope.donnees = data;
}).
error(function(data, status) {
	document.getElementById("erreur").innerHTML = "Erreur lors de l'appel du json"
});

$http.post

$http.post("fichier.php",{info:'hello world'}).
success(function(data, status) {
	document.getElementById("info").innerHTML = "Ca marche !"
}).
error(function(data, status) {
	document.getElementById("erreur").innerHTML = "Erreur lors de l'envoi"
});