Discussion :

[webkoros]

Bonjour,
dans un app AngularJS, a de nombreux endroits je dois soit extraire ou inserer de nombreuses information de profil utilisateur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$scope.checkPros = function() {
                fieldValuesService.firstName = $scope.firstName;
                fieldValuesService.lastName = $scope.lastName;
                fieldValuesService.email = $scope.email;
                fieldValuesService.phone = $scope.phone;
                fieldValuesService.fax = $scope.fax;
                fieldValuesService.company = $scope.company;
                fieldValuesService.category = $scope.category;
                fieldValuesService.subCat = $scope.subCat;
                fieldValuesService.street = $scope.street;
                fieldValuesService.zip = $scope.zip;
                fieldValuesService.city = $scope.city;
                fieldValuesService.state = $scope.state;
                fieldValuesService.country = $scope.country;
                fieldValuesService.notes = $scope.notes;

Vous voyez que dans ce cas, je prend les infos rentrés dans un formulaire, et je les stoque dans un service. Il y a aussi l'autre cas de figure: prendre les info du service et les injecter dans un formulaire ou autre. A chaque fois j'ai un code similaire ce qui est vraiment ennuyeux quand je dois par exemple rajouter un nouveau champ dans le formulaire: il faut que je retrouve tous les endroits ou il y a ce code, et l'inserer.
Comment feriez vous pour que ces champs formulaire puissent etres inscrits dans le code à un endroit unique, et reutilisés ensuite plus simplement, que ce soit pour y ecrire, lire, ou les vider ?

[SylvainPV]

Salut,

Je rouille un peu en Angular, mais pourquoi ne pas placer le service dans le scope parent de l'application ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$rootScope.fieldValuesService

[Marco46]

Comment feriez vous pour que ces champs formulaire puissent etres inscrits dans le code à un endroit unique, et reutilisés ensuite plus simplement, que ce soit pour y ecrire, lire, ou les vider ?

Stockes l'instance de ton service dans le scope au lieu de stocker chaque variable, ça sera plus lisible et plus rapide (un seul watcher). En d'autres termes stocke l'objet plutôt que de faire valeur par valeur.

Ensuite dans tes vues tu appelles l'instance et ton membre au lieu d'appeler directement le membre. (monIstance.monMembre au lieu de monMembre)

C'est donc dans tes vues que tu définis la lecture/écriture ce qui est beaucoup plus cohérent par rapport à la philosophie du framework.

@SylvainPV

Pas terrible comme pratique, cela signifie que tous les scopes de l'application auront accès à ce service. De plus je ne vois pas en quoi cela résout sa problématique.

[devyreham]

une implementation possible du post Marco64

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.factory('fieldService',[function () {
return {
 valuate: function (obj) {
/*il suffira de changer le code ici, possibilité aussi d'utiliser Object.getOwnPropertyNames(obj) au lieu de lister tous les champs */
    this.firstName = obj.firstName;
    this.lastName = obj.lastName;
    this.email = obj.email;
    this.phone = obj.phone;
    this.fax = obj.fax;
    this.company = obj.company;
    this.category = obj.category;
    this.subCat = obj.subCat;
    this.street = obj.street;
    this.zip = obj.zip;
    this.city = obj.city;
    this.state = obj.state;
    this.country = obj.country;
    this.notes = obj.notes;
    return this;
}
}]);
/*utilisation: passser un objet a convertir au lieu de passer le scope*/
$scope.myOtherStuff = fieldService.valuate($scope.myForm);

[Marco46]

En plus simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
module.factory('fieldService',[function () {
return {
 valuate: function (obj) {
 
    this.obj = obj;
 
    return this;
}
}]);