如何在angular中读取json文件

how to read json file in angular?

本文关键字：读取 json 文件 angular      更新时间：2023-09-26

你能告诉我如何读取json文件吗?我能够读取json文件使用控制器，但有办法从工厂读取文件。当我使用工厂得到空竞争..为什么?http://plnkr.co/edit/THdlp00GuSk1NS6rqe5k?p=preview 

app.controller("ctrl",['$scope',"$http",'mainInfo',function(s,$http,mainInfo){
    s.students = [];
    s.guitarVariable = [];
    console.log(mainInfo);
   s.guitarVariable = mainInfo.content;
   /* $http.get('color.json').success (function(data){
        s.guitarVariable = data;
    }).error(function(err){
            alert(err);
        }); */

}])

使用这个代码在控制器我能够得到数据。但使用工厂我得到null

   /* $http.get('color.json').success (function(data){
        s.guitarVariable = data;
    }).error(function(err){
            alert(err);
        }); */

Angular服务是单例的。其目的是为应用程序的其余部分提供一个表示服务的单一对象。您需要将HTTP调用作为将从服务返回的对象的方法。然后将服务注入到控制器中，并从中调用服务方法。下面是一个例子:

服务:

    app.factory('mainInfo', function($http) {
 return {
     //call this method from the controller
    getColors: function() {
       return $http.get('color.json'); //return the promise object. Use in controller
    }
  }
});

控制器:

app.controller("ctrl",['$scope',"$http",'mainInfo',function($http,mainInfo){
  mainInfo.getColors().success(function(data) {
    alert(data);
  }).error(function() {
    alert("Not working");
  });
}]);

对于一个简单的$http获取1个文件，我可能只是在控制器中这样做，但是如果你想使用一个工厂，你想返回$http.get('file.json')，然后使用成功等待承诺解决。

看起来像这个plnkr

对于API，我将使用$resource - video关于资源设置

相关文章：