33

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

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 路由一无所知。进一步的调试表明，解决视图更改时使用了 $resourceProvider 的第一个实例。

Q：以后有办法注册路由吗？

将路由和模板动态添加到 $routeProvider 的解决方案可能有效，但非常难看（涉及全局变量nastyGlobalReferenceToRouteProvider）。

4

2 回答 2

47

由于路由是在提供者级别定义的，因此通常只能在配置块中定义新路由。问题是在配置块中所有重要的服务仍然是未定义的（最值得注意的是$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键下的相同哈希中
于 2012-11-01T08:47:11.953 回答
6

我发现@pkozlowski.opensource 的答案仅适用于 angularjs 1.0.1。但是，angular-route.js在以后的版本中成为独立文件后，直接设置$route是行不通的。

查看代码后，我发现 $route.routes 的 key 不再用于匹配位置，而是使用 $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'
  });
于 2014-03-19T04:43:22.927 回答