重新加載角度應用後沒有index.html

Question

我有一個angular.js應用程序，其基本設置如下：我的index.html呈現靜態的東西像Top/Sidebar。裏面我有<div ng-view></div>顯示部分HTML文件例如像我home.html

我登錄後進入我的應用程序index.html與它的控制器MainCtrl負載藏漢作爲我home.html與根據HomeCtrl。所以一切都應該如此。

我實施了一個修復程序（以便重新加載不會「忘記」用戶，我不會註銷 - 我基於http://www.sitepoint.com/implementing-authentication-angular-applications/的示例）我嘗試重新加載我的頁面。但現在只有我的home.html加載。

注：我編輯我發現下面

這是合理的，這是我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 
}) 

所以，很顯然，當我加載/應用程序只顯示我的home.html。但是我怎樣才能實現，當我登錄後正常進入頁面時，我已經擁有了什麼？

我的主要問題似乎是目前對我來說，我不太清楚如何以及爲什麼index.html加載罰款當我登錄下面是我在LoginCtrl做簽到過程完成後：

$location.path("/"); 

我在網上搜索了一些關於這個主題的詳細解釋，但不幸的是我沒有找到有用的東西。有人可以向我解釋爲什麼這首先起作用，以及我如何使它可以用於頁面重新加載？謝謝！

編輯我在這裏讀（https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode），我必須改變我的快遞配置。我想：

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

我用$locationProvider.html5Mode(true);

但是當我現在登錄我的頁面刷新infintly，直至崩潰。

編輯2：好吧，閱讀了很多關於html5mode和如何使用它表達我相當肯定，我的錯誤是在後端，而不是在前端。

這裏是我的server.js（快遞配置）的部分

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

我的文件夾結構：

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

我讀過關於計算器和其他網站的許多職位，基本上都說

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

應該足以讓這個工作，但對我來說似乎並沒有工作。

---

EDIT3： 簡要總結就是我現在的問題是：

當我重新加載頁面只有部分HTML象例如正在加載home.html。不是整個頁面index.html。下面是我的corrent代碼的快速摘要：

在 app.js（角配置）

我已經配置：

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

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

，並在服務器端，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); 
}); 

從我的理解這個「應該「足夠的配置，以表達和角度一起工作。

Answer 1

首先在您的角度路線的模板url中，在開始處添加/，如templateUrl: '/views/home.html'。由於在您的快速應用程序，你正在尋找/:name其中包含/在開始。

下一頁

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

確保把所有的客戶端代碼在/公用文件夾，並使其通過快速靜態中間件訪問，在你的server.js

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

然後加入，定義完所有路線後

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

在旁註中，__dirname是本地文件，你是我的n，它總是指向包含文件夾。因此在子文件夾中的文件中使用__dirname時要小心。

Answer 3

經過大量的工作，我創建了一個新項目，試着在例如上面的鏈接/答案，然後複製我的舊代碼。不幸的是，我從來沒有發現問題究竟是什麼。一定是我在這個線程中提到的一小部分。

解決方案如果遇到這種問題：看看鏈接並嘗試創建一個工作示例項目。至少這對我有效。