DoCow
  1. DoCow
  3. angularjs ui-router comportamento estranho com segmento adicional na rota

angularjs ui-router comportamento estranho com segmento adicional na rota

Estou sofrendo um problema com o roteador ui quando adiciono um segmento errado à rota.

Um exemplo … http://xxx.xxxxx.xxx/roles funciona bem. Esta é uma rota definida sem parâmetros. Mas se eu adicionar outro segmento na pesquisa http://xxx.xxxxx.xxx/roles/kk, o $ urlRouteProvider.otherwise (‘/’) não funciona e o aplicativo está tentando carregar todos os resources da web (css, html, javascript, etc.) de uma rota como http://xxx.xxxxx.xxx/roles/app/app.css retornando muitos erros no console.

Este código está no meu app.config: 

$urlRouterProvider .otherwise('/'); $locationProvider.html5Mode(true);

E este é um exemplo de definição de rota: 

 angular.module('myApp') .config(['$stateProvider', function ($stateProvider) { $stateProvider .state('roles', { url: '/roles', templateUrl: 'app/modules/admin/roles/index.html', controller: 'RolesCtrl', authenticate: true }) .state('logs', { url: '/logs', templateUrl: 'app/modules/admin/logs/index.html', controller: 'LogsCtrl', authenticate: true }) .state('parameters', { url: '/parameters', templateUrl: 'app/modules/admin/parameters/parameters.html', controller: 'ParametersCtrl', authenticate: true }); }]);

Qualquer ajuda com esse comportamento? Atenciosamente Jose

Não tenho certeza onde está o problema aqui … mas eu criei o plunker de trabalho , o que deve ajudar a ver o que é necessário para ver o HTML 5 e o ui-router trabalhando juntos. Caso esse servidor esteja configurado corretamente, isso deve funcionar imediatamente. Por favor, verifique isso primeiro:

  • Como: Configurar seu servidor para funcionar com o html5Mode

Agora, isso seria ajustado como def do estado, para mostrar o aninhamento profundo do URL: 

 $stateProvider .state('roles', { url: '/roles/:id', ... }) .state('roles.logs', { url: '/logs', ... }) .state('roles.logs.parameters', { url: '/parameters', ... });

Para fazer todos estes chamam abaixo de wroking:

temos que não esquecer de definir corretamente o URL base, no nosso exemplo: 

    ...

Mas para plunker devemos definir isso dinamicamente:

Confira o exemplo de trabalho aqui

Você também tem que definir um estado que aponte para o url de outra forma , dessa forma, os roteadores de interface do usuário sabem como lidar com o estado padrão. 

 var app = angular.module('demo', ['ui.router']); app.config(function($stateProvider, $urlRouterProvider){ $stateProvider .state('roles', { url: '/roles', templateUrl: 'roles.html' }) .state('otherwise', { url: '/', templateUrl: 'otherwise.html' }) $urlRouterProvider .otherwise('/'); })
Intereting Posts