这是实现此目的的示例项目
考虑以下项目结构
www/
questions.html // questions angular template
solutions.html // solutions angular template
script.js // angular code
app.js // main entry point
api.js // the api endpoint
db-mock.js // a mongo db mock for demo purpose
package.json // app dependencies
package.json
使用以下命令初始化项目依赖
$ npm init
$ npm install --save express serve-static
api.js
var express = require('express');
var router = express.Router();
var db = require('./db-mock');
router.get('/questions', function(req, res) {
var questions = db.questions.find();
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(questions));
});
router.get('/solutions', function(req, res) {
var solutions = db.solutions.find();
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(solutions));
});
module.exports = router;
app.js
这是我们的主要入口点。这里声明了 Express 服务器和路由。
var express = require('express');
var serveStatic = require('serve-static');
var api = require('./api');
var app = express();
var port = process.env.PORT || 8080;
// Serve API
app.use('/api', api);
// Serve static files (our client-side code)
app.use(serveStatic('www'));
// Start server
app.listen(port, function() {
console.log('Server listening on port %d', port);
});
db-mock.js
由于我们不需要真正的 Mongo 服务器来制作示例，所以我们只是模拟它。
// Mock Mongo db
var db = {
questions: {
find: function() {
return [
{id: 1, name: "Why ?"},
{id: 2, name: "How do I do this ?"},
{id: 3, name: "What's up ?"},
{id: 4, name: "Siri, tell me a joke"},
{id: 5, name: "Are we alone ?"}
]
}
},
solutions: {
find: function() {
return [
{id: 1, name: "Triswarm"},
{id: 2, name: "U-bam"},
{id: 3, name: "Betacore"},
{id: 4, name: "Qvotrax"},
{id: 5, name: "Homezuning"}
]
}
}
}
module.exports = db;
script.js
AngularJS 模块和控制器声明
angular.module('app', []);
angular
.module('app')
.controller('SolutionsController', ['$scope', '$http', function ($scope, $http) {
$http.get('/api/solutions')
.then(function(res) {
$scope.solutions = res.data;
});
}])
.controller('QuestionsController', ['$scope', '$http', function ($scope, $http) {
$http.get('/api/questions')
.then(function(res) {
$scope.questions = res.data;
});
}]);
questions.html
问题客户端模板
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="QuestionsController">
<h1>Questions</h1>
<ul>
<li ng-repeat="question in questions">{{question.name}}</li>
</ul>
</body>
</html>
solutions.html
解决方案客户端模板
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="SolutionsController">
<h1>Solutions</h1>
<ul>
<li ng-repeat="solution in solutions">{{solution.name}}</li>
</ul>
</body>
</html>
启动
$ node app
打开浏览器http://localhost:8080/questions.html，您应该会看到 5 个问题
打开浏览器http://localhost:8080/solutions.html，您应该会看到 5 个解决方案
替代解决方案
您可以使用模板引擎在服务器端呈现 HTML，例如 ejs。你可能甚至不再需要 angular。
$npm install ejs --save
在项目根目录下添加一个views 目录，您将在其中放置服务器端模板
views/
solutions.ejs
solutions.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<title><%= pageTitle %></title>
</head>
<body>
<h1><%= pageTitle %></h1>
<ul><% for(var i=0; i<solutions.length; i++) { %>
<li><%= solutions[i].name %></li>
<% } %></ul>
</body>
</html>
以这种方式更改app.js：
// Declare /solutions route
app.get('/solutions', function(req, res) {
var solutions = db.solutions.find();
// Use `solutions.ejs` template to render
res.render('solutions.ejs', {pageTitle: "Solutions", solutions: solutions});
});
现在用node app 启动你的服务器并浏览到http://localhost:8080/solutions
对/questions等其他路由执行相同操作
这是一个非常简单的示例，请阅读 ejs 文档以符合您的需求：
https://github.com/mde/ejs