Angular RouteProvider leitet zu einer anderen HTML-Datei weiter

Question

Ich muss eine App für eine bestehende Website erstellen, aber leider erkennt die Website (außerhalb meiner Kontrolle) das Benutzergerät und leitet auf eine mobile Version weiter.

Ich versuche, dieselbe JS-Datei, aber unterschiedliche HTML-Dateien wiederzuverwenden.

Also habe ich:

1. index.html für den Desktop
2. mobile.html für Mobilgeräte

Beide rufen init.js auf, wo ich meine Logik verwalten möchte. Mein Problem ist, dass das Routing aus irgendeinem Grund nicht wie erwartet funktioniert und ich nicht herausfinden kann, warum.

Desktop:

1. Ich gehe zu example.com
2. Lassen Sie sich zu example.com/#/steps/age/0 weiterleiten
3. Aktualisieren Sie die Seite und sie bleibt unter example.com/#/steps/age/0

Das funktioniert wie erwartet

Handy, Mobiltelefon:

1. Ich gehe zu example.com/mobile.html
2. Lassen Sie sich zu example.com/mobile.html#/steps/age/0 weiterleiten
3. Aktualisieren Sie die Seite und anstatt bei der gleichen URL zu bleiben, wird sie zu example.com/steps/age/0#/steps/age/0 weitergeleitet

Dies funktioniert nicht wie erwartet (es wird erwartet, dass die URL nach der Aktualisierung dieselbe bleibt wie in Schritt 2).

Code unten:

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

Kann mir bitte jemand einen Rat geben?Danke.

Answer 1

Angular untersucht den gesamten Pfad, um zu sehen, wohin er führen soll.Also, wenn Sie es haben example.com/mobile.html#/steps/age/0 Da es keine passende Route gibt, wird diese für Sie durch die Route ersetzt mobile.html also bekommst du /steps/age/0#/steps/age/0 von deiner otherwise.Das grundlegende Problem besteht darin, dass Angular kein Gespür dafür hat, was mobile.html bedeutet, und nimmt es als Parameter.

Eine Lösung besteht darin, Routen zum Trennen Ihrer Seiten zu verwenden.

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

Die Controller können je nach Bedarf variieren.

Alternativen dazu sind zu haben mobile.html Verwenden Sie eine eigene Angular-App und ein eigenes Routing, was von Vorteil sein kann, da Sie nicht auf Desktop-Anweisungen stoßen, die in Mobilgeräte eindringen.Sie können alle Ihre Anweisungen und Controller darin einfügen, haben aber dennoch eine schöne Trennung von Index und Mobile.Sie können noch einen Schritt weitergehen und eine Weiterleitung zu einrichten m.example.com, aber das ist ein anderes Thema.

BEARBEITEN Ich machte einen Fehler.Haben templateUrl Sei index.html ist ein bisschen falsch. index.html sollte Ihr enthalten ng-app und dein ng-view Anweisungen, möglicherweise ein Controller.Alle gängigen HTML-Dateien sollten sich dort befinden. desktop.html Und mobile.html sollte den spezifischen HTML-Code für diese Plattformen enthalten.

Als nachträglicher Gedanke könnten Sie in diesen eine Direktive namens haben profile Das erledigt Ihre gesamte Profilarbeit, und zwar mit ein bisschen ng-switch Sie können das anzeigen lassen, wenn steps ist im Geltungsbereich definiert und verwendet:

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

Aber jetzt schwadroniere ich, ich bin ehrlich gesagt nicht 100 % sicher, dass das funktionieren wird. ENDE BEARBEITUNG