精通 MEAN 了解一个 MEAN 应用程序（5）研究 MEAN 堆栈的客户端
|
- UID
- 1066743
|
精通 MEAN 了解一个 MEAN 应用程序（5）研究 MEAN 堆栈的客户端
研究 MEAN 堆栈的客户端主页的关键内容（如清单 18 中的 app/views/layout.server.view.html 中定义）由 AngularJS 在客户端填充。
清单 18. app/views/layout.server.view.html1
2
3
4
5
6
7
8
| <body class="ng-cloak">
<header data-ng-include="'/modules/core/views/header.client.view.html'"
class="navbar navbar-fixed-top navbar-inverse"></header>
<section class="content">
<section class="container">
{% block content %}{% endblock %}
</section>
</section>
|
回忆一下，app 目录包含 MEAN 应用程序的 Express 服务器端部分。从两点可以看出 header 在客户端由 AngularJS 管理。首先，无论何时看到 HTML 属性中有一个 ng 时，都表明它是由 AngularJS 管理的。其次，更实用的一点是，包含所有服务器端代码的 app 目录并不包含模块目录。排除使用服务器端作为一种可能的解决方案后，就剩下使用 public 目录中的客户端源代码。如清单 19 所示，modules 目录明显位于 public 目录下。
清单 19. public（客户端）目录结构 1
2
3
4
5
6
7
| $ tree -L 1 public/
public/
|--- application.js
|--- config.js
|--- lib
|--- modules
|
如果查看 lib 目录，就会看到一些第三方库：
清单 20. 第三方库的 public/lib 目录1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $ tree -L 1 public/lib
public/lib
|--- angular
|--- angular-animate
|--- angular-bootstrap
|--- angular-cookies
|--- angular-mocks
|--- angular-resource
|--- angular-sanitize
|--- angular-touch
|--- angular-ui-router
|--- angular-ui-utils
|--- bootstrap
|--- jquery
|
回忆一下 bower.json 中指定的库。
但是，如果查看 modules 目录，就会发现 app/views/layout.server.view.html 中指定了 modules/core/views/header.client.view.html 模板。
清单 21. modules/core/views/header.client.view.html1
2
3
4
5
6
7
8
9
10
| <div class="container" data-ng-controller="HeaderController">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-ng-click="toggleCollapsibleMenu()">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/#!/" class="navbar-brand">MeanJS</a>
</div>
|
如果将 class="navbar-brand" anchor 的值从 MeanJS 修改为其他值，那么此更改在保存文件后将会立即反映到浏览器中。但是到主 payload 的路径（主页的主要内容）更加迂回。再次查看 app/views/layout.server.view.html，如清单 22 所示。
清单 22. app/views/layout.server.view.html1
2
3
4
5
6
7
8
| <body class="ng-cloak">
<header data-ng-include="'/modules/core/views/header.client.view.html'"
class="navbar navbar-fixed-top navbar-inverse"></header>
<section class="content">
<section class="container">
{% block content %}{% endblock %}
</section>
</section>
|
container 内包含一个名为 content 的 block。请记住 app/views/index.server.view.html：
1
2
3
4
5
| {% extends 'layout.server.view.html' %}
{% block content %}
<section data-ui-view></section>
{% endblock %}
|
这个 block content 包含一个空的部分，其中有一个 data-ui-view 属性。该属性用于客户端 AngularJS 路由器。查看 public/modules/core/config/core.client.routes.js，如清单 23 所示。
清单 23. app/views/index.server.view.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| 'use strict';
// Setting up route
angular.module('core').config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// Redirect to home view when route not found
$urlRouterProvider.otherwise('/');
// Home state routing
$stateProvider.
state('home', {
url: '/',
templateUrl: 'modules/core/views/home.client.view.html'
});
}
]);
|
当 URL 为 / 时，客户端路由器会将 modules/core/views/home.client.view.html 模板（如清单 24 所示）插入到 app/views/index.server.view.html 部分，后者包含 data-ui-view 属性。模板的内容应当与位于 MEAN 应用程序主页时在浏览器中看到的内容相匹配。
清单 24. modules/core/views/home.client.view.html1
2
3
4
5
6
7
| <section data-ng-controller="HomeController">
<h1 class="text-center">THANK YOU FOR DOWNLOADING MEAN.JS</h1>
<section>
<p>
Before you begin we recommend you read about the basic building
blocks that assemble a MEAN.JS application:
</p>
|
结束语在本文中，详细了解了一个 MEAN 应用程序的所有关键部分。在服务器端，我们了解到，HTML 请求首先从 Express 路由开始，然后调用 Express 控制器函数，而后者将 JSON 数据与 Swig 模板合并，并返回到客户机。但是整个流程并没有在此终结。在客户端，AngularJS 路由获得 HTML 模板并将其插入到主页面中。
在下一篇文章中，将研究应用程序的文章部分，深入探讨 MongoDB 的角色以及 AngularJS。您还将了解如何在服务器端和客户端进行测试，确保最大程度减少生产环境中的异常行为。
那时，请尽情享受精通 MEAN 堆栈的快乐。 |
|
|
|
|
|
