Fichier de configuration AngularJS

Version imprimable

27/08/2015, 17h29
Hippocrène

Fichier de configuration AngularJS

Bonjour,

j’aimerais savoir comment on peut récupérer un tableau contenu dans un fichier de configuration et l’insérer dans un ensemble à l’intérieur d’un contrôleur AngularJS.

J’ai besoin de créer un fichier, sûrement appelé config.js (mais je ne sais pas si il doit être « .js » ), et y ajouter une liste de pays que je pourrais rentrer dans un « $scope.pays = [ici la liste des pays]; ». Mais je ne sais comment m’y prendre.

Avez-vous une idée sur le sujet ?
28/08/2015, 10h53
slim

Salut!

Tu peux créer un fichier JSON et le lire avec le service $http.

J’ai créé un fichier « config.json », contenant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
	"option":[
 
	{"id": "1", "name": "A", 
      "countries": [{"id": "1", "name": "FR", 
        "servers": [{"id": "1", "name": "Un"}, 
          {"id": "2", "name": "Deux"},
          {"id": "3", "name": "Trois"}]
      }]},
     {"id": "2", "name": "B",
      "countries": [{"id": "1", "name": "FR",
        "servers": [{"id": "1", "name": "Quatre"}, 
          {"id": "2", "name": "Cinq"}, 
          {"id": "3", "name": "Six"}]}, 
      {"id": "2", "name": "DE", 
        "servers": [{"id": "1", "name": "Sept"}, 
          {"id": "2", "name": "Huit"},
          {"id": "3", "name": "Neuf"}]
      }]}
 
      ]
 
  }

et mon implémentation $http :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var module = angular.module('kibana.panels.custom', []);
 
  module.controller('custom', ['$scope', '$http', function ($scope, $http, dashboard, querySrv, filterSrv) {
 
     $scope.option = {};
 
     $http({
      method: 'GET',
      url: 'config.json'
     })
 
     .success(function (data, status, headers, config) {
    $scope.option = data;
 
    });
 
      $scope.selectedRequest = {};
      $scope.selectedRequest.option = $scope.option[0];
 
}]);

et mon html :

Code:

1
2
3
4
5
6
7
8
<div ng-controller="custom" >
  <select name="site" ng-model="selectedRequest.site" ng-options="site.name for site in option" required></select>
  <select name="country" ng-model="selectedRequest.country" ng-options="country.name for country in selectedRequest.site.countries" required></select>
  <select name="server" ng-model="selectedRequest.server" ng-options="server.name for server in selectedRequest.country.servers"></select>
  <form>
    <input type="submit" value="OK">
  </form>
</div>

Mais ça ne fonctionne pas. Je pense que c’est au niveau du « $scope.option = data; » dans le « .succes » mais c’est aussi dû au « $http ».

28/08/2015, 13h58
slim

Citation:

Envoyé par freddy1492

Mais ça ne fonctionne pas.

Est ce que tu as une erreur ou pas de résultat ?

Est ce que tu passe dans le success ? est-ce que l'instruction $scope.option= data; est exécutée ?
et est-ce que $scope.option ou data contiennent quelque chose ?

En fait, je travaille sur un panneau personnalisé de Banana (une fourche de Kibana), et, quand le code est bon, je peut créer ce panneau dans mon interface de panneaux ; dans le cas contraire, il apparaît dans la liste, mais je ne peux pas le créer. Je suppose donc qu’il ne passe pas le succes. En effet, si je supprime
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $http({ method: 'GET', url: 'config.json' }) .success(function (data, status, headers, config) { $scope.option = data; }); $scope.selectedRequest = {}; $scope.selectedRequest.option = $scope.option[0];
je peux à nouveau créer le panneau.

01/09/2015, 10h44
slim

tu m'excusera mais j'ai rien compris à ta réponse... :?
01/09/2015, 11h14
Hippocrène
Oui, je comprends, le sujet de Banana n’est pas simple (et peu connu).

En fait ma réponse voulait dire que je ne sais pas où est l’erreur, puisque je peux juste savoir si le programme n’a aucune erreur ou une ou plusieurs (par l’intermédiaire de la possibilité ou non de création de mon panneau). Et là, je ne peux pas le créer, ce qui veut dire qu’il y a une erreur (ou plusieurs) dans cette partie :
Code:

1 2 3 4 5 6 7 8 9 $http({ method: 'GET', url: 'config.json' }) .success(function (data, status, headers, config) { $scope.option = data; });
01/09/2015, 11h18
slim

Ajoute la méthode .error pour intercepter l'erreur s'il y en a, ou utilises then qui est mieux !
01/09/2015, 11h31
Hippocrène

Firebug me dit, entre autres « Error: Argument 'custom' is not a function, got undefined » (custom étant le nom de mon panneau) avec les chemins du fichier en dessous.
01/09/2015, 11h40
slim

Citation:

Envoyé par freddy1492

custom étant le nom de mon panneau

Visiblement, "custom" est aussi le nom de ton contrôleur...
01/09/2015, 11h44
Hippocrène

Oui, autant pour moi, en fait c’est le nom de mon contrôleur et de mon panneau…

Le fait est que je dois avoir mal écris la fonction $http. J’en ai vu plusieurs, mais je ne sais pas si je dois utiliser la fonction $http.get, $http.jsonp ou $http.

Code:

1
2
3
4
5
6
 
angular.module('myModule').factory('mainInfo', function($http) { 
    return $http.get('content.json').success(function(data) {
        return data;
    });
});

01/09/2015, 12h06
Hippocrène
Ne puis-je pas la mettre dans mon contrôleur ? car j’ai pas mal de variables dépendantes de ce fichier qui sont dans mon contrôleur (et que je me perd un peu facilement dans l’histoire des communications entre contrôleurs et assimilés).

J’ai testé ainsi (dans mon contrôleur):
Code:

1 2 3 4 5 6 7 $scope.factory = function ($http) { return $http.get('config.json'); } $scope.selectedRequest = {}; $scope.selectedRequest.option = $scope.factory[0];
Le code ne bogue plus, mais il ne m’affiche pas les résultats dans mon select (sûrement dû à mon « $scope.factory[0] » qui ne devrait pas s’écrire exactement comme ça…).

Code:

1
2
3
4
5
6
7
angular.module('app').controller('MyController', MyController);
MyController.$inject = ["$http"];
function MyController($http){
    $http.get('content.json').success(function(data) {
        $scope.content = data;
    });
}

mieux :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
(function() {
    'use strict';
    angular.module('app').controller('MyController', MyController);
    MyController.$inject = ["$http"];
    function MyController($http){
        var my = this;
        $http.get('content.json').success(function(data) {
            my.content = data;
        });
    }
})();

01/09/2015, 14h38
Hippocrène

Merci :) je vais lire le fichier « a potasser absolument par tout dev Angular qui se respecte » (message nº2) pour mieux comprendre comment utiliser ces fonctions, qui me font péter un câble, dans mon contrôleur.

Citation:

Envoyé par slim

mieux :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
(function() {
    'use strict';
    angular.module('app').controller('MyController', MyController);
    MyController.$inject = ["$http"];
    function MyController($http){
        var my = this;
        $http.get('content.json').success(function(data) {
            my.content = data;
        });
    }
})();

Ceci dit, le $http.get doit être dans un service !

02/09/2015, 10h23
Marco46

Citation:

Envoyé par freddy1492

Merci :) je vais lire le fichier « a potasser absolument par tout dev Angular qui se respecte » (message nº2) pour mieux comprendre comment utiliser ces fonctions, qui me font péter un câble, dans mon contrôleur.

Déplaces toute ta logique et toutes tes variables dans des services -> problem solved :mrgreen: