javascript - 如何创建一个使用 http.get 的工厂并将其传递给 Angular 中的多个 Controller

Question

我有一个 angularjs 应用程序，它变得越来越复杂，所以我需要将其分解为多个 Controller 。我需要创建一个工厂来使用 http.get 获取数据并在几个 Controller 之间共享该数据。我有一个将数据传递到 Controller 的简单版本，但我不确定正在使用 http.get 的工厂。另外，我想确保 http.get 只被调用一次，有关工作示例代码，请参阅 this plunker

var myApp = angular.module('myApp', []);

myApp.factory('Data2', function($http){
  var getDataUrlString = "myhappyurl.com";

  return $http.get(getDataUrlString);
})

myApp.factory('Data', function(){
  return {message:"cool data from factory"}
})

myApp.controller('firstController', function($scope, Data){
  $scope.firstData = Data;
})

myApp.controller('secondController', function($scope, Data){
  $scope.secondData = Data;
})

我认为我与我想要使用“Data2”的工厂非常接近。正如您在我提供的示例代码中看到的那样，仅返回字符串消息的数据工厂工作得很好，我只需要帮助弥合从简单字符串到 http.get 的差距。

Answer 1

您的工厂 Data2 返回一个 promise ，因此您需要在 promise 解决/拒绝后访问响应:-

 myApp.controller('firstController', function($scope, Data2){

   Data2.then(function(response){
        $scope.firstData = response.data;
   }).catch(function(error){
      //handle error
   });
 });

请注意，由于您将 Promise 作为工厂实例返回，并且工厂是单例，因此不会每次都实例化，这意味着您将始终获得相同的 Promise，并且不会一次又一次地调用 url。您可能希望将其包装在函数内，并从工厂返回一个对象，其中包含带有函数引用的键。