Page 415 - AngularJS权威教程

30.5 服务端处理 SEO 的选项 395

30.5.1 使用Node/Express中间件 19

尽管在这个例子中我们使用的是NodeJS，但这一实现只是使用后端提供静态
20
HTML的一种方式。无论你使用什么样的后端，这一方案都是可行的。

为了使用NodeJS和Express（基于NodeJS的Web应用程序框架）交付静态HTML，我们必须添 21
加一些用来在查询参数中查找_escaped_fragment_的中间件：
// 在你的app.js配置中共享创意 22
app.use(function(req, res, next) {
var fragment = req.query._escaped_fragment_;

if(!fragment) return next(); 23

// 如果fragment为空，则服务于首页
if(fragment === "" || fragment === "/") 24
fragment = "/index.html";

// 如果fragment不是以'/'开始的，则将'/'前置插入fragment
if(fragment.charAt(0) !== "/") 25
fragment = '/' + fragment;

// 如果fragment不是以'.html'结尾的，则将它插入fragment中 26
if(fragment.indexOf('.html') == -1)
fragment += ".html";

// 服务于静态html快照 27
try {
var file = __dirname + "/snapshots" + fragment;
res.sendfile(file); 28
} catch (err) {
res.send(404);
}
}); 29
这个中间件认为我们的快照存放在叫做“/snapshots”的顶级目录中，然后会基于请求路径为
文件提供服务。 30

例如，当请求/时，它会提供index.html；当请求为/about时，它会提供snapshots目录中的
about.html。 31

30.5.2 使用Apache重写URL
32

①
如果使用Apache服务器 交付Angular应用，那么可以添加几行代码到配置中，用来提供快照
服务而不是JavaScript应用。 33
可以使用mod_rewrite模块来检测路由请求中是否包含_escaped_fragment_查询参数。如果
确实包含，它会重写请求，以指向/snapshots目录中的静态版本的文件。 34
要想使用重写机制，需要启用适当的模块：
35
$ a2enmod proxy
$ a2enmod proxy_http
—————————— 36
① http://httpd.apache.org/