Itinerario angolare Reindirizzamento di un altro file HTML

Question

Devo costruire un'app per un sito Web esistente, ma sfortunatamente il sito Web (esterno del mio controllo) rileva il dispositivo utente e reindirizza a una versione mobile.

Sto cercando di riutilizzare lo stesso file JS ma diversi file HTML.

Così ho:

.
1. index.html per desktop
2. mobile.html per mobile

Entrambi chiamano init.js dove voglio gestire la mia logica, il mio problema è che per qualche motivo il routing non funziona come mi aspettavo e non riesco a capire perché.

Desktop:

.
1. vado ad esempio.com
2. Ricevi reindirizzarsi a example.com / # / passaggi / età / 0
3. Aggiorna la pagina e rimane in esempio.com / # / passaggi / età / 0

funziona come previsto

Mobile:

.
1. vado a example.com/mobile.html
2. Ricevi reindirizza a example.com/mobile.html#/steps/age/0
3. Aggiorna la pagina e invece di rimanere nello stesso URL, va a example.com/steps/age/0#/steps/age/0

Questo non funziona come previsto (dovrebbe rimanere nello stesso URL una volta rinfrescante come nel punto numero 2)

Codice di seguito:

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

.

può chiunque si prega di avvisare? Grazie.

Answer 1

Angular sta esaminando l'intero percorso per vedere dove dovrebbe instradare. Quindi, quando hai generatoDicetagCode non c'è percorso corrispondente, quindi sostituisce il percorso per te, al posto di example.com/mobile.html#/steps/age/0 in modo da ottenere mobile.html dal /steps/age/0#/steps/age/0. Il problema fondamentale è che l'angolare non ha senso di ciò che significa otherwise e lo prende come parametro.

Una soluzione è utilizzare percorsi per separare le tue pagine.

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

.

I controller possono variare secondo necessità.

Alternative a questo devono avere mobile.html Utilizzare la propria app angolare e routing, che potrebbe essere utile dal momento che non verrà eseguita nelle direttive desktop che perdono il cellulare. Puoi iniettare tutte le tue direttive e controller in esso, ma ho ancora una bella separazione dell'indice e del cellulare. Puoi prendere un passo avanti e avere un reindirizzamento al mobile.html, ma è un argomento diverso.

Modifica Ho fatto un errore. Avere m.example.com Be templateUrl è un po 'sbagliato. index.html dovrebbe contenere il index.html e le direttive ng-app, possibilmente un controller. Qualsiasi html comune dovrebbe risiedere lì. ng-view e desktop.html devono contenere l'HTML specifico per quelle piattaforme.

Come ripensamento, all'interno di quelli che è stato possibile avere una direttiva chiamata mobile.html che fa tutto il tuo profilo, e con un po 'di profile è possibile che venga visualizzato se ng-switch è definito nell'ambito di applicazione e utilizzare:

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

.

Ma ora sono vagando, non sono sicuro al 100% che funzionerà Tbh. End Modifica