javascript - 在工厂内获取 json 数据的 Angular 指南

Question

我刚刚开始使用 Angular，我正在构建一个简单的项目管理应用程序，该应用程序从 json 文件加载项目，并在 ListView 中显示项目。我也将允许用户编辑和创建新数据，但我似乎无法完成第一步。

当我直接将数据加载到列表 Controller 中时，它工作得很好。在阅读最佳实践时，似乎您不应该直接与 Controller 中的 json 文件进行通信，而应该在工厂内处理这些事情(如果我弄错了，请告诉我)。但我无法让它工作。这是我的代码:

var app = angular.module('itemsApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      controller:'ListCtrl',
      templateUrl:'list.html'
    })
    .when('/edit/:itemId', {
      controller:'EditCtrl',
      templateUrl:'detail.html'
    })
    .when('/new', {
      controller:'CreateCtrl',
      templateUrl:'detail.html'
    })
    .otherwise({
      redirectTo:'/'
    });
})

app.factory('ItemsFactory',function($http){
  return {
    getItems: function() {
      return $http.get('js/items.json')
      .then(function(res){
        return res.data;
      });
    }
  };
});

app.controller('ListCtrl', function($scope, $http, ItemsFactory) {
  $http.get('js/items.json')
    .then(function(res){
      $scope.items = res.data;
  });
});

Controller 工作正常，就像我在这里一样，但是，当我尝试将 $scope.items 设置为 ItemsFactory.getItems(); 的结果时，我什么也没得到。有什么想法吗？

Answer 1

在 then Promise 方法中返回不会向 getItems 的调用者返回任何内容(就像在任何其他回调中一样)。我建议您以这种方式处理这种情况:

app.factory('ItemsFactory',function($http){
  return {
    getItems: function() {
      return $http.get('js/items.json');
    }
  };
});

app.controller('ListCtrl', function($scope, ItemsFactory) {
  ItemsFactory.getItems().then(function(res){
    $scope.items = res.data;
  });
});

希望有帮助。达里奥