angularjs如何使用resolve

最新推荐文章于 2025-07-03 11:43:26 发布

原创最新推荐文章于 2025-07-03 11:43:26 发布 · 517 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #resolve #路由

本文介绍如何在AngularJS应用中使用路由配置加载特定的数据，并展示如何在控制器中使用这些数据来更新视图。具体包括定义路由状态、设置URL、指定模板及控制器，并通过resolve属性异步获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

１．路由中定义：

.state('index.restaurant.restaurant-reports.totalPurchase', {
url: '/totalPurchase',
templateUrl: 'template/restaurantReports/totalPurchase.html',
controller: 'totalPurchaseCtrl',
resolve: {
restaurant_sales_info: function ($http, $sessionStorage) {
return $http.get(WEB_DOMAIN + '/api/Order/restaurantSalesLineChart', {
params: {
'user_id': $sessionStorage.user_info.user_id,
'year': "2017"
}
});
}
}
})

２．控制器中引用：

supplyAdmin.controller("totalPurchaseCtrl", ['$scope', '$http', '$stateParams', '$sessionStorage','restaurant_sales_info',
function ($scope, $http, $stateParams, $sessionStorage,restaurant_sales_info) {
$scope.legend = ['销售业绩'];
$scope.item = [];
$scope.data = [];
angular.forEach(restaurant_sales_info.data, function (data,index) {
$scope.item[index] = data.month;
$scope.data[index] = data.sales_performance;
});
$scope.data=[$scope.data]
}]);

３．注意：对应的html页面中不能再定义ng-controller，否则会报错