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

Posted 2023-02-19

【中文标题】如何在 Angular.js 中延迟路由定义？

【英文标题】：How to defer routes definition in Angular.js?

【发布时间】：2012-10-20 15:02:05

【问题描述】：

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

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：以后有办法注册路由吗？

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

【参考方案1】：

我发现@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'
  );

【讨论】：

感谢您的提琴，这在现代角度版本中非常有用

【参考方案2】：

由于路由是在提供者级别定义的，通常新路由只能在配置块中定义。问题是在配置块中所有重要的服务仍然未定义（最值得注意的是$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 还定义了一个重定向路由，以正确处理末尾带有 / 的路由（使其有效可选）。

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

此技术取决于内部实现，如果 AngularJS 团队决定更改路由的定义/匹配方式，可能会中断

。 也可以使用$route.routes 定义otherwise 路由，因为默认路由存储在null 键下的相同哈希中

【讨论】：

在“旧”时代，路由是动态定义的，但 AngularJS 团队故意更改它，以便您只能预先静态定义路由。我想如果您修改与当前 URL 匹配的路由，则必须触发路由更改...

我认为未来的路线应该能够应对这一点。它可能正在等待允许动态加载模块的新模块架构？

是的，这是真的，曾经需要小心定义与当前URL匹配的路由（实际上可以在jsFiddle中看到这个问题）。另一个问题是我们不能动态定义新的控制器（但这是当前模块系统更普遍的问题）。无论如何，我认为以上是我们目前的路由系统所能达到的。

伙计们，非常感谢您的回复，尤其是 pkozlowski 对我的问题的回答。谁能告诉我更多关于“但这是当前模块系统更普遍的问题”？我觉得这些模块对我来说太死板了。也许我错了，因为我是 Angular 的新手，但是任何指出 Angular 弱点的澄清都会很好（这样人们就知道会发生什么）。

stej：当前模块系统的“问题”是您需要预先将所有 AngularJS 工件（控制器、指令等）下载到浏览器中。在应用程序的初始引导之后，不可能添加更多控制器、指令等。这个问题/答案有更多信息：***.com/a/12646328/1418796