Présentation Générale

Développé par Google
Versions:
- 1.2.x (stable) support à partir de IE8
- 1.3.x / 1.4.x (stable) support à partir de IE9
- 1.5.0 (release candidate) support à partir de IE9
- 2.0 (beta) support à partir de IE9
Site : https://angularjs.org
Code : https://github.com/angular/angular.js
Documentation
- API : https://docs.angularjs.org/api
- Blog : http://blog.angularjs.org

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'):

    }
});