Como adiar a definição de rotas em Angular.js?

Eu configurei algumas rotas básicas que estão disponíveis para todos os usuários antes que eles efetuem login:

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

Portanto, a única coisa que o usuário pode fazer é efetuar login. Após o login do usuário, eu gostaria de registrar rotas adicionais como esta:

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

No entanto, suponho que eu deva chamar o método .config apenas uma vez, porque o $ routeProvider é uma instância nova que não sabe nada sobre a rota / login. Depuração adicional mostrou-me que a primeira instância de $ resourceProvider é usada ao resolver a alteração da exibição.

Q: Existe uma maneira de registrar rotas mais tarde?

Solução de Adicionar rotas e modelos dinamicamente para $ routeProvider pode funcionar, mas é bastante feia (variável global envolvida nastyGlobalReferenceToRouteProvider ).

Como as rotas são definidas em um nível de provedor, normalmente novas rotas só podem ser definidas no bloco de configuração. O problema é que no bloco de configuração todos os serviços vitais ainda estão indefinidos (mais notavelmente $http ). Então, na superfície, parece que não podemos definir rotas dinamicamente.

Agora, na prática, é muito fácil adicionar / remover rotas em qualquer ponto do ciclo de vida da aplicação! Observando o código fonte $route , podemos ver que todas as definições de rotas são simplesmente mantidas no hash $route.routes que pode ser modificado a qualquer momento (exemplo simplificado):

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

Aqui está o jsFiddle que demonstra isso em ação: http://jsfiddle.net/4zwdf/6/

Na realidade, se quisermos estar próximos do que o AngularJS está fazendo, a lógica de definição de rota deve ser um pouco mais complexa, pois o AngularJS também está definindo uma rota de redirecionamento para lidar corretamente com rotas no final (torná-lo efetivamente opcional).

Então, enquanto a técnica acima funcionar, precisamos observar o seguinte:

  • Essa técnica depende da implementação interna e pode ser interrompida se a equipe do AngularJS decidir alterar a maneira como as rotas são definidas / correspondidas .
  • Também é possível definir a rota de otherwise usando o $route.routes como a rota padrão é armazenada no mesmo hash sob a chave null

Eu encontrei que a resposta por @ pkozlowski.opensource funciona apenas no angularjs 1.0.1. No entanto, depois que o angular-route.js se torna um arquivo independente na versão posterior, definir diretamente a rota $ não funciona.

Depois de rever o código, acho que a chave de $ route.routes não é mais usada para corresponder à localização, mas $ route.route [key] .RegExp é usado no lugar. Depois de copiar a origem quando e a function pathRegExp, a rota funciona. Veja jsfiddle: http://jsfiddle.net/5FUQa/1/

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