1 : meilleur HTML

• vues en HTML amélioré
• compilateur HTML

• data-binding bidirectionnel
  • exemple “The Basics” sur angularjs.org
  • exemple “Add Some Control” sur angularjs.org
• on n’écrit que la logique de présentation
  • pas de manipulation de DOM
  • pas de gestion d'événements
• validation en HTML
  • exemple “Wire up a Backend” sur angularjs.org

2 : directives

• directives : nouveaux éléments et attributs dans les vues HTML
• AngularJS est le moteur, pour développer les composants dont on a besoin
• exemple “Create Components” sur angularjs.org

<div ng-app="googleMap">
    <map id="map_canvas1" zoom="12" center="{lat:-26.0833,lon:28.2500}" 
         maptype="roadmap" scrollwheel="false"></map>
    <map id="map_canvas2" zoom="8" center="{lat:-26.0833,lon:28.2500}" 
         maptype="satellite" scrollwheel="true"></map>
</div>

3 : structure de l'application

• pattern MVVM (Model - View - View Model)
• modules et services
• injection de dépendances

angular.module('MyServiceModuleDI', [])
       .factory('notify', function($window) {
    var msgs = [];
    return function(msg) {
        msgs.push(msg);
        if (msgs.length == 3) {
            $window.alert(msgs.join("\n"));
            msgs = [];
        }
    };
});
 
function myController($scope, notify) {
    $scope.callNotify = function(msg) {
        notify(msg);
    };
}

4 : tests unitaires

• les contrôleurs sont de simples constructeurs JS sans lien avec les vues
• aucun état global
• module ngMock ($httpBackend)

describe('PhoneCat controllers', function() {
    describe('PhoneListCtrl', function() {
        var scope, ctrl, httpMock;

        beforeEach(inject(function($httpBackend, $rootScope, $controller) {
            httpMock = $httpBackend;
            httpMock.expectGET('phones/phones.json').
                     respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);

            scope = $rootScope.$new();
            ctrl = $controller(PhoneListCtrl, {$scope: scope});
        }));

        it('should create "phones" model with 2 phones fetched from xhr', function() {
            expect(scope.phones).toBeUndefined();
            httpMock.flush();

            expect(scope.phones).toEqual([{name: 'Nexus S'},
                                          {name: 'Motorola DROID'}]);
        });

        it('should set the default value of orderProp model', function() {
            expect(scope.orderProp).toBe('age');
        });
    });
});

5 : tests fonctionnels

• DSL concis
• gestion automatique de l'asynchronisme

describe('PhoneCat App', function() {
    describe('Phone list view', function() {

        beforeEach(function() {
            browser().navigateTo('../../app/index.html');
        });

        it('should filter the phone list as user types into the search box', function() {
            expect(repeater('.phones li').count()).toBe(20);
            input('query').enter('nexus');
            expect(repeater('.phones li').count()).toBe(1);
            input('query').enter('motorola');
            expect(repeater('.phones li').count()).toBe(8);
        });

        it('should be possible to control phone order via the drop down select box', function() {
            input('query').enter('tablet'); //let's narrow the dataset to make the test assertions shorter
            expect(repeater('.phones li', 'Phone List').column('phone.name')).
                    toEqual(["Motorola XOOM\u2122 with Wi-Fi", "MOTOROLA XOOM\u2122"]);
            select('orderProp').option('Alphabetical');
            expect(repeater('.phones li', 'Phone List').column('phone.name')).
                    toEqual(["MOTOROLA XOOM\u2122", "Motorola XOOM\u2122 with Wi-Fi"]);
        });
    });
});

6 : outils

• $http : requêtes XMLHttpRequest ou JSONP
  • parse automatiquement les réponses en JSON

function PhoneListCtrl($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
        $scope.phones = data;
    });
}

• $resource : accès simplifié à des ressources RESTful
  • ajout automatique de méthodes $get, $save, $query, $delete

var User = $resource('/user/:userId', {userId:'@id'});
var user = User.get({userId:123}, function() {
    user.abc = true;
    user.$save();
});

• $route et $location : routage et vues multiples dans une application mono-page, avec support de l'historique du navigateur
  • exemple “Wire up a Backend” sur angularjs.org
• contributions en cours pour des composants UI

7 : autres raisons

• taille réduite
  • module ‘ng’ (core) : 76 Ko
  • module ‘ngResource’ : 15 Ko
  • module ‘ngCookies’ : 4 Ko
  • module ‘ngSanitize’ : 17 Ko
  • pas de dépendances
• rapide : supporte jusqu'à 1000 à 2000 bindings dans une page
• excellent tutoriel, documentation très complète
• développeurs efficaces et disponibles