AngularJS: charger le fichier JSON dans le même dossier (localement)

Question

Les questions précédentes n'ont pas été satisfaisantes à ce sujet.

La plupart des AngularJS exemples et des tutoriels en ligne semblent toujours avoir de minuscules tableaux JSON définis -inside- le code js ...

donc je vais réduire le code dans un échantillon très basique:

(function(){ 
    var app = angular.module('store', [ ]); 

    app.controller('StoreController', function(){ 
     this.product = products; 
    }); 

    var products = [ 
     {name: "Linux Mint", origin: "Ireland"}, 
     {name: "Ubuntu", origin: "Isle of Man"}, 
     {name: "OpenSUSE", origin: "Germany"}, 
     {name: "Fedora", origin: "USA"} 
    ]; 
})(); 

J'ai besoin de changer le tableau "produits" pour charger un fichier json -dans le même dossier-; pas d'outils externes ou des cadres autorisés et absolument pas de configurer les serveurs et les choses que j'ai lu dans une réponse précédente. Pas de changement de code non plus, seulement la partie après le "=", en utilisant peut-être $ scope et $ http.

Comment le feriez-vous de manière fonctionnelle?

Answer 1

Essayez ceci:

(function(){ var app = angular.module('store',[]); app.controller('StoreController',['$http',function($http){ this.product=$http.get('file.json').success(function(resp){ return resp.data; }); }]); })();

Answer 2

Essayez ce que vous avez juste besoin d'avoir votre configuration JSON dans votre répertoire et pointer la demande de Familiarisez comme tout autre get. J'espère que cela t'aides. * Ceci est uniquement destiné à imiter une requête, bien que certaines de ces requêtes puissent être écrites de la même manière pour une requête de serveur.

function ExampleController(exampleSerivce) { 
    var vm = this; 
    exampleSerivce.getPosts().then(function(response) { 
    vm.posts = response; 
    }); 
} 

function exampleSerivce() { 
    var Posts = this, 
    URLS = { 
     FETCH: '/posts.json' 
    }, 
    currentPostName, 
    allPosts; 

    Posts.getPosts = function() { 
    return $http.get(URLS.FETCH).then(function(response) { 
     return response.data 
    }); 
    }; 
} 

Answer 3

Vous pouvez utiliser FileReader pour lire un fichier JSON local. Travailler Plunk: http://plnkr.co/edit/LtYOyeyxJncnmBGw5YRp?p=preview

app.controller("MainCtrl", ["$scope", function($scope) { 
    $scope.jsonString = ""; 

    $scope.readFromFile = function() { 
     if(FileReader) { 
      var input = document.getElementById('myFile'); 
      var file = input.files[0]; 

      var fr = new FileReader(); 
      fr.onload = function(e) { 
       $scope.jsonString = e.target.result; 
       $scope.$apply(); 
      } 

      fr.readAsText(file); 
     } else { 
      window.alert('FileReader is not found, sorry'); 
     } 
    } 
}]);