精通 MEAN 了解一个 MEAN 应用程序（3）理解目录结构
|
- UID
- 1066743
|
精通 MEAN 了解一个 MEAN 应用程序（3）理解目录结构
理解目录结构 这个 MEAN 应用程序有四个主要目录，如清单 6 所示。
清单 6. MEAN 目录结构1
2
3
4
5
| $ ls -ld */
drwxr-xr-x+ 7 scott staff 238 Jun 6 14:06 app/
drwxr-xr-x+ 8 scott staff 272 Jun 6 14:06 config/
drwxr-xr-x+ 49 scott staff 1666 Jun 6 14:07 node_modules/
drwxr-xr-x+ 8 scott staff 272 Jun 6 14:06 public/
|
app包含服务器端源代码。config包含配置文件。node_modules包含 package.json 中指定的服务器端模块。public包含客户端源代码 — 包括 lib 目录，其中含有在 bower.json 中指定的客户端库。 您主要应关注 app 和 public 目录。首先从 app 目录中查找应用程序主页的源代码。
研究 MEAN 堆栈的服务器端清单 7 显示了 app 目录结构。
清单 7. app（服务器端）目录结构 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| $ tree app
app
|--- controllers
|�� |--- articles.server.controller.js
|�� |--- core.server.controller.js
|�� |--- users.server.controller.js
|--- models
|�� |--- article.server.model.js
|�� |--- user.server.model.js
|--- routes
|�� |--- articles.server.routes.js
|�� |--- core.server.routes.js
|�� |--- users.server.routes.js
|--- tests
|�� |--- article.server.model.test.js
|�� |--- user.server.model.test.js
|--- views
|--- 404.server.view.html
|--- 500.server.view.html
|--- index.server.view.html
|--- layout.server.view.html
|
如果您曾经写过服务器端 MVC 应用程序，那么您应该了解它的典型工作流：
- 传入的 HTTP 请求将到达某个路由器。
- 路由器找到合适的控制器来处理该请求。
- 控制器从数据库构建一个模型（或一个模型列表）并传递给一个视图。
- 视图将模型与一个模板组合在一起，从而构建 HTML 页面，然后，将完成的输出传递给正在等待的 HTTP 响应。
如清单 8 所示，app/routes/core.server.routes.js 文件（Express 框架的一部分）包含应用程序的关键进入点。
清单 8. app/routes/core.server.routes.js1
2
3
4
5
6
7
| 'use strict';
module.exports = function(app) {
// Root routing
var core = require('../../app/controllers/core');
app.route('/').get(core.index);
};
|
Strict 模式 Strict 模式是 ECMAScript 5 规范的一部分，这也是最新的 JavaScript 主流版本。（有关的更多信息，请参见 Mozilla Developer Network 上的文章“ ”）。Strict 模式可以向后兼容。不能理解 'use strict' 语句的早期浏览器版本会直接忽略它；所有新的浏览器将慎重处理它。因此，如果您的新版本浏览器中运行的代码启用了 strict 模式，那么它也能在旧版本浏览器中运行。
该路由器定义了一个单一的路径（/），由核心控制器的 index 函数处理。注意，核心控制器是一个 CommonJS 模块，类型为 require。
清单 8 开头的 'use strict'; 语句会将您的 JavaScript 运行时设置为 strict 模式，这要比过去的 JavaScript 运行时的 “什么都可以” 的语法规则更严格。在 strict 模式下，JavaScript 运行时会将诚实的错误（honest mistake）处理为语法错误 — 比如不小心将某个变量声明为 global，或试图使用之前未经定义的变量。Strict 模式搭配使用 可确保在开发阶段而不是生产阶段捕捉到语法错误。（当然，实现无 bug 完美版本的关键在于执行单元测试时实现足够大的代码覆盖范围）。
接下来，将查看清单 9 所示的 app/controllers/core.server.controller.js（Express 框架的一部分）。
清单 9. app/controllers/core.server.controller.js1
2
3
4
5
6
7
8
9
10
| 'use strict';
/**
* Module dependencies.
*/
exports.index = function(req, res) {
res.render('index', {
user: req.user || null
});
};
|
index 函数接受传入的 HTTP 请求和传出的 HTTP 响应。由于该请求不需要从数据库获取内容，因此没有对任何模型进行实例化。index 模板被呈现给响应，同时还有一个变量的 JSON 块，它将取代模板中同名的占位符。
清单 10 显示了 app/views/index.server.view.html。
清单 10. app/views/index.server.view.html1
2
3
4
5
| {% extends 'layout.server.view.html' %}
{% block content %}
<section data-ui-view></section>
{% endblock %}
|
这里没什么太多内容，只有清单 11 所示的到 app/views/layout.server.view.html 的链接。
清单 11. app/views/layout.server.view.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{{title}}</title>
<!-- General META -->
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Semantic META -->
<meta name="keywords" content="{{keywords}}">
<meta name="description" content="{{description}}">
|
Express 模板引擎您可以对 Express 使用各种 。一个名为 的 CommonJS 模块甚至可以适应非 Express 模块引擎，并使它们能够与 Express 兼容。本系列文章将继续使用 Swig；您自己可以选择使用其他模板库。
您现在可以看到一些看上去有些类似的 HTML。围绕 title、keywords 和 description 的 {{}} 分隔符将它们标识为 占位符，这些占位符将被实际值所替代。Swig 是 MEAN.JS Yeoman 生成器安装的模板引擎。
但是，如果回头看 中的 core 控制器，您会发现传递给这个模板的惟一一个值是 user。如果您怀疑其他占位符是配置文件中定义的默认值，那么您的怀疑是正确的。 |
|
|
|
|
|
