Il routing angolare non funziona quando l'URL viene visitato direttamente nel browser ma funziona quando si fa clic su?

Question

Ho un app angolare con una struttura di directory

app 
..views 
....partials 
......main.jade 
......foo.jade 
....index.jade 

e percorsi definiti come:

'use strict';

angular.module('myApp', [ 
    'ngCookies', 
    'ngResource', 
    'ngSanitize', 
    'ngRoute', 
    'firebase', 
    'myApp.config' 
]) 
    .config(function ($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 

    $routeProvider 
     .when('/', { 
     templateUrl: '/partials/main', 
     controller: 'MainCtrl' 
     }) 
     .when('/foo/:fooName', { 
     templateUrl: '/partials/foo', 
     controller: 'FooCtrl' 
     })    
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }); 

sto usando espresso sul lato server e il codice di riferimento è:

// server.js 
    app.configure('development', function(){ 
    app.use(express.static(path.join(__dirname, '.tmp'))); 
    app.use(express.static(path.join(__dirname, 'app'))); 
    app.use(express.errorHandler()); 
    }); 

    app.configure('production', function(){ 
    app.use(express.favicon(path.join(__dirname, 'public/favicon.ico'))); 
    app.use(express.static(path.join(__dirname, 'public'))); 
    }); 

    app.get('/', routes.index); 
    app.get('/partials/:name', routes.partials); 

    //routes.js 
    exports.index = function(req, res){ 
     res.render('index'); 
    }; 


    exports.partials = function(req, res){ 
     var name = req.params.name; 
     res.render('partials/' + name); 
    }; 

Il percorso principale "/" carichi fine e quando scatto alla "/foo/bar" la vista parziale foo.jade carichi come previsto. Tuttavia, quando provo a visitare "/foo/bar" direttamente nell'URL ottengo una risposta 404 da Express "cannot GET /foo/bar" che ha senso poiché non esiste una route come questa definita in espresso. Tuttavia, ho pensato che questo fosse il punto di partenza per definire il router angolare..i.e. si suppone che intercetti questa richiesta e in effetti chieda "/partials/foo". Ho provato ad aggiungere

//redirect all others to the index (HTML5 history) 
app.get('*', routes.index); 

ma didnt di risolvere il problema e sembrava essere la cattura anche le richieste per le attività js statiche e rispondendo con i contenuti della index.html che è piuttosto male. Sono sicuro che sto facendo qualcosa di sbagliato. Come posso sistemare le cose in modo da poter visitare direttamente gli URL?

Answer 1

Il routing della ragione si comporta in questo modo è html5mode attivato. $locationProvider.html5Mode(true);

È necessario comprendere che quando si tenta di accedere a "/foo/bar" direttamente il browser invia la richiesta HTTP GET a questo URL. Quando si tenta di accedere a questo URL tramite il collegamento facendo clic, come detto, Angular intercetta questa azione e chiama History.pushState che aggiorna solo il collegamento del browser.

Quello che devi fare per rendere il lavoro di routing html5mode è l'implementazione della riscrittura dell'URL. Ogni richiesta deve essere reindirizzata al tuo file di indice che avvia l'applicazione AngularJS, ma questo deve essere fatto sul tuo server. Angolare renderà la pagina desiderata da sola.

Check out connect mod rewrite compito grunt che fa esattamente quello.

Puoi anche tu direttamente this middleware.