octobre 2015 – Etienne Crinier

Pour rÃ©aliser une application angularjs, il est trÃ¨s important de comprendre les diffÃ©rences entre $scope et $rootScope. Cela permettra par la suite de mieux comprendre la gestion dÂ´Ã©vÃ©nement.

$rootScope

le $rootScope comme son nom l’indique fait rÃ©fÃ©rence Ã la racine. En effet, il y en un seul par application. Il va nous permettre de pouvoir transmettre des variables et Ã©vÃ©nements entre nos diffÃ©rents controllers.

$scope

Le $scope quand Ã lui est instanciÃ© pour chaque controller. Il va permettre de communiquer avec les vues et directives filles.

Pour mieux comprendre, il suffit d’observer ce schÃ©ma

Du coup si je dois communiquer d’un controller Ã un autre, je vais devoir utiliser le $rootScope. En revanche si je souhaite dialoguer avec les enfants d’un controller je vais plutÃ´t utiliser le $scope.

Attention Ã ne pas trop utiliser le $rootScope pour stocker des Ã©lÃ©ments au risque d’alourdir votre application.

Je vais finir cette article par la gestion des Ã©vÃ©nements, cela permettra de comprendre l’utilisation que l’on peut avoir du $rootScope.

angular.module('app')
    .controller('ctrl1', ctrl1);


function ctrl1() {
  
    //Jamais appelÃ© par le ctrl2
    $scope.$on('saveEvent',reload);
    
    //AppelÃ© Ã  chaque appel de la mÃ©thode saveButtonClick sur ctrl2
    $rootScope.$on('rootSaveEvent',reload); 
               
    function reload() {       
    }
}


angular.module('app')
    .controller('ctrl2', ctrl2);

ctrl2.$inject = ['$rootScope', '$scope'];

function ctrl2($rootScope, $scope) {
    
    $scope.saveButtonClick = saveButtonClick;
    
    function saveButtonClick() {
        //Cet Ã©vÃ©nement pourra Ãªtre capter uniquement par les enfants du controller. Impossible Pour mon controller 1 de capter l'Ã©vÃ©nement
        $scope.$emit('saveEvent',$scope.person);
        
        $rootScope.$emit('rootSaveEvent', $scope.person);
    }
    
}

angular.module('app')

.controller('ctrl1', ctrl1);

function ctrl1() {

//Jamais appelÃ© par le ctrl2

$scope.$on('saveEvent',reload);

//AppelÃ© Ã chaque appel de la mÃ©thode saveButtonClick sur ctrl2

$rootScope.$on('rootSaveEvent',reload);

function reload() {

}

angular.module('app')

.controller('ctrl2', ctrl2);

ctrl2.$inject = ['$rootScope', '$scope'];

function ctrl2($rootScope, $scope) {

$scope.saveButtonClick = saveButtonClick;

function saveButtonClick() {

//Cet Ã©vÃ©nement pourra Ãªtre capter uniquement par les enfants du controller. Impossible Pour mon controller 1 de capter l'Ã©vÃ©nement

$scope.$emit('saveEvent',$scope.person);

$rootScope.$emit('rootSaveEvent', $scope.person);

}

A noter qu’ici j’ai injectÃ© le $scope dans mes controllers. C’est une pratique Ã Ã©viter. On prÃ©fÃ©rera exposer les mÃ©thode du controller via this.

$scope.saveButtonClick = saveButtonClick;
//devient
this.saveButtonClick = saveButtonClick

$scope.saveButtonClick = saveButtonClick;

//devient

this.saveButtonClick = saveButtonClick

Tout d’abord, pourquoi vouloir crÃ©er des modÃ¨les d’objet ?
Pour moi il y a 3 objectifs :
– Structurer le code
– ne pas avoir besoin d’attendre l’Ã©xÃ©cution du code pour connaÃ®tre le contenu de l’objet.
– Ajouter des comportements Ã un objet.

Pour se faire, je crÃ©e une factory comme suit :

angular.module('app.models')
    .factory('Person', PersonFacto);

function PersonFacto() {
    //DÃ©finiton du constructeur
    function Person() {
        //Initialisation des propriÃ©tÃ©s publiques
        this.nom = null;
        this.prenom = null;
        this.email = null;

        //CrÃ©ation d'un champ privÃ©
        var toto = '';
        //MÃ©thode publique
        this.getFullName = function () {
            return this.prenom + ' ' + this.nom;
        }

        //MÃ©thode privÃ©e
        function updateToto() {
            toto = 'toto';
        }
    }
    return Person;
}

angular.module('app.models')

.factory('Person', PersonFacto);

function PersonFacto() {

//DÃ©finiton du constructeur

function Person() {

//Initialisation des propriÃ©tÃ©s publiques

this.nom = null;

this.prenom = null;

this.email = null;

//CrÃ©ation d'un champ privÃ©

var toto = '';

//MÃ©thode publique

this.getFullName = function () {

return this.prenom + ' ' + this.nom;

}

//MÃ©thode privÃ©e

function updateToto() {

toto = 'toto';

}

return Person;

}

On comprend assez vite comment enrichir nos objets en utilisant cette mÃ©thode.
Pour aller plus loin, je rajoute un paramÃ¨tre « data » Ã mon constructeur dans le but de pouvoir initialiser mes valeurs d’objet. Voici l’exemple :

angular.module('app.models')
    .factory('Person', PersonFacto);

function PersonFacto() {
    //DÃ©finiton du constructeur
    function Person(data) {
        //Initialisation des propriÃ©tÃ©s publiques
        this.nom = null;
        this.prenom = null;
        this.email = null;
        
        angular.extend(data,this);

        //CrÃ©ation d'un champ privÃ©
        var toto = '';
        //MÃ©thode publique
        this.getFullName = function () {
            return this.prenom + ' ' + this.nom;
        }

        //MÃ©thode privÃ©e
        function updateToto() {
            toto = 'toto';
        }
    }
    return Person;
}

angular.module('app.models')

.factory('Person', PersonFacto);

function PersonFacto() {

//DÃ©finiton du constructeur

function Person(data) {

//Initialisation des propriÃ©tÃ©s publiques

this.nom = null;

this.prenom = null;

this.email = null;

angular.extend(data,this);

var toto = '';

this.getFullName = function () {

return this.prenom + ' ' + this.nom;

}

function updateToto() {

toto = 'toto';

}

return Person;

}

Cette usage permet de mapper les objets provenant d’un dataservice :

angular.module('app.services')
    .factory('dataservice', dataservice);

dataservice.$inject = ['$http', 'Person'];

function dataservice() {
    
    function getPeople() {
        return $http.get('/api/getPeople')
        			.then(function(response) {
            if (response != null) {
                var peoples = response.data.map(function(d) {
                    return new Person(d);
                });
                return peoples;
            }
        });
    }    
}

angular.module('app.services')

.factory('dataservice', dataservice);

dataservice.$inject = ['$http', 'Person'];

function dataservice() {

function getPeople() {

return $http.get('/api/getPeople')

.then(function(response) {

if (response != null) {

var peoples = response.data.map(function(d) {

return new Person(d);

});

return peoples;

}

});

}

Etienne Crinier

Blog technique

Mois : octobre 2015

$scope vs $rootScope

$rootScope

$scope

CrÃ©ation de modÃ¨le objet