Comment charger du json dans mon ng-model angular.js ?

Question

J'ai une question qui me semble probablement très évidente, mais je n'ai trouvé de réponse nulle part.

J'essaie simplement de charger des données JSON de mon serveur vers le client. Pour l'instant, j'utilise JQuery pour les charger avec un appel AJAX (code ci-dessous).

<script type="text/javascript">
var global = new Array();
$.ajax({
    url: "/json",
    success: function(reports){
        global = reports;
        return global;
        }
    });
</script>

Il se trouve dans le fichier html. Cela fonctionne jusqu'à présent, mais le problème est que je veux utiliser AngularJS. Or, bien qu'Angular puisse utiliser les variables, je ne peux pas charger le tout dans une variable pour pouvoir utiliser une boucle for each. Cela semble être lié au "$Scope", qui est généralement situé dans le fichier .js.

Le problème est que je ne peux pas charger le code d'autres pages dans un fichier .js. Tous les exemples d'Angular ne montrent que des choses comme ça :

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

Donc, c'est utile, si je A) Je veux taper tout cela à la main, ET B) Si je sais à l'avance quelles sont mes données...

Je ne le sais pas à l'avance (les données sont dynamiques) et je ne veux pas le taper.

Ainsi, lorsque j'ai essayé de modifier l'appel AJAX vers Angular en utilisant $Resource, cela ne semble pas fonctionner. Je n'arrive peut-être pas à comprendre, mais il s'agit d'une requête GET relativement simple pour des données JSON.

tl:dr Je n'arrive pas à faire fonctionner les appels AJAX pour charger des données externes dans un modèle angulaire.

Answer 1

Comme le mentionne Kris, vous pouvez utiliser le $resource pour interagir avec le serveur, mais j'ai l'impression que vous commencez votre voyage avec Angular - j'y étais la semaine dernière - donc je vous recommande de commencer à expérimenter directement avec le service $http service. Dans ce cas, vous pouvez appeler son get méthode.

Si vous avez le JSON suivant

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

Vous pouvez le charger comme ceci

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

Le site get renvoie un promesse objet dont premier argument est un succès et le second une erreur le rappel.

Lorsque vous ajoutez $http comme paramètre d'une fonction Angular fait sa magie et injecte le $http dans votre contrôleur.

J'ai mis quelques exemples ici

• http://plnkr.co/edit/Wuc6M7?p=preview
• https://gist.github.com/3938567

Answer 2

Voici un exemple simple de la façon de charger des données JSON dans un modèle Angular.

J'ai un service web JSON 'GET' qui renvoie une liste de détails sur les clients, à partir d'une copie en ligne de Northwind de Microsoft. SQL Server base de données.

http://www.iNorthwind.com/Service1.svc/getAllCustomers

Il renvoie des données JSON contenant (entre autres) ces champs :

  [
    {
      CompanyName: "Alfreds Futterkiste",
      CustomerID: "ALFKI"
    },
    {
      CompanyName: "Ana Trujillo Emparedados y helados",
      CustomerID: "ANATR"
    },
    {
      CompanyName: "Antonio Moreno Taquería",
      CustomerID: "ANTON"
    },

... et je veux alimenter une liste déroulante avec ces données, pour ressembler à ceci...

Je veux que le texte de chaque élément provienne du champ "CompanyName", et que l'ID provienne des champs "CustomerID".

Comment dois-je m'y prendre ?

Mon contrôleur Angular ressemblerait à ceci :

function MikesAngularController($scope, $http) {

    $scope.listOfCustomers = null;

    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
         .success(function (data) {
             $scope.listOfCustomers = data;
         })
         .error(function (data, status, headers, config) {
             //  Do some error handling here
         });
}

... qui remplit une variable "listOfCustomers" avec cet ensemble de données JSON.

Ensuite, dans ma page HTML, j'utiliserais ceci :

<div ng-controller='MikesAngularController'>
    <span>Please select a customer:</span>
    <select ng-model="selectedCustomer" ng-options="customer.CustomerID as customer.CompanyName for customer in listOfCustomers" style="width:350px;"></select>
</div>

Et c'est tout. Nous pouvons maintenant voir une liste de nos données JSON sur une page web, prête à être utilisée.

La clé du succès se trouve dans la balise "ng-options" :

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

C'est une syntaxe étrange à comprendre !

Lorsque l'utilisateur sélectionne un élément de cette liste, la variable "$scope.selectedCustomer" prend la valeur de l'ID (le champ CustomerID) de cet enregistrement client.

Le script complet de cet exemple se trouve ici :

Données JSON avec Angular

Mike