no index.html dopo aver ricaricato l'app angolare

Question

Ho un'applicazione angular.js con una configurazione di base come: My index.html esegue il rendering delle cose statiche come Top/Sidebar. Dentro ho <div ng-view></div> per visualizzare i file html parziali come ad esempio il mio home.html

Dopo accedo al mio applicazione del index.html con il suo controller MainCtrl carichi proprio come il mio home.html con il secondo HomeCtrl. Quindi tutto quanto dovrebbe essere.

Dopo ho implementato una correzione (in modo che il ricaricamento wont "dimenticare" l'utente e non ottengo disconnesso - ho basato sul esempio dalla http://www.sitepoint.com/implementing-authentication-angular-applications/) ho provato a ricaricare la mia pagina. Ma ora solo i miei carichi home.html.

NOTA: ho modificato i miei risultati qui sotto

che ha un senso, ecco la parte del mio app.js:

$routeProvider.when('/', { 
    templateUrl: 'views/home.html', 
    controller: 'HomeCtrl', 
    resolve: { 
     auth: function ($q, authenticationSvc) { 
      var userInfo = authenticationSvc.getUserInfo(); 
      if (userInfo) { 
       return $q.when(userInfo); 
      } else { 
       return $q.reject({ authenticated: false }); 
      } 
     } 
    } 
}) 
.when('/login', { 
    templateUrl: 'views/login.html', 
    controller: 'LoginCtrl', 
    login: true 
}) 

Così, ovviamente, quando carico / l'applicazione mostra solo la mia home.html. Ma come posso ottenere ciò che ho già quando inserisco la pagina normalmente dopo il login?

Il mio problema principale sembra essere in questo momento per me che non sono del tutto sicuro di come e perché index.html carichi bene quando accedo Ecco quello che faccio nel mio LoginCtrl dopo il processo di SignIn è completa:.

$location.path("/"); 

Ho cercato nel web alcune spiegazioni dettagliate su questo argomento, ma sfortunatamente non ho trovato nulla di utile ancora. Qualcuno può spiegare al mio perché questo funziona in primo luogo e come posso farlo funzionare anche per ricaricare la pagina? Grazie!

modifica Ho letto qui (https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode) che devo modificare la mia configurazione rapida. Ho provato:

app.all('/*', function(req, res, next) { 
    res.sendfile('public/index.html', { root: __dirname }); 
}); 

Io uso $locationProvider.html5Mode(true);

Ma quando faccio il login ora la mia pagina viene aggiornata infintly fino a quando non si blocca.

EDIT2: ok, dopo aver letto un sacco su html5mode e come utilizzarlo con espressa Sono abbastanza certo che il mio Bug è nel backend, non nel Frontend.

Ecco parti del mio server.js (config espresso)

app.use(require('less-middleware')(path.join(__dirname, 'public'))); 
app.use(express.static(__dirname + '/public')); 
app.set('view engine', 'html'); 
app.set('views', __dirname + '/public/views/'); 

require('./routes')(app); // contains my other routes 

app.get('/', function(req, res) { 
    res.render('index'); 
}); 
app.get('/views/:name', function (req, res) { 
    var name = req.params.name; 
    res.render('views/' + name); 
}); 
app.get('*', function(req, res) { 
    res.redirect('/'); 
}); 

la mia struttura di cartelle:

/server.js 
/routes 
/public/app.js 
/public/index.html 
/public/views/home.html 
/public/controllers/xxxCtrl.js 

Ho letto molti messaggi su StackOverflow e altri siti che sostanzialmente tutti dicono che

app.get('*', function(req, res) { 
     res.redirect('/'); 
    }); 

dovrebbero essere sufficienti per farlo funzionare, ma per me non sembra funzionare .

---

Edit3: Un riassunto rapido qual è il mio problema attuale è:

Quando ricarichiamo la pagina html solo il parziale come per esempio home.html viene caricato. Non la pagina intera con index.html. Ecco un breve riassunto del mio codice corrent:

nel app.js (config angolare) Ho configurato:

$locationProvider.html5Mode(true); 
// I tried my app without html5mode, but then everything breaks - but I need the html5mode anyway 
$routeProvider.when('/', { 
      templateUrl: 'views/home.html', 
      controller: 'HomeCtrl', 
      resolve: { 
       auth: function ($q, authenticationSvc) { 
        var userInfo = authenticationSvc.getUserInfo(); 
        if (userInfo) { return $q.when(userInfo); } 
        else { return $q.reject({ authenticated: false });} 
       } 
      } 
     }) 

mia authenticationSvc:

.factory("authenticationSvc", ["$http", "$q", "$route", "$window", "$location", function ($http, $q, $route, $window, $location) { 
// login, logout 
function init() { 
     console.log("init"); 
     if ($window.sessionStorage["userInfo"]) { 
      userInfo = JSON.parse($window.sessionStorage["userInfo"]); 
     } 
    } 

    init(); 

e sul lato server, il server.js:

app.get('/:name', function (req, res) { 
    var name = req.params.name; 
    res.sendFile('views/' + name); 
    // res.sendFile(__dirname + '/public/index.html'); // uncommented, since it didn't work 
}); 


require('./routes')(app); 

// this is my last route: 
app.get('*', function (req, res) { 
    res.redirect('/#' + req.originalUrl); 
}); 

dalla mia comprensione questo " dovrebbe "essere abbastanza configurazione per esprimere e angolare per lavorare insieme.

Answer 1

Prima di tutto nell'url di modello delle rotte angolari aggiungere un / all'inizio come templateUrl: '/views/home.html'. Poiché nella tua app Express stai cercando /:name che contiene / all'inizio.

Successivo

// ------ 
// try adding this 

app.get('/*', function (req, res) { 
    res.sendFile(__dirname + '/public/index.html'); // uncommented, since it didn't work 
}); 

// Now what this does is that everytime a request is made it will send the index file 
// The asterisk will allow anything after it to pass through 
// Once it reaches the front end, Angular will process whats after "/" 
// It then will make an asynchronous request to the server depending on what 
// path is present after "/" 
// That is when app.get('/:name'... is called 


//------ 

app.get('/:name', function (req, res) { // This route will be called by angular from the front end after the above route has been processed 

    var name = req.params.name; 

    // since your template url is /views/home.html in the angular route, req.params.name will be equal to 'views/home.html'. So you will not need to add yet another 'views/' before the variable name 
    res.sendFile(name); 
    // res.sendFile('views/' + name); 
    // res.sendFile(__dirname + '/public/index.html'); // uncommented, since it didn't work 
}); 


require('./routes')(app); 

// this is my last route: 
app.get('*', function (req, res) { 
    res.redirect('/#' + req.originalUrl); 
}); 

Answer 2

Assicurati di mettere tutto il codice lato client nella cartella/pubblico e renderlo accessibile tramite middleware statica espresso, nei vostri server.js

app.use(express.static(__dirname+'/public'))); 

Quindi aggiungere, dopo aver definito tutti i percorsi

app.route('/*') // this is the last route 
.get(function(req, res) { 
    res.sendfile(__dirname+ '/public/index.html'); 
}); 

su un lato nota, __dirname è locale per il file che si sta i n, e punta sempre alla cartella contenente. quindi fai attenzione quando usi __dirname nei file che si trovano in sottocartelle.

Answer 3

dopo un sacco di lavoro, ho creato un nuovo progetto, ho provato il routing spiegato ad es. i link/risposte sopra e poi copiato il mio vecchio codice. Sfortunatamente non ho mai scoperto quale fosse il vero problema. Deve essere stata una piccola parte che mi è mancata di menzionare in questa discussione.

Soluzione se si incontra questo tipo di problema: dare un'occhiata ai collegamenti e provare a creare un progetto di esempio di lavoro. Almeno questo ha funzionato per me.