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'對象？

謝謝你的幫助！

來源

2014-09-23 Assaf Moldavsky

是啊，這很好...'$ routeParams'讓你'urlData' – calebboyd 2014-09-23 04:11:22

這是我會怎麼做（和我認爲這是做的最接受的方式）。

試想，你在渲染視圖，用戶可以直觀地瞭解一個具體的項目，你必須從服務器項目獲取數據。

我想有一個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進入控制器。

來源

2014-09-23 04:01:17 Josep

謝謝您的答覆，我缺少的事實，你可以注入的依賴到的決心功能。我最初的挫折是因爲除了提供者之外，我無法將任何東西注入配置函數。而提取數據的提供者有點太多了。我也很喜歡你的工廠如何返回一個新的承諾，而不是注入控制器。非常感謝您撰寫本文併爲我解決問題！ – 2014-09-23 04:20:03

@AssafMoldavsky沒問題！任何時候！ ;） – Josep 2014-09-23 04:21:12

總結什麼是被何塞普提供，並把它變成一個最終的解決方案，在這裏如果任何人想知道的相同的代碼...

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

}]);

再次，你何塞普！

來源

2014-09-23 05:03:33

AngularJS路線和Ajax數據的路由變化

回答

相關問題