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

角度ui-router-ajax呼叫负载

1 个答案: