AngularJS：如何对我的应用程序的所有路由使用一个解析答案

【问题标题】：AngularJS : How to use one resolve for all the routes of my applicationAngularJS：如何对我的应用程序的所有路由使用一个解析
【发布时间】：2013-11-25 02:35:38
【问题描述】：

我想解决为我的应用程序的所有页面加载当前用户的承诺。目前，我在每条路线的$routeProvider.when() 中重复解析。

  $routeProvider.when('/users/edit/:userId', {
  templateUrl: 'app/app/assets/partials/user-edit.html', 
  controller: 'UserEditController',
  resolve:{  
    'currentUser':function( UserService){            
        return UserService.getCurrentUser();
      }
  }
  });  

  $routeProvider.when('/staff_profil/edit', {
  templateUrl: 'app/app/assets/partials/profil-edit.html', 
  controller: 'ProfilEditController',
  resolve:{  
    'currentUser':function( UserService){            
        return UserService.getCurrentUser();
      }
  }
 });

我的目标是在不重复的情况下为我当前的用户解析所有路线。

【问题讨论】：

标签： angularjs

【解决方案1】：

为了完整起见，这里是整个解决方案，使用角度而不是下划线，并带有可链接的“何时”。这段代码没有什么新东西，只是结合了上面的一堆答案。

var originalWhen = $routeProvider.when;

    $routeProvider.when = function(path, route) {
        route.resolve || (route.resolve = {});
        angular.extend(route.resolve, {
            CurrentUser : function(User) {
                return User.current();
            }
        });

        return originalWhen.call($routeProvider, path, route);
    };

【讨论】：

这应该是正确的答案。对我来说，当我不使用 .call 时，接受的答案会引发错误

【解决方案2】：

您始终可以使用您自己的实现来包装$routeProvider 上现有的 when 方法。

var myModule = angular.module('myModule', ['ngRoute'])
   .config(['$routeProvider', function($routeProvider){

      var originalWhen = $routeProvider.when;

      $routeProvider.when = function(path, route){

         route.resolve = {
            'currentUser':function( UserService){            
              return UserService.getCurrentUser();
            }
         };

         return originalWhen(path, route);
      };   

   }]);

您可能希望在其中添加一些错误检查，并使用类似 underscores defaults 的方法，而不是仅仅覆盖现有的 resolve 属性，但至少这样您可以保证您的所有路由都有您想要的。

将它包装成一个辅助方法也很容易。

【讨论】：

这看起来不错，但我得到Error: [$injector:modulerr] Failed to instantiate module ... due to: $routeProvider.when(...) is undefined，即使所有覆盖方法所做的都是return originalWhen(path, route);，而是我附加了一个新方法$routeProvider.accessWhen，它可以return $routeProvider.when(path, route);，并调用在我的路线设置中，.accessWhen 而不是 .when。
如果在实际路由中添加resolve-property，'currentUser'解析不会被覆盖吗？也许 route.resolve = route.resolve || { }; route.resolve.currentUser = ... 会更好吗？
你能用 ui-router 做类似的事情吗？

【解决方案3】：

@Josh 的答案是正确的，除了你必须以不同的方式调用 originalWhen 函数：

originalWhen.call($routeProvider, path, route);

【讨论】：

【解决方案4】：

@N13 和我都无法让@Josh's solution 工作。但这确实对我有用：

    module.config(['$routeProvider', function($routeProvider){
        $routeProvider.accessWhen = function(path, route){
            route.resolve || (route.resolve = {});
            route.resolve.language = "something"
            return $routeProvider.when(path, route);
        };
    }]);

用于：

$routeProvider
        .accessWhen('/login', {
           ...
        });

【讨论】：

这对我来说似乎是最简单的解决方案

【解决方案5】：

我发现这种情况好多了：

angular.extend({}, $routeProvider, {
  when: function(path, route) {
    route.resolve || (route.resolve = {});
    route.resolve = angular.merge({}, route.resolve, {
      chef: 'OrganizationCheckerProvider'
    });
    return $routeProvider.when(path, route);
  }
});

【讨论】：

当问题在 javascript 中时，应该在 javascript 中回答。
这也使用下划线...他/她可能不会使用
没完没了，ok，改成js了。我在这里更喜欢 lodash/underscore，因为它具有出色的深度合并。如果不使用，他/她可以尝试使用 lodash/underscore 的替代方法。
AngularJS 有 angular.merge(destination, source)，看起来类似于 lodash 实现 _.merge()。

【解决方案6】：

对于那些坚持使用旧代码库的人。

const _when = $routeProvider.when;
$routeProvider.when = (path, route) => _when.call($routeProvider, path, {
  ...route,
  resolve: {
    ...route.resolve,
    'currentUser': [ 'UserService', UserService => UserService.getCurrentUser() ]
  }
});

【讨论】：