javascript - 启动 Angular Controller 的更好方法

Question

我有一个编码风格问题。给出下面的代码，它使用 http 服务检索数据，然后使用 Controller 执行该服务/工厂。看起来在 Controller 末尾调用函数 makePromise() 并不是“正确”的做事方式。它可以工作，但是有更好的方法来执行这段代码吗？也许是最佳实践？我只是无法想象在 Controller 末尾有 10 个左右的执行语句......这似乎不太正确。我只是在寻找更优雅的解决方案。

var app = angular.module('app', []);
app.factory('DataService', function($http, $q) {
return {
getData: function() {
  return $http.get('http://ergast.com/api/f1/2013/driverStandings.json')
    .then(function(response) {
      if (typeof response.data == 'object') {
        return response.data;
      } else {
        return $q.reject(response.data);
      }
    }, function(response) {
      return $q.reject(response.data);
    })
  }
 }
});

app.controller('MainCtrl', function($scope, DataService) {
$scope.driversList = [];
var makePromise = function() {
DataService.getData()
  .then(function(data) {
    //console.log(data.MRData.StandingsTable.StandingsLists[0].DriverStandings)
    $scope.driversList = data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
  }, function(error) {
    console.log('error')
  })
}
//THIS IS MY CONCERN HERE...
makePromise();
})

Answer 1

您不必将其包装在函数中。很多时候我的代码看起来与此类似。

DataService.getData()
 .then(function(data) {
//console.log(data.MRData.StandingsTable.StandingsLists[0].DriverStandings)
  $scope.driversList = data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
}, function(error) {
 console.log('error')
})

有两种选择，第一种是在 html 中使用 ng-init="loadStuff()"。更干净的解决方案可能是在 UI-Router 中使用 Resolve。因此，您在路线上的加载数据会发生变化，并且可能会在进行 GET 时显示加载程序。