Question

我无法理解Angular的做法如下......

我配置了路由器，一旦路由发生变化，并且提供了templateUrl，我想进行Ajax调用以获取一些JSON数据。

请注意，我不想等待获取模板，而是使用控制器来获取JSON数据，因为这是两个串行HTTP调用。我想通过获取模板并行获取JSON数据。是否有一个众所周知的模式来做到这一点？

如果我错了，请纠正我...现在，我明白我应该使用我称之为“＃34;数据提供者”的解析器，它将触发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 );
}]);

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

感谢您的帮助!!

Answer 1

我就是这样做的（而且我认为它是最受欢迎的方式）。

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

我会像这样service：

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) {
   ...
}]);

请注意，解决方案是将获取的item注入控制器。

Answer 2

总结一下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 );

}]);

再一次，你约瑟夫！

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

2 个答案: