使用服务和控制器控制操作顺序

Question

我有两种服务-一种用于存储用户详细信息，另一种用于进行调用以检索这些详细信息：

userService存储要在整个应用程序中使用的用户详细信息（即，注入到控制器，服务等中）

function userService($log) {        
    var id = '';
    var username = '';
    var isAuthenticated = false;

    var service = {
        id: id,            
        username: username,
        isAuthenticated: isAuthenticated
    };

    return service;
}

使用authService（希望只是一次）来从Web API控制器检索用户详细信息：

function authService($log, $http, userService) {
    $log.info(serviceId + ': Inside authService method');

    var service = {
        getUserDetails: getUserDetails
    };

    return service;

    function getUserDetails() {
        $log.info(serviceId + ': Inside getUserDetails method');

        return $http.get('api/authentication', { cache: true });
    }
}

最初，我在.run块中有对authService火的调用，如下所示：

.run(['$log', 'authService', 'userService', function ($log, authService, userService) {

    authService.getUserDetails()
        .then(querySucceeded);

    function querySucceeded(result) {
        userService.id = result.data.Id;
        userService.username = result.data.username;
    }
}]);

但是问题在于，直到我的控制器被解雇之后，getUserDetails返回的promise才得以解决，因此对我来说太迟了。 用户数据尚未准备好。

然后，我查看了$ stateProvider中的resolve选项（对于UI-Router）：

.state('dashboard', {
                url: '/dashboard',
                views: {
                    header: {
                        templateUrl: 'app/partials/dashboard/header.template.html',
                        controller: 'DashboardHeaderController',
                        controllerAs: 'dashboardHeaderVM',
                        resolve: {
                            user: function (authService) {
                                return authService.getUserDetails();
                            }
                        }
                    }
                }
            })

前提是，直到解决部分中的承诺得到解决后，视图才会呈现。 这似乎很好。

这是控制器的（相关部分），在这里我使用返回的用户属性：

function DashboardHeaderController($log, user) {
    var vm = this;

    // Bindable members        
    vm.firstName = user.data.firstName;
}

但是，我有两条路线（还有更多路线），用户可以导航到其中一条路线。 我需要在authService的每个状态部分中具有resolve属性吗？ 我想只调用一次调用authService.getUserDetails的请求，而不管服务于哪个路由，然后在任何路由，控制器等之后使它可用。

有更好的（最佳实践）方法吗？

Answer 1

不知道更好或最佳实践，但这里是一个plunker用我的方式。

关键是将resolve移到某些父根状态。 该申请中所有州的始祖之一：

$stateProvider
  .state('root', {
    abstract : true,
    // see controller def below
    controller : 'RootCtrl',
    // this is template, discussed below - very important
    template: '<div ui-view></div>',
    // resolve used only once, but for available for all child states
    resolve: {
      user: function (authService) {
          return authService.getUserDetails();
      }
    }
  }) 

这是带有resolve的根状态。 有决心的唯一状态。 这是它的第一个子代的示例（任何其他子代的定义都类似：

$stateProvider
    .state('index', {
        url: '/',
        parent : 'root',
        ...

这种方法将立即可用。 我只想提一下，如果'RootCtrl'的定义如下：

.controller('RootCtrl', function($scope,user){
  $scope.user = user;
})

我们应该了解UI-Router继承。 看到：

• 仅按视图层次结构的作用域继承

小引用：

请记住，如果状态的视图是嵌套的，则作用域属性仅沿状态链继承。 作用域属性的继承 无关 ，与你的国家的嵌套和一切 与你的意见 （模板） 的嵌套 。

完全有可能存在嵌套状态，这些状态的模板会在站点内各个非嵌套位置填充ui视图。 在这种情况下，您不能期望在子状态的视图内访问父状态视图的范围变量。

可以在此问答中找到更多解释

那么，这是什么意思呢？

我们的根视图只能将已解析的内容传递给子状态-如果它们的视图是嵌套的。

例如， $scope.user在子状态/视图/ $ scopes嵌套时，才会在子状态/视图/ $ scopes中继承$scope.user

.state('index', {
    url: '/',
    parent : 'root',
    views: { 
      '' : { // the root view and its scope is now the ancestor
             // so $scope.user is available in every child view
        templateUrl: 'layout.html',
        controller: 'IndexCtrl'
      },
      'top@index' : { templateUrl: 'tpl.top.html',},
      'left@index' : { templateUrl: 'tpl.left.html',},
      'main@index' : { templateUrl: 'tpl.main.html',},
    },

在这里检查

Answer 2

如果我正确理解您希望在页面加载时获得任何控制器或服务请求之前的用户信息。

我在当前的项目中有类似的任务。

为了解决该问题，我在应用程序引导之前手动请求了当前用户信息，并将其存储在localStorage 。

然后，在应用程序启动后，所有控制器/服务都可以访问当前用户信息。

提示：要在应用程序引导之前获取用户信息，您仍然可以通过手动注入$ http服务来使用它：

angular.injector(['ng']).get('$http');