如何在 Angular.js 中推迟路由定义? [英] How to defer routes definition in Angular.js?

问题描述

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

I have configured some basic routes that are available for all users before they log in:

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

所以用户唯一能做的就是登录.用户登录后，我想像这样注册额外的路由:

So the only thing user can do is to log in. After the user logs in, I would like to register additional routes like this:

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

However, I suppose I should call .config method only once, because the $routeProvider is brand new instance that knows nothing about /login route. Further debugging showed me that the first instance of $resourceProvider is used when resolving view change.

问:以后有没有办法注册路由?

Q: Is there a way how to register routes later?

来自 将路由和模板动态添加到 $routeProvider 的解决方案可能会奏效，但是很丑(涉及全局变量nastyGlobalReferenceToRouteProvider).

Solution from Add routes and templates dynamically to $routeProvider might work, but is quite ugly (involved global variable nastyGlobalReferenceToRouteProvider).

推荐答案

由于路由是在提供者级别定义的，通常新路由只能在配置块中定义.问题是在配置块中所有重要的服务仍未定义(最显着的是$http).所以，从表面上看， w 不能动态定义路由.

Since routes are defined on a provider level, normally new routes can only be defined in the configuration block. The trouble is that in the configuration block all the vital services are still undefined (most notably $http). So, on the surface it looks like w can't define routes dynamically.

现在，事实证明在实践中，在应用程序生命周期的任何点添加/删除路由都非常容易！查看$route <一个 href="https://github.com/angular/angular.js/blob/master/src/ng/route.js#L74" rel="noreferrer">源代码 我们可以看到所有的路由定义简单地保存在 $route.routes 哈希中，可以像这样在任何时间点进行修改(简化示例):

Now, it turns out that in practice it is quite easy to add / remove routes at any point of the application life-cycle! Looking at the $route source code we can see that all the routes definition are simply kept in the $route.routes hash which can be modified at any point in time like so (simplified example):

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

这里是 jsFiddle 演示了这一点:http://jsfiddle.net/4zwdf/6/

Here is the jsFiddle that demonstrates this in action: http://jsfiddle.net/4zwdf/6/

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

In reality, if we want to be close to what AngularJS is doing the route definition logic should be a bit more complex as AngularJS is also defining a redirect route to correctly handle routes with / at the end (make it effectively optional).

因此，虽然上述技术有效，但我们需要注意以下几点:

So, while the above technique will work, we need to note the following:

• 此技术取决于内部实现，如果 AngularJS 团队决定更改路由定义/匹配的方式，则该技术可能会中断.
• 也可以使用 $route.routes 定义 otherwise 路由，因为默认路由存储在 null键

• This technique depends on the internal implementation and might break if the AngularJS team decides to change the way routes are defined / matched.
• It is also possible to define the otherwise route using the $route.routes as the default route is stored in the same hash under the null key

这篇关于如何在 Angular.js 中推迟路由定义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！