API、.factory、.controller 错误答案

【问题标题】：API, .factory, .controller errorAPI、.factory、.controller 错误
【发布时间】：2015-11-21 10:28:23
【问题描述】：

我尝试从json file 获取数据。这是JS代码：

var app = angular.module('ForecastApp', []);
console.log('in app');

//fetches weather data from service
  var res ="";
app.factory('forecast', ['$http', function($http) {

$http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')
          .success(function(data) { console.log(data); res = data; })
          .error(function(err) { console.log(err); res = err;});
          return res;
}]);

//Save weather data into $scope.fiveDay
app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {
      $scope.fiveDay = res;
      console.log('in controller');
    }]);

然后我在主 HTML 文件中运行：

<body ng-app="ForecastApp">
    <div class="main" ng-controller="MainController">
      ...
            <h1>{{ fiveDay.city_name }}</h1>
...

fiveDay.city_name 不返回任何内容，它只是显示空白。 fiveDay 的值应该是res，这是一个对象，对吧？我不明白为什么fiveDay.city_name 不是纽约。

【问题讨论】：

尝试创建 MainController 的引用，然后显示 city_name。比如ng-controller="MainController as main" 然后{{main.fiveDay.city_name}}

标签： javascript json angularjs api rest

【解决方案1】：

我提供了一个简单的解决方案，只是在控制器中使用 $http 服务

var app = angular.module('ForecastApp', []);
console.log('in app');


//Save weather data into $scope.fiveDay
app.controller('MainController', ['$scope', '$http', function($scope, $http) {
      $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')
          .success(function(data) { console.log(data); $scope.fiveDay = data; })
          .error(function(err) { console.log(err);});
         
      console.log('in controller');
    }]);

<html>

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="ForecastApp">
    <div class="main" ng-controller="MainController">
      ...
            <h1>{{ fiveDay.city_name }}</h1>
            </div>
  </body>

</html>

在这里查看 plunker demo

【讨论】：

成功了，谢谢！现在它显示“纽约”。你能告诉我我做错了什么吗？
如果你看不到，我猜你不熟悉异步处理和承诺。对您的问题的简短回答是：您的预测服务在解决 $http.get 之前返回 res。我建议您阅读有关 javascript 中的异步处理的更多信息，因为它对 Web 编程非常重要。

【解决方案2】：

如果您仍想使用自定义服务，这是一种方法。

app.factory('forecastService', ['$http', function($http) {
  return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json');
}]);

app.controller('MainController', ['$scope', 'forecastService', function($scope, forecastService) {
  forecastService.then(function(success) { $scope.fiveDay = success.data});
}]);

您的服务在这里返回一个承诺，您可以在其中使用.then 方法。这样控制器就不需要知道有关 URL 的任何信息。

在使用 Angular 时，您不希望脚本中存在任何全局变量。这正是角度服务/工厂的原因。它们提供了一种在多个控制器和其他服务之间共享数据的方法。

这是plunker showing the action。

【讨论】：

感谢您的解决方案和提示。