2013-07-06 54 views
0

嗨我在一個新項目的開始階段。快速路由HTML5風格CatchAll難題沒有HASHBangs - Angular JS,Yeoman

我將爲前端使用yeomans現代工作流工具,角js工作。

使用express在node.js中編寫的後端。我不想在服務器上創建任何html,它將全部靜態地提供給客戶端,然後通過以快速編寫的REST風格的服務訪問,其中angular js應用程序的魔術將創建動態內容。該應用程序將成爲一頁。作爲一個頁面,需要有一個全面的觀點規則。

目前,我有典型結構:

app.js 
public < dir containing the static html, js, css etc. 
index.html 
scripts 
styles 
views 

我發現大多數人呈現HTML服務器端,然後有角或任何框架,以提供更多的內容。人們通常在服務器上使用玉石模板來提供內容,但我不認爲有必要這樣做,因爲所有內容都將變得非常活躍。

Yeoman的工作流程非常簡單而強大,我不想打擾這件事。由於很多原因,當你添加一個新路由時,yeoman會將js引用添加到index.html的底部,這是由於模板是一種不同的語法,所以我不能使用yeoman。

我也喜歡在這個架構中關注的分離。快速安裝主要側重於RESTful服務並且無法控制演示文稿,然後/ public文件夾爲通過使用express.static(PATH)提供的演示文稿提供服務。

我可以愉快地使用hashbangs進行路由,但對於html5 pushstate來說並不那麼微不足道。

我的問題是與捕捉所有的路由。我發現的問題是有效地重定向不在/ api資源url下的所有流量。儘管不會中斷資產被index.html取代。

app.get(url('/person/lesson/:id'), api.getLesson); 

app.all('*', routes.index); 

我曾嘗試:

routes.index = function(req,res){ 
res.sendfile('./public/dist/index.html'); 
}; 

routes.index = function(req,res){ 
res.redirect('/'); 
}; 

回答

-3

捕捉之前把你的API路由(GET,POST,刪除等)。沒有必要重定向。

app.get('*', function(req, res){ 
    res.sendfile('public/index.html'); 
}); 

沒有別的了。

+2

嗨我試過這個,它在原則上適用於index.html,但不適用於公用文件夾中的其他文件。 –

+2

您需要檢查他們要求的文件是否存在於公用文件夾中。 'app.use(express。static(__ dirname +'/ client/public'));' – ehsangh

+0

http://expressjs.com/starter/static-files.html –

2

通過將靜態路由和其他預定義的路由放在下面的全部代碼之前,這將起作用。

app.get('*', function(req, res){ 
    res.sendFile(__dirname + '/public/index.html'); 
}); 

不過請注意,如果您使用的是靜態路由,說映射到/ A /公共/文件夾,這些路由需要使用絕對引用(即「/ CSS /樣式的HTML被引用。 css「而不是」css/styles.css「)。如果您使用相對URL(不包含/),則該引用將基於URI,因爲該相對URL未被定義而屬於catchall。