角度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; 
    }); 
})