Comment différer la définition des routes dans Angular.js?

Question

J'ai configuré de base des routes qui sont disponibles pour tous les utilisateurs avant l'ouverture de la session:

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

Donc, la seule chose que l'utilisateur peut faire est de vous connecter. Après que l'utilisateur se connecte, je voudrais enregistrer d'autres voies comme ceci:

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

Cependant, je suppose que je devrais l'appeler .config méthode qu'une seule fois, parce que les $routeProvider est la marque nouvelle instance qui ne sait rien à propos de /login route. Plus de débogage m'a montré que la première instance de $resourceProvider est utilisé lors de la résolution de changement de vue.

Q: Est-il un moyen d'enregistrer des itinéraires plus tard?

La Solution d' Ajouter des itinéraires et de la dynamique des modèles de $routeProvider pourrait fonctionner, mais il est assez moche (impliqué variable globale nastyGlobalReferenceToRouteProvider).

Answer 1

Depuis les routes sont définies sur un fournisseur de niveau, normalement, les nouvelles routes peuvent être définies uniquement dans le bloc de configuration. Le problème, c'est que dans le bloc de configuration de tous les services essentiels sont toujours pas défini (notamment $http). Ainsi, sur la surface, il ressemble à w ne peut pas définir des itinéraires de manière dynamique.

Maintenant, il s'avère que dans la pratique, il est très facile d'en ajouter / retirer des routes à n'importe quel point de l'application du cycle de vie! En regardant l' $route code source , nous pouvons voir que tous les itinéraires définition sont simplement conservés dans l' $route.routes de hachage peuvent être modifiés à n'importe quel point dans le temps comme (exemple simplifié):

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

Voici le jsFiddle qui démontre cela en action: http://jsfiddle.net/4zwdf/6/

En réalité, si nous voulons être proche de ce que AngularJS est en train de faire la définition de la route de la logique devrait être un peu plus complexe que AngularJS est aussi de définir une redirection de l'itinéraire pour gérer correctement les routes avec des / à la fin (il est effectivement en option).

Ainsi, alors que la technique ci-dessus va travailler, nous avons besoin de noter les suivantes:

• Cette technique repose sur la mise en œuvre interne et peut se briser si l'AngularJS équipe décide de changer la façon dont les routes sont définies / assorti.
• Il est également possible de définir l' otherwise route à l'aide de l' $route.routes que la route par défaut est stocké dans le même condensé en vertu de l' null clé

Answer 2

J'ai trouvé que la réponse par @pkozlowski.opensource ne fonctionne que dans angularjs 1.0.1. Toutefois, après angular-route.js devient un fichier indépendant dans la version ultérieure, définir directement l' $route ne fonctionne pas.

Après avoir examiné le code, je trouve la clé de $route.les routes n'est plus utilisé pour faire correspondre la position, mais $route.route[key].RegExp est utilisé à la place. Après je copie l'origine, quand et pathRegExp fonction, route des œuvres. Voir jsfiddle: http://jsfiddle.net/5FUQa/1/

  function addRoute(path, route) {
     //slightly modified 'when' function in angular-route.js
  }
  addRoute('/dynamic', {
    templateUrl: 'dynamic.tpl.html'
  });