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的第一个实例。

问：以后如何注册路线？

来自Add routes and templates dynamically to $routeProvider的解决方案可能有效，但非常难看（涉及全局变量nastyGlobalReferenceToRouteProvider）。

Answer 1

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

现在，事实证明在实践中很容易在应用程序生命周期的任何时候添加/删除路由！查看$route source code我们可以看到所有路由定义都只保存在$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还定义了一个重定向路由来正确处理末尾/的路由（make它实际上是可选的。）

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

此技术取决于内部实施，如果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'
  });

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

2 个答案: