角度ui-router-ajax調用負載

Question

我們正在開發一個使用angular JS的單頁應用程序，我正在使用狀態提供程序來配置路由。基本上有一個全球導航視圖和儀表板視圖。我必須從導航中傳遞幾個參數來進行服務調用，然後相應地顯示儀表板。我已將狀態分爲兩個，一個用於導航，另一個用於儀表板。我無法弄清楚的是，我應該在哪裏調用ajax來獲取儀表板數據。我應該在導航本身，並通過解決它。或者我應該只是將數據傳遞給儀表板控制器並從那裏進行ajax調用。以下是我的狀態

$stateProvider 
.state('home', { 
    url: '/', 
    templateUrl: 'templates/home.htm', 
    controller: 'homeController', 
}) 
.state('dashboard', { 
    url: 'contact', 
    templateUrl: 'templates/dashboard.htm', 
    controller: 'dashboardController' 
}) 
.state('state3', { 
    url: '/articles', 
    templateUrl: 'templates/state3.htm', 
    controller: 'state3Controller' 
}); 
$urlRouterProvider.otherwise('/home'); 

Answer 1

這完全取決於您希望用戶體驗如何發揮出來。

如果你想之前過渡到儀表板的狀態來完成所有的數據讀取，使用resolve狀態配置

.state('dashboard', { 
    url: '/contact', 
    templateUrl: 'templates/dashboard.htm', 
    controller: 'dashboardController', 
    resolve: { 
     someData: function($http) { 
      return $http.get('something').then(res => res.data); 
     } 
    } 
} 

那麼你的控制器可以與someData注入，如

.controller('dashboardController', function($scope, someData) { ... }) 

這將導致狀態轉換等待，直到someName承諾已被解決，這意味着數據在控制器中立即可用。

---

然而，如果你想立即過渡到儀表板狀態（也許顯示加載消息，微調等），你會移動數據提取到控制器

.controller('dashboardController', function($scope, $http) { 
    $scope.loading = true; // just an example 
    $http.get('something').then(res => { 
     $scope.loading = false; 
     $scope.data = res.data; 
    }); 
})