Question

以前的问题对此并不满意。

大多数AngularJS在线示例和教程似乎总是定义了微小的JSON数组 - 内部 - js代码......

所以我会在一个非常基本的样本中减少代码：

(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"}
    ];
})();

我需要更改阵列＆＃34;产品＆＃34;加载一个json文件 - 在同一个文件夹中;没有外部工具或框架允许，绝对不设置服务器和东西，正如我在之前的一些答案中读到的那样。也没有更改代码，只有＆＃34; =＆＃34;之后的部分，可能使用$ scope和$ http。

你会如何以有效的方式做到这一点？

Answer 1

试试这个：

(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

试试这个你只需要在你的目录中设置你的json并将get请求指向它就像任何其他get一样。希望这可以帮助。 *这纯粹是为了模仿请求，尽管其中一些可能与服务器请求的内容完全相同。

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

您可以使用FileReader来读取本地JSON文件。工作插件：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');
        }
    }
}]);

AngularJS：在同一文件夹中加载JSON文件（本地）

3 个答案: