Angular RouteProvider redirigir a otro archivo html

Question

Tengo que construir una aplicación para un sitio web existente, pero desafortunadamente el sitio web (fuera de mi control) detecta el dispositivo de usuario y la redirige a una versión móvil.

Estoy tratando de volver a usar el mismo archivo js pero diferentes archivos html.

Así que tengo:

1. index.html para escritorio
2. mobile.html para móviles

tanto la llamada init.js a donde quiero manejar mi lógica, mi problema es que por alguna razón el enrutamiento no está funcionando como se esperaba y no puedo averiguar por qué.

Escritorio:

1. Voy a example.com
2. conseguir redirigir a example.com/#/steps/age/0
3. Actualizar la página y se queda en example.com/#/steps/age/0

Esto funciona como se esperaba

Móvil:

1. Voy a example.com/mobile.html
2. conseguir redirigir a example.com/mobile.html#/steps/age/0
3. Actualizar la página y en lugar de quedarse en la misma url, va a example.com/steps/age/0#/steps/age/0

Esto no funciona como se espera (espera que permanezca en el mismo url a la vez refrescante, como en el paso número 2)

Código de abajo:

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

Puede alguien por favor aconsejar?Gracias.

Answer 1

Angular es el examen de la ruta de acceso completa para ver donde debe ruta.Así que cuando usted tiene example.com/mobile.html#/steps/age/0 No hay ninguna coincidencia de la ruta, por lo que sustituye a la ruta para usted, en lugar de mobile.html así que usted consigue /steps/age/0#/steps/age/0 a partir de su otherwise.El problema fundamental es que el angular no tiene ningún sentido de lo que mobile.html significa, y lo toma como un parámetro.

Una solución es utilizar rutas para separar sus 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: '/'
    });
})

Los controladores pueden variar según sea necesario.

Alternativas a esto hay que tener mobile.html la utilización de su propio angular de la Aplicación y de enrutamiento, que puede ser beneficioso, ya que no se ejecute en el escritorio de directivas que se filtra en el móvil.Usted puede inyectar todas sus directivas y los controladores en ello, pero aún así tienen una buena separación de índice y móvil.Usted puede tomar un paso más allá y tiene una redirección a m.example.com, pero eso es un tema diferente.

EDITAR He cometido un error.Tener templateUrl ser index.html es un poco mal. index.html debe contener su ng-app y su ng-view directivas, posiblemente un controlador.Cualquier comunes de html debe residir allí. desktop.html y mobile.html debe contener el HTML específico para esas plataformas.

Como una idea de último momento, Dentro de los que podría haber una directiva llamada profile que hace todo de su perfil de trabajo, y con un poco de ng-switch usted puede tener que aparecer si steps se define en el ámbito de aplicación y uso:

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

Pero ahora estoy divagando, no estoy 100% seguro de que va a trabajar tbh. FINAL DE EDICIÓN