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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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; } |
Cette usage permet de mapper les objets provenant d’un dataservice :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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; } }); } } |
A la sortie du « getPeople », on a donc un tableau de « Person » qui pourra être utilisé dans les vues.