Question

我有简单的网络应用，我喜欢从json加载一些数据。目前，数据在我的服务中被硬编码，一切正常。

当我更改服务以从外部json文件加载相同数据时，控制器会在获取某些数据之前呈现视图。

这就是现在的样子：

function() {
var tripsService = function() {

var trips = [{ .... SOME DATA }];

this.getTrips = function() {
            return trips;
        };

};



angular.module('customersApp').service('tripsService', tripsService);
}());

使用$ http.get：

function() {
var tripsService = function() {

 var trips = [];

this.getTrips = function() {

$http.get('trips.json').success(function (data) {
            var trips = data;
            return trips;
           });
     };

};



angular.module('customersApp').service('tripsService', tripsService);
}());

这是我的Plunker：

plnkr

我该怎么做才能改变这个？我已经阅读了有关向我的routeProvider添加resolve属性的内容，但我无法解决问题！

更新：也许我的描述不够精确，我还需要学习更多关于处理数据的知识！来自json的数据应该只加载一次，这样任何视图更改都不会重新加载原始的json文件。

感谢

Answer 1

你必须了解承诺： https://gist.github.com/krakjoe/6437782

在服务中，您应该直接返回对$http - 服务的承诺：

    this.getTrips = function() {
         return $http.get('trips.json').then(function (response) {
            trips = response.data;
            return trips;
          });
    };

在控制器中，您可以调用then - 方法来访问服务中的数据：

    function init() {
        tripsService.getTrips().then(function(trips) {
          $scope.trips = trips;
        })
    }

这是一个更新的Plunker，带有一个工作示例： http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/

Answer 2

如果要在检索内容时加载视图，则确实需要路由解析。

你可以通过。

来做到这一点

$routeProvider
.when("/someRoute", {
    templateUrl: "sometemplat.html",
    controller: "someController",
    resolve: {
        trips: function(tripsService){
            return tripsService.getTrips();
       }
   }
})

这将解决一个名为“跳入控制器”的变量。

您需要将行程添加到控制器依赖项中。

如果一切正常，应该填写来自api的数据。

AngularJS - 控制器在使用$ http时不从服务获取数据

2 个答案: