如何在Angular.js中推迟路由定义？

Question

我已经配置了一些在登录之前可供所有用户使用的基本路由:

App.config(function ($routeProvider) {
    $routeProvider.
        when('/login', { templateUrl: 'views/login.html', controller: PageStartCtrl.Controller }).
        otherwise({ redirectTo: '/login' });
});

所以用户唯一能做的就是登录.用户登录后,我想注册其他路由,如下所示:

$http
  .post('api/Users/Login', {   User: userName, Password: userPassword })
  .success(function (response : any) {
    App.config(function ($routeProvider) {
      $routeProvider
        .when('/dashboard', 
              { templateUrl: 'part/dashboard.html', 
              controller: DashboardCtrl.Controller });
  });

但是,我想我应该只调用一次.config方法,因为$ routeProvider是一个对/ login route一无所知的全新实例.进一步的调试向我展示了在解析视图更改时使用$ resourceProvider的第一个实例.

问:以后如何注册路线？

从路由和模板动态添加到$ routeProvider的解决方案可能有效,但是非常难看(涉及全局变量nastyGlobalReferenceToRouteProvider).

Answer 1

由于路由是在提供者级别定义的,因此通常只能在配置块中定义新路由.麻烦的是,在配置块中,所有重要的服务仍然是未定义的(最值得注意的是$http).因此,从表面上看,w似乎无法动态定义路由.

现在,事实证明,在应用程序生命周期的任何时候添加/删除路由都非常容易!查看$route 源代码,我们可以看到所有路由定义都只是保存在$route.routes哈希中,可以在任何时间点进行修改(简化示例):

myApp.controller('MyCtrl', function($scope, $route) {    
    $scope.defineRoute = function() {
        $route.routes['/dynamic'] = {templateUrl: 'dynamic.tpl.html'};
    };
});

以下是演示此操作的jsFiddle:http://jsfiddle.net/4zwdf/6/

实际上,如果我们想要接近AngularJS正在做的事情,路由定义逻辑应该有点复杂,因为AngularJS还定义了一个重定向路由来正确处理最后的路由/(使其有效可选).

因此,虽然上述技术可行,但我们需要注意以下几点:

• 这种技术取决于内部实现,如果AngularJS团队决定改变路由的定义/匹配方式,可能会中断.
• 也可以定义otherwise使用的路由$route.routes是默认路由存储在相同的散列的下null键

Answer 2

我发现@ pkozlowski.opensource的答案仅适用于angularjs 1.0.1.但是,在angular-route.js成为更高版本中的独立文件之后,直接设置$ route不起作用.

在查看代码之后,我发现$ route.routes的密钥不再用于匹配位置,而是使用$ route.route [key] .RegExp代替.我复制原点和pathRegExp函数后,路由工作.见jsfiddle:http: //jsfiddle.net/5FUQa/1/

  function addRoute(path, route) {
     //slightly modified 'when' function in angular-route.js
  }
  addRoute('/dynamic', {
    templateUrl: 'dynamic.tpl.html'
  });