2013-06-26 18 views
5

Sto lavorando su un'applicazione Django che fa un uso pesante di angolare in alcune pagine, ad esempio, a domain.com/myAngularAppUsa di routing angolare a fianco di andata e ritorno di routing

All'interno della pagina angolare che sto utilizzando il routing angolare per la navigazione tra i diversi punti di vista/stati all'interno di quella pagina. Tuttavia attraverso l'intero sito web ci sono collegamenti di navigazione che devono portare a richieste di andata e ritorno a Django. Tuttavia tutte le pagine includono lo stesso file javascript compilato che include le dichiarazioni di rotta Angular.

Quindi la mia domanda è: come ottengo Angular per gestire i propri percorsi e togliersi di mezzo quando la posizione viene modificata (principalmente facendo clic su un collegamento sulla pagina) su un percorso che non è stato esplicitamente detto di possedere, cioè di diverse sottodirectory fuori dal dominio.

La mia dichiarazione di routing sembra qualcosa di simile: qualcosa di

myApp.config(function($locationProvider, $routeProvider) { 
    $locationProvider.html5Mode(true); 
    $routeProvider.when('/myAngularApp/', { 
    templateURL: 'template1.html' 
    }); 
    $routeProvider.when('/myAngularApp/stuff', { 
    templateURL: 'template12.html' 
    }); 
    $routeProvider.otherwise({redirectTo: <not sure what to do here...> }); 
}) 

Ho provato come:

$routeProvider.otherwise({redirectTo: function(a1,r,a3){ window.location.href = r }}) 

Ma questo rende il refresh della pagina senza fine su tutte le rotte non-abbinato.

Tralasciando l'altrimenti dichiarazione sembra rendere impossibile lasciare una pagina con un percorso non-abbinato quando vi si accede direttamente ... non davvero non capisco perché?

Deve essere possibile fare quello che voglio no?

+0

ha u trovare alcuna soluzione ... anche io ho lo stesso problema. Aggiornami. Grazie :) –

+0

Trovato Ho potuto parzialmente risolvere il problema riducendo la portata dell'App Angular nella dom per escludere i collegamenti di navigazione globali, anche se sono in procinto di scrivere il mio servizio di routing non avido: / – Nat

risposta

4

Credo di aver trovato una soluzione. Sto facendo una cosa simile, un sito angolare multi pagina che usa angolare per alcune delle sue pagine. Ecco quello che sto facendo

var app = angular.module('appname', ['ui.bootstrap', 'ui.autocomplete']) 
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) { 
    $locationProvider.html5Mode(true); 
    $locationProvider.hashPrefix('!'); 
}]) 
.run(function($rootScope, $location) { 
    var redirected = false; 
    $rootScope.$on('$locationChangeStart', function(event, nextLocation, currentLocation) { 
     if(!redirected && $location.path() !== '/current-url') { 
      redirected = true; 
      event.preventDefault(); 
      window.location = $location.path(); 
     } 
    }); 
}); 

Quindi cosa devo lavorare il prossimo è come passare nel percorso corrente-url. Un modo in cui sto pensando è che noi ng-init impostiamo i dati nella vista (sto usando express.js quindi userei Jade). O possibilmente nella funzione run, prendi il percorso iniziale e prova contro quello.

Event.preventDefault() è lì per interrompere un elemento aggiuntivo da aggiungere alla cronologia dei browser. Prima di farlo ho dovuto premere due volte per tornare alla pagina angolare.

Nota Questo non è stato ancora testato con IE8. Lo farò ora e vedrò come va.

Aggiornamento Ok ho appena provato questo in IE8 e mi sono bloccato in un ciclo di reindirizzamento. Ho aggiornato il codice per avere una variabile semplice per verificare se abbiamo reindirizzato. Sembra funzionare. Mi piacerebbe sapere un modo più carino.