使用Node.js/Express構建簡單SPA的HTML

我想將網站構建爲單頁面應用程序。使用Node.js/Express構建簡單SPA的HTML

據我所知，SPA以HTML文件的形式嚮應用程序發送一個入口點。

因此，我想使用Node和Express來提供主頁面，然後爲頁眉和頁腳之間的內容提供HTML，以便在用戶瀏覽網站時使用AJAX調用進行更新。

我知道如何創建一個restful API來以JSON的形式提供數據，但並不知道如何處理正在改變的SPA的HTML部分。

問題：如何在服務器上使用Node和Express實現HTML部分的服務（並最終使用像handlebar這樣的模板引擎，如果有幫助的話）？

它真的有意義嗎？（一個頭文件和一個頁腳是沒有太多的數據來重新加載畢竟）。

來源

2016-07-14 Aurelien Giraud

你可以肯定地做到這一點與node.js.首先，建立一個HTML模板引擎，例如痛飲，（但你可以使用別人），並配置標準的選項來渲染HTML頁面：

var swig = require('swig'); 
app.set('view engine', 'html'); 
app.set('view options', { 
    layout: false 
}); 

app.engine('html', swig.renderFile); 
app.set('view cache', false); 
// To disable Swig's cache, do the following: 
swig.setDefaults({ cache: false }); 
app.use(express.static(__dirname + '/public'));

其次設置了供應的主HTML頁面的端點。

app.get('/',function(req, res) { 
     res.render('index'); 
    };

然後您可以創建Node.js的終點，這將讓您的數據：

app.get('/users', function(req, res) { 
     // Do database stuff here 
     res.status(200).send(results); 
    }

然後設置您的HTML文件：

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="stylesheets/bootstrap.min.css" rel="stylesheet"> 

<title>fast MEAN</title> 
</head> 
<body ng-controller="MainController"> 
<div class="col-md-12" style="background-color: #006699"> 

</div> 
{% raw %} 
{{helloWorld}} 

<ng-view></ng-view> 

<script src="js/angular.min.js"></script> 
<script src="js/angular-route.min.js"></script> 
<script src="app.js"></script> 

{% endraw %} 
</body> 
</html>

當外界的一切{％原料％}和{％endraw％}將使用node/swig模板數據進行數據呈現，並且這些標記中的所有內容都可以使用您正在使用的任何框架（jQuery，angular，react等）來呈現。

這個簡單的單頁面應用程序的一個例子是在我的github上，有一個角度版本和一個反應版本。希望有所幫助。

https://github.com/coguy450/fastMEAN

來源

2016-07-14 21:25:16

使用Node.js/Express構建簡單SPA的HTML

回答

相關問題