AngularJS

Factory

Il faut voir les factories comme des fonctions javascript que l'on peut utiliser n'importe où dans l'application angularJS.

La création d'une factory se fait généralement dans un fichier javascript externe que l'on ajoute dans le dossier /js/factories (n'oubliez d'ajouter l'appel du fichier javascript dans le fichier index.html).

  1. angular.module('myApp').factory('nomDeLaFactory', function(){
  2. });

Après avoir créé la factory, il faut ajouter son nom dans les controllers qui l'utiliseront.

  1. angular.module('myApp').controller('nomDuController', ['nomDeLaFactory', function(nomDeLaFactory){
  2. }]);

Prenons pour exemple une liste d'animaux (dans un fichier JSON) que l'on souhaite modifier en fonction de leur nombre de pattes.
La liste devra se mettre à jour en fonction de la valeur d'un select dont les options sont créées avec les éléments du fichier JSON.

La factory :

  1. angular.module('myApp').factory('infoAnimaux', ['$http', 'fonctionsBases', function($http, fonctionsBases){
  2. return{
  3. /*fonction de récupération du fichier json*/
  4. recupData: function(url){
  5. return $http.get(url);
  6. },
  7. /*fonction de récupération du nombre de pattes à afficher dans le select*/
  8. recupNbrPattes: function(data, nbr){
  9. var retour = [];
  10. for(var key in data){
  11. if(!fonctionsBases.in_array(data[key].pattes, retour, true)){
  12. retour.push(data[key].pattes);
  13. }
  14. }
  15. return retour;
  16. },
  17. /*fonction de récupération du animaux en fonction de leur nombre de pattes*/
  18. recupAnimauxPattes: function(data, nbr){
  19. var retour = [];
  20. for(var key in data){
  21. if(data[key].pattes == nbr){
  22. retour.push(data[key]);
  23. }
  24. }
  25. return retour;
  26. }
  27. }
  28. }]);

Le controller :

  1. angular.module('myApp').controller("factory",['$scope', 'infoAnimaux', function($scope, infoAnimaux){
  2. var animaux;
  3. infoAnimaux.recupData("datas/animaux.json").
  4. success(function(data){
  5. animaux = data;
  6. $scope.pattes = infoAnimaux.recupNbrPattes(animaux);
  7. $scope.animauxAffiche = animaux;
  8. });
  9. $scope.changePatte = function(){
  10. $scope.animauxAffiche= infoAnimaux.recupAnimauxPattes(animaux, $scope.nbrPatte);
  11. }
  12. }]);

La vue :

  1. <p>Nombre de pattes <select ng-model="nbrPatte" ng-options="patte as patte for patte in pattes" ng-change="changePatte()">
  2. <option value="" selected>--Votre choix--</option>
  3. </select></p>
  4. <ul><li ng-repeat="animal in animauxAffiche | orderBy:'text'">{{animal.text}}</li></ul>

Exemple

Affichage des animaux en fonction de leur nombre de pattes.

Nombre de pattes

  • araignée
  • chat
  • chien
  • loup
  • ours
  • singe