kein index.html nach dem Neuladen von eckigen App

Question

Ich habe eine angular.js-Anwendung mit einem grundlegenden Setup wie: My index.html rendert die statischen Sachen wie Top/Sidebar. Im Inneren I <div ng-view></div> haben die Teil HTML-Dateien zu zeigen, wie zum Beispiel meine home.html

Nachdem ich in meiner Anwendung anmelden das index.html mit seiner Steuerung MainCtrl Lasten aswell als meine home.html mit dem nach HomeCtrl. Also alles so weit wie es sein sollte.

Nachdem ich einen Fix implementiert habe (so dass das Nachladen den Benutzer nicht "vergisst" und ich nicht abgemeldet werde - ich basiere es auf dem Beispiel von http://www.sitepoint.com/implementing-authentication-angular-applications/) Ich habe versucht, meine Seite neu zu laden. Aber jetzt nur meine home.html lädt.

HINWEIS: Ich bearbeitete meine Erkenntnisse unter

was Sinn macht, hier ein Teil meiner app.js ist:

$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 
}) 

So offensichtlich, wenn ich / die Anwendung laden nur meine home.html zeigt. Aber wie kann ich erreichen, was ich bereits habe, wenn ich die Seite normalerweise nach dem Login betrete?

Mein Hauptproblem scheint mir im Moment zu sein, dass ich nicht ganz sicher bin, wie und warum index.html Lasten in Ordnung, wenn ich mich einloggen Hier ist, was ich in meinem LoginCtrl tun, nachdem der SignIn Prozess abgeschlossen ist.

$location.path("/"); 

Ich suchte im Internet nach detaillierten Erklärungen zu diesem Thema, aber leider habe ich noch nichts nützliches gefunden. Kann mir jemand erklären, warum das überhaupt funktioniert und wie ich es auch zum Nachladen von Seiten machen kann? Vielen Dank!

bearbeiten Ich lese hier (https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode), dass ich meine Express-Konfiguration ändern muss. Ich habe versucht:

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

Ich benutze $locationProvider.html5Mode(true);

Aber wenn ich jetzt anmelden meine Seite aktualisiert infintly, bis es abstürzt.

edit2: ok, nach dem Lesen viel auf html5mode und wie man es mit Express verwenden Ich bin mir ziemlich sicher, dass mein Bug im Backend ist, nicht im Frontend.

Hier sind Teile meines server.js (Express Config)

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

meine Ordnerstruktur:

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

ich viele Beiträge auf Stackoverflow und anderen Seiten gelesen haben, die im Grunde alle sagen, dass

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

sollte genug sein, um dies funktioniert zu bekommen, aber für mich scheint es nicht zu funktionieren .

---

EDIT3: Eine kurze Zusammenfassung, was mein aktuelles Problem ist:

Wenn ich die Seite neu laden nur die Teil html wie z.B. home.html wird geladen. Nicht die ganze Seite mit index.html. Hier ist eine kurze Zusammenfassung meines corrent Code:

im app.js (Winkel config) I konfiguriert haben:

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

meine 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(); 

und auf der Serverseite, die 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); 
}); 

von meinem Verständnis dies " sollte "genug Konfiguration für Express und eckig sein, um zusammen zu arbeiten."

Answer 1

Zuerst in der Vorlagen-URL Ihrer winkelförmigen Routen fügen Sie eine / am Anfang wie templateUrl: '/views/home.html' hinzu. Da in Ihrer Express-App suchen Sie nach /:name, die / am Anfang enthält.

Weiter

// ------ 
// 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

Sicherstellen, dass alle Code Ihre Client-Seite in der/den öffentlichen Ordner abzulegen und zugänglich durch ausdrückliche statische Middleware machen, in Ihrem server.js

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

Dann fügen, nach der Definition aller Routen

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

auf einer Randnotiz, __dirname ist lokal für die Datei, die Sie sind n, und es zeigt immer auf den enthaltenden Ordner. Seien Sie also vorsichtig, wenn Sie __dirname in Dateien verwenden, die sich in Unterordnern befinden.

Answer 3

nach viel Arbeit, erstellte ich ein neues Projekt, versuchte das Routing erklärt in z. die Links/Antworten oben und kopierte dann meinen alten Code. Leider habe ich nie herausgefunden, was das Problem wirklich war. Es muss ein kleiner Teil gewesen sein, den ich in diesem Thread nicht erwähnt habe.

Lösung Wenn Sie auf diese Art von Problem stoßen: Werfen Sie einen Blick auf die Links und versuchen Sie, ein funktionierendes Beispielprojekt zu erstellen. Zumindest hat das für mich funktioniert.