AngularJS路由和关于路由更改的Ajax数据

我无法理解做以下事情的角度方法

我配置了一个路由器，一旦路由被更改，并且提供了templateUrl，我想进行一个Ajax调用来获取一些JSON数据

注意，我不想等待获取模板，而是使用控制器获取JSON数据，因为这是两个串行HTTP调用。我想在获取模板的同时获取JSON数据。有没有一个众所周知的模式可以做到这一点

如果我错了，请纠正我。。。现在，我知道我应该使用解析器，在其中我将调用一个“数据提供者”，它将触发一个HTTP调用来获取JSON数据。此数据比控制器可用的数据多。所以像这样的事情

app.config(['$routeProvider', 'data', function( routeProvider, dataProvider ) {

  routeProvider.
      when('/reports/:reportName', {
          templateUrl: function( urlData ) {
              return "/some/url/" + urlData.reportName + "/content";
          },
          resolve: {
              reportData: function() {
                  return dataProvider.getData();
              }
          },
          controller: 'reportRoutingCtrl'
      });
}]);
app.controller('reportRoutingCtrl', ['$scope', 'reportData', 'reportName', function( scope, reportData ) {
    console.dir( reportData );
}]);

这是正确的模式吗？如果是这样，我如何才能访问解析器中的“urlData”对象

谢谢你的帮助

我会这样做（我认为这是最被接受的方式）

假设您正在呈现一个视图，其中用户可以可视化一个具体项目，并且您必须从服务器获取该项目的数据

我会有一个

服务

像这样：

services.factory('ItemLoader', ['Item', '$route', '$q',
    function(Item, $route, $q) {
  return function() {
    var delay = $q.defer();
    Item.get({id: $route.current.params.itemId}, function(item) {
      delay.resolve(item);
    }, function() {
      delay.reject('Unable to fetch the item'  + $route.current.params.itemId);
    });
    return delay.promise;
  };
}]);

我的

routeProvider

如下所示：

  .when('/view/:itemId', {
    controller: 'ViewCtrl',
    resolve: {
      item: ["ItemLoader", function(ItemLoader) {
        return ItemLoader();
      }]
    },
    templateUrl:'/views/viewItem.html'
  })

app.controller('ViewCtrl', ['$scope', '$location', 'item',
function($scope, $location, item) {
   ...
}]);

控制器的签名如下：

  .when('/view/:itemId', {
    controller: 'ViewCtrl',
    resolve: {
      item: ["ItemLoader", function(ItemLoader) {
        return ItemLoader();
      }]
    },
    templateUrl:'/views/viewItem.html'
  })

app.controller('ViewCtrl', ['$scope', '$location', 'item',
function($scope, $location, item) {
   ...
}]);

---

请注意，解析将把获取的

项注入控制器。
为了总结Josep提供的内容并将其放入最终解决方案中，下面是代码，以防其他人对相同的内容感到疑惑

services.factory('dataProviderService', ['$route', '$q', '$http', function( $route, $q, $http ) {

    return function() {
        getReportData: function( reportName ) {
            var delay = $q.defer();

            $http({method: 'GET', url: "someURL", params: {
                fileId: "11159",
                reportName: "someName"
            }}).success( function(data, status, headers, config) {

                // this callback will be called asynchronously
                // when the response is available
                delay.resolve( data );

            }).error( function(data, status, headers, config) {

                // called asynchronously if an error occurs
                // or server returns response with an error status.
                delay.reject( data );

            });

            return delay.promise;
        }
    };
}]);
app.config(['$routeProvider', 'data', function( routeProvider, dataProvider ) {

    routeProvider.
        when('/reports/:reportName', {
            templateUrl: function( urlData ) {
                return "/some/url/" + urlData.reportName + "/content";
          },
        resolve: {
            reportName: ['$route', function( route ) {
                return route.current.params.reportName;
            }],
            reportData: ['reportService', '$route', function( reportService, $route ) {
                var reportName = $route.current.params.reportName;
                return reportService.getReportData( reportName );
            }]
        },
          controller: 'reportRoutingCtrl'
    });
}]);
app.controller('reportRoutingCtrl', ['$scope', 'reportData', 'reportName', function( scope, reportData ) {

    console.log( reportName );
    console.log( reportData );

}]);

再一次，你是乔塞普
 是的，那很好
$routeParams
要获取您的
urlData
感谢您的回复，我忽略了一个事实，即您可以向resolve函数中注入依赖项。我最初的挫败感是，除了提供程序之外，我无法向配置函数中注入任何东西。还有一个获取数据的提供者有点太多了。我还喜欢你的工厂是如何返回一个新的承诺，而不是注入控制器。非常感谢你写这篇文章并为我解决了这个问题@阿萨德夫斯基没问题！随时