AngularJS

Single Page Applications

Emmanuel DEMEY

Consultant & Formateur Web

Zenika Lille

       @EmmanuelDemey

Web / Domotique

Présentation Générale

 

Présentation Générale

 

  • AngularJS est un framework "full stack" : il intègre l'ensemble des composants nécessaires à la réalisation d'applications riches
    • Routage par URL 
    • Contrôleurs Javascript
    • Templates HTML
    • Directives (composants personnalisés)
    • Gestion des ressources REST
    • IOC
    • Tests unitaires et de bout en bout
    • ...

Points Forts

 

  • JavaScrit Pur
  • Framework Complet
  • Testabilité
  • Binding Automatique
  • Bonne Documentation
  • Énorme Communauté
  • Architecture

Points Faibles

 

  • Routage
  • Internationnalisation
  • Certaines API un peu complexe
  • Problèmes de performance possible
  • Navigateurs supportés (pas IE8)
  • Angular 2

Controller

Fonction Javascript contenant les données et la logique d'affichage


<div ng-controller='MainCtrl'>
    {{ hello }}

    <button ng-click="addToBasket()">
        Add To Basket
    </button>
</div>

app.controller('MainCtrl', function($scope){

    $scope.hello = 'Hello World';

    $scope.addToBasket = function(){
        alert('clicked')
    }    

});

Service

Un service représente un ensemble cohérent de fonctionnalités


app.controller('MainCtrl', 
    function($scope, BtwinService){
    
        $scope.hello = 'Hello World';
    
        $scope.addToBasket = function(){
            BtwinService.addToBasket();
        }    
    });

app.service('BtwinService', function($http){

    this.addToBasket = function(){

        return $http.post('/api/basket'):

    }
});

Directive

Élément pour surcharger les templates de votre application

<button ng-click="addToBasket()">
    Add To Basket
</button>

Directive

Plus de 50 directives dans le framework :

  • Gestion des évènements
  • ngStyle / ngClass
  • Validateurs
  • ngRepeat / ngIf / ngShow
  • Gestion des formulaires

Directive

app.directive('productItem', function(){

    return {
        
        scope: {
            'product': '='
        },   
        template: '<article>' + 
                    '<h2>{{product.name}}</h2>' +
                    '<button ng-click="addToBasket()">Add To Basket</button>'
                  '</article',

        controller: function($scope){
            $scope.addToBasket = function(){
               ...
            }
        }
    }
});
<product-item product="{name: 'bike'}"></product>

Filter

Élément permettant de formatter une donnée directement depuis le template

{{ variable | filter }}
<ul ng-controller="SampleCtrl">


    <li ng-repeat="product in products | filter:'sold' | orderBy:'name' | limitTo:5 ">
        
        {{product}}

    </li>

</ul>
app.controller('SampleCtrl', function($scope){

    
    $scope.products = [

        { name: 'bike', tags: ['sold'] },
        { name: 'shoes', tags: [] },
        { name: 'tshirt', tags: [] },
        { name: 'jacket', tags: ['sold'] },
        { name: 'jersey', tags: ['sold'] },
    ];

});

Filter

//{{ value | case:true }}
app.filter('case', function(){

    return function(value, upper){
        
        if(upper) return value.toUpperCase();

        return value.toLowerCase();

    }
});

Module

Groupement logique de services, contrôleurs, directives et filtres

var app = angular.module('app', ['btwin'])
app.controller('MainCtrl', 
    function($scope, BtwinService){
    
        $scope.hello = 'Hello World';
    
        $scope.addToBasket = function(){
            BtwinService.addToBasket();
        }    
    });
var btwin = angular.module('btwin', []);
btwin.service('BtwinService', function($http){

    this.addToBasket = function(){

        return $http.post('/api/basket'):

    }
});

Démo

Autres technos...

Des questions ?