Angulaire RouteProvider rediriger vers un autre fichier html

Question

J'ai créer une application pour un site web existant, mais malheureusement, le site web (en dehors de mon contrôle) détecte l'appareil de l'utilisateur et redirige vers une version mobile.

Je suis en train d'essayer de réutiliser le même fichier js mais différents fichiers html.

J'ai donc:

1. index.html pour les ordinateurs de bureau
2. mobile.html pour mobile

à la fois appel init.js là où je veux gérer ma logique, mon problème est que, pour une raison quelconque, le routage ne fonctionne pas comme je l'attendais et je ne peux pas comprendre pourquoi.

Bureau:

1. Je vais à l'example.com
2. obtenir rediriger vers example.com/#/steps/age/0
3. Actualisez la page et il reste dans example.com/#/steps/age/0

Cela fonctionne comme prévu

Mobile:

1. Je vais à l'example.com/mobile.html
2. obtenir rediriger vers example.com/mobile.html#/steps/age/0
3. Actualisez la page et au lieu de rester dans la même url, il va à example.com/steps/age/0#/steps/age/0

Cela ne fonctionne pas comme prévu (qui devrait rester dans la même url, une fois rafraîchissant comme dans le numéro de l'étape 2)

Le Code ci-dessous:

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

Quelqu'un peut-il svp conseiller?Merci.

Answer 1

Angulaire est l'examen de l'ensemble du chemin pour voir où il devrait itinéraire.Ainsi, lorsque vous avez example.com/mobile.html#/steps/age/0 Il n'y a pas de correspondance route, de sorte qu'il remplace l'itinéraire pour vous, à la place de mobile.html ainsi, vous obtenez /steps/age/0#/steps/age/0 à partir de votre otherwise.Le problème fondamental est que angulaire a pas le sens de ce que mobile.html des moyens, et le prend comme un paramètre.

Une solution consiste à utiliser des itinéraires de séparer vos pages.

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

Les contrôleurs peuvent varier selon les besoins.

Des Alternatives à ce qui ont mobile.html l'utilisation de son propre angulaire de l'Application et de routage, ce qui peut être bénéfique, car vous n'aurez pas à courir dans le bureau directives qui s'infiltre dans le mobile.Vous pouvez injecter de l'ensemble de vos directives et les contrôleurs, mais ont encore une belle séparation de l'index et mobile.Vous pouvez prendre un pas de plus et avoir une redirection vers m.example.com, mais c'est un autre sujet.

MODIFIER J'ai fait une erreur.Avoir templateUrl être index.html est un peu mal. index.html doit contenir votre ng-app et votre ng-view les directives, peut-être un contrôleur.Toutes les communes html doit y résider. desktop.html et mobile.html doit contenir le code HTML spécifique pour ces plates-formes.

Comme une réflexion après coup, à l'Intérieur de ceux que vous pourriez avoir une directive appelée profile qui ne tous les de votre profil de travail, et avec un peu de ng-switch vous pouvez avoir qui apparaissent si steps est défini dans le champ d'application et d'utilisation:

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

Mais maintenant, je m'égare, je ne suis pas sûr à 100% que ce sera le travail tbh. FIN EDIT