AngularJS路由和Ajax数据有关路由更改

Question

I am failing to understand the Angular way to do the following...

I have a router configured, once the route is changed, and the templateUrl is supplied I would like to make an Ajax call to fetch some JSON data.

Notice that, i do not want to wait to fetch the template and than use the controller to fetch the JSON data because that is two serial HTTP calls. I want to fetch the JSON data in parallel with fetching the template. Is there a well known pattern to do this?

Correct me if I am wrong... For now, I understand that I should use the resolver in which I would call an a "data provider", which will fire an HTTP call to get the JSON data. This data than will be available to the controller. So something like this...

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

Is this the correct pattern to follow? If so, how can I get access to the 'urlData' object in the resolver?

Thank you for the help!!

Answer 1

This is how I would do it (and what I think that it's the most accepted way to do it).

Imagine that you are rendering a view where the user can visualize one concrete item, and that you have to fetch the data from that item from the server.

I would have a service like this one:

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

My routeProvider would look like this:

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

And the signature of the controller would be like this:

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

Notice that the resolve will be injecting the fetched item into the controller.

Answer 2

To summarize what's been offered by Josep and to put it into one final solution, here is the code in case anyone else was wondering about the same...

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 );

}]);

Once again that you Josep!