如何推迟Angular.js路线定义是什么?(How to defer routes definit

2019-06-18 18:05发布

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 });
  });

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?

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

Answer 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关键


Answer 2:

我发现,通过@ pkozlowski.opensource答案只能在angularjs 1.0.1。 然而,角route.js成为以后的版本中一个独立的文件后,直接设置$途径不起作用。

检查代码后,我发现$ route.routes的关键不再用于匹配的位置,但$ route.route [关键] .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'
  });


文章来源: How to defer routes definition in Angular.js?