Eckige RouteProvider Umleitung auf eine andere html-Datei

Habe ich die Erstellung einer app für eine vorhandene website, aber leider ist die website (außerhalb meiner Kontrolle) erkennt das Gerät des Benutzers und leitet Sie an eine mobile version.

Ich versuche für die Wiederverwendung der gleichen js Datei, sondern verschiedene html-Dateien.

Also ich habe:

  1. index.html für desktop -
  2. mobile.html für mobile

call init.js wo will ich mit meiner Logik, mein problem ist, dass aus irgendeinem Grund das routing nicht so funktioniert, wie ich es erwartet hatte und ich kann nicht herausfinden, warum.

Desktop:

  1. Ich gehen example.com
  2. bekommen umleiten example.com/#/steps/age/0
  3. Aktualisieren Sie die Seite, und es bleibt im example.com/#/steps/age/0

Dies funktioniert wie erwartet

Mobile:

  1. Ich gehen example.com/mobile.html
  2. bekommen umleiten example.com/mobile.html#/steps/age/0
  3. Aktualisieren Sie die Seite, und anstatt sich in der url, es geht um example.com/steps/age/0#/steps/age/0

Dieser funktioniert nicht wie erwartet (erwartet, um den Aufenthalt in der gleichen url nur einmal erfrischend, wie in der Schritt Nummer 2)

Folgenden Code:

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 jemand bitte beraten?
Danke.

InformationsquelleAutor Functional Rocking | 2014-07-30
  1. 1

    Winkel-prüft den gesamten Pfad zu sehen, wo es Routen sollten. Also, wenn Sie example.com/mobile.html#/steps/age/0 Es gibt keine passende route, so dass es ersetzt die route für Sie, statt mobile.html so erhalten Sie /steps/age/0#/steps/age/0 von Ihrem otherwise. Das grundlegende problem ist, dass der Winkel hat keinen Sinn, was mobile.html bedeutet, und nimmt es als parameter.

    Eine Lösung ist die Verwendung von Routen auf separaten Seiten. 

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

    Controller kann je nach Bedarf als.

    Alternativen zu diesem zu haben mobile.html seine eigene angular App und routing, was von Vorteil sein kann, da Sie nicht laufen in desktop-Richtlinien lecken in mobile. Können Sie Spritzen alle Ihre Richtlinien und Controller in es, haben aber immer noch eine gute Trennung von index und mobile. Sie können noch einen Schritt weiter und haben eine Umleitung zu m.example.com, aber das ist ein anderes Thema.

    BEARBEITEN ich einen Fehler gemacht. Mit templateUrl werden index.html ist ein wenig falsch. index.html muss Ihr ng-app und Ihre ng-view Richtlinien, eventuell einen controller. Alle gängigen html-sollten dort wohnen. desktop.html und mobile.html enthalten sollte, die bestimmten HTML-Code für diese Plattformen.

    Als ein nachträglicher Einfall, Innerhalb derer Sie hätte eine Richtlinie genannt profile, die nicht alle von Ihrem Profil arbeiten, und mit ein bisschen ng-switch Sie haben können, die erscheinen, wenn steps definiert ist, in den Rahmen, und verwenden Sie: 

    $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 bin ich Wandern, bin ich mir nicht 100% sicher, dass es funktionieren wird tbh. ENDE BEARBEITEN

    • Danke für deine Antwort, das macht Sinn, zwingt mich zum umschreiben viele die app, aber 🙁 naja... Lass es uns tun, danke nochmals.
    • docs.angularjs.org/api/ngRoute/provider/$routeProvider Sie könnten in der Lage sein, mit optionaler genannten Gruppen zu speichern, ein bisschen arbeiten. Versuchen .when(/mobile?/steps/:steps*). Ich weiß nicht genug darüber, wie Sie differenzieren Ihre Seiten wirklich eine Menge Hilfe, aber Sie sollten in der Lage sein, um die Wiederverwendung eine Menge code, auch mit den änderungen, die ich hier habe. Ich habe auch gerade bemerkt, ein bisschen ein Fehler... Beheben.
    • Danke Roman, ich habe bemerkt, der code war etwas off, aber ich Verstand, was Sie sagten, so ändere ich meine Herangehensweise an das problem statt, letztendlich aber das hat nicht funktioniert entweder, das problem war ein Konflikt mit jQuery Mobile (wurde versucht zu nutzen, Ihre-regler) mit AngularJS, Jquery Mobile wurde versucht zu behandeln, das routing, die ist, warum mein Angular-routing hat nicht funktioniert, trotzdem vielen Dank für all die Mühe und Hilfe.
    InformationsquelleAutor Roman K.
Schreibe einen Kommentar