Как отложить определение маршрутов в Angular.js?

Я установил некоторые базовые маршруты, доступные для всех пользователей, прежде чем они войдут в систему:

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 - это новый экземпляр, который ничего не знает о маршруте/логине. Дальнейшая отладка показала мне, что первый экземпляр $resourceProvider используется при изменении разрешения просмотра.

Q: Есть ли способ зарегистрировать маршруты позже?

Решение Добавить маршруты и шаблоны динамически в $routeProvider может работать, но довольно уродливо (задействована глобальная переменная nastyGlobalReferenceToRouteProvider).

Ответы

Ответ 1

Поскольку маршруты определены на уровне провайдера, обычно новые маршруты могут быть определены только в блоке конфигурации. Проблема в том, что в конфигурационном блоке все жизненно важные службы по-прежнему undefined (наиболее заметно $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

Ответ 2

Я обнаружил, что ответ by @pkozlowski.opensource работает только в angularjs 1.0.1. Однако после angular -route.js становится независимым файлом в более поздней версии, прямое задание $route не работает.

После просмотра кода я обнаружил, что ключ $route.routes больше не используется для сопоставления местоположения, но вместо этого используется $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'
  });