使用 MEAN 和 UGLI CRUD 实现响应式 Web 设计（1）

look_w

调整标记创建应用程序 UGLI 的第一个任务就是调整应用程序的标记（branding）。需要在应用程序的服务器端对 config 和 app                目录做一些修改；另外要对客户端的 public 目录做一些修改。
首先从 config/env/all.js 中的元数据开始。将标题修改为 HTML5 Denver（或您选择的用户组），并将描述修改为 HTML5                Denver User Group，如清单 1 所示。
清单 1. config/env/all.js

1 2 3 4 5 6 7 8

'use strict'; module.exports = {     app: {         title: 'HTML5 Denver',         description: 'HTML5 Denver User Group',         keywords: 'MongoDB, Express, AngularJS, Node.js'     },

config/env/development.js 中的标题也需要修改，如清单 2 所示。上篇文章中我们已经了解到 development.js 和                all.js 会在运行时合并。
清单 2. config/env/development.js

1 2 3 4 5 6 7

'use strict'; module.exports = {     db: 'mongodb://localhost/test-dev',     app: {         title: 'HTML5 Denver'     },

接下来，修改导航栏左上角显示的品牌。为此，需要编辑                public/modules/core/views/header.client.view.html。在大概第 9 列的地方找到 anchor 标记和                navbar-brand 类，将 body 修改为 HTML5 Denver，如清单 3 所示。
清单 3. public/modules/core/views/header.client.view.html

1 2 3 4 5 6 7 8 9 10 11 12 13

<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">HTML5 Denver</a>     </div>     <!-- ...snip... --> </div>

要验证所做的修改，请在命令行输入 mongod 启动 MongoDB，然后输入 grunt                启动应用程序。在浏览器中查看 Web 应用程序，看看标记是否显示在菜单和标题栏中。
要完成标记修改，需要替换 public/modules/core/views/home.client.view.html                中的标准文本（boilerplate），该文本显示在主页的正文中。创建一个名为 home.client.view.html.original                的副本，这样就可以在稍后往回引用（如果需要的话）。
该文件利用                  框架的功能，确保您的网站从一开始就面向移动应用。在继续之前，需要了解 Bootstrap 提供的 12 列的网格布局。