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

一尘不染

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

angularjs

我已经配置了一些基本路由，可供所有用户登录后使用：

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

问：有没有办法以后注册路线？

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

阅读 196

2020-07-04

共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键

2020-07-04