Angular RouteProvider redirecionar para outro arquivo html

Question

Eu tenho que criar um aplicativo para um site já existente, mas infelizmente o site (fora do meu controle) detecta o dispositivo do usuário e redireciona para uma versão móvel.

Eu estou tentando reutilizar o mesmo arquivo js, mas diferentes arquivos html.

Então, eu tenho:

1. index.html para a área de trabalho
2. mobile.html para celular

ambos chamar init.js onde eu quero lidar com a minha lógica, o meu problema é que, por algum motivo, o roteamento não está a funcionar como eu esperava e eu não consigo descobrir o porquê.

Área de trabalho:

1. Eu vou para example.com
2. obter redirecionar para example.com/#/steps/age/0
3. Atualize a página e permanece no example.com/#/steps/age/0

Isso funciona como esperado

Móveis:

1. Eu vou para example.com/mobile.html
2. obter redirecionar para example.com/mobile.html#/steps/age/0
3. Atualize a página e, em vez de ficar na mesma url, ele vai para example.com/steps/age/0#/steps/age/0

Isso não funciona conforme o esperado (esperado para ficar na mesma url, uma vez refrescante como no passo número 2)

Código abaixo:

angular
.module('profileToolApp', ["ngRoute", "ngResource", "ngSanitize"])
.config(function($routeProvider, $locationProvider){
    $routeProvider
    .when('/steps/:steps*', {
        templateUrl : 'profile-app.html',
        controller : 'example'
    })
    .otherwise({
        redirectTo: '/steps/age/0'
    });
})
.controller('example', function($scope, $routeParams, $resource, $location){
    console.log("example controller");
});

Alguém por favor pode aconselhar?Obrigado.

Answer 1

Angular é examinar o caminho inteiro para ver para onde ele deve ir.Então, quando você tem example.com/mobile.html#/steps/age/0 Não há nenhuma rota correspondente, então ela substitui a rota para você, em lugar de mobile.html assim que você chegar /steps/age/0#/steps/age/0 a partir de sua otherwise.O problema fundamental é que angulares tem noção do que mobile.html significa, e leva-lo como um parâmetro.

Uma solução é utilizar rotas para separar suas páginas.

$routeProvider
    .when('/', {
        templateUrl : 'desktop.html', //was 'index.html pre edit
        controller : 'example'
    })
    .when('/mobile/', {
        templateUrl : 'mobile.html',
        controller : 'example'
    })
    .when('/steps/:steps*', {
        templateUrl : 'profile-app.html',
        controller : 'example'
    })
    .when('/mobile/steps/:steps*', {
        templateUrl : 'mobile-profile-app.html',
        controller : 'example'
    })
    .otherwise({
        redirectTo: '/'
    });
})

Os controladores podem variar conforme necessário.

As alternativas para isso são mobile.html use seu próprio angular de App e de roteamento, o que pode ser benéfico, pois você não vai ter área de trabalho de directivas vazamento no celular.Você pode injetar todas as suas diretrizes e controladores para ele, mas ainda tem uma boa separação de índice e móvel.Você pode levar isso um passo mais longe e ter um redirecionamento para m.example.com, mas isso é um tópico diferente.

EDITAR Eu cometi um erro.Ter templateUrl ser index.html é um pouco errado. index.html deve conter seu ng-app e o seu ng-view directivas, possivelmente, um controlador.Qualquer html comuns, deve residir lá. desktop.html e mobile.html deve conter o HTML específico para essas plataformas.

Como uma reflexão tardia, Dentro desses você poderia ter uma directiva chamado profile que faz tudo do seu perfil de trabalho, e com um pouco de ng-switch você pode ter que aparecem se steps é definido no escopo, e usar:

$routeProvider
.when('/steps?/:steps?', {
    templateUrl : 'desktop.html', //was 'index.html pre edit
    controller : 'example'
})
.when('/mobile/steps?/:steps?', {
    templateUrl : 'mobile.html',
    controller : 'example'
})

Mas agora eu estou a divagar, eu não tenho 100% de certeza que irá funcionar no tbh. FINAIS EDITAR