您现在已经了解了 MEAN 应用程序的机淛接下来我们将对第一期文章中创建的 ;相反,我想与它建立更深入的集成 可以帮助我很好地管理用户组活动。但是在某个活动结束后,就时间方面而言该活动的重要性不如当天晚上的谈话。
换句话说这个网站的一个用户用例就是:“下次会议要讨论什么?”Meetup.com 可鉯很好地满足这种用户用例
第二个用户用例(“向我显示与 MEAN 堆栈有关的所有谈话,不管是什么时候发生的” )正是我准备通过 UGLI应用程序解决的用例要实现这个用例,必须围绕一个新的名为 Talk
的模型对象创建一个 CRUD
基础架构幸运的是,可以使用一个 Yeoman 生成器来实现这个基础架構
- 回答
Yes
,将 CRUD 模块链接添加到菜单3. 当生成器询问要使用哪个菜单时,接受默认设置(topbar
)
清单 6 显示了交互式命令行序列。
在清单 6 中请紸意,生成器创建了服务器端基础架构(保存在 app 目录中):路由、一个控制器、一个模型和一个单元测试它还在public/modules/talks 目录下构建了所有客户端工件。
您稍后将向 Talk
对象添加一些自定义字段在此之前,在浏览器中访问网站查看默认情况下会得到哪些内容。
单击右上角的 Signin 链接輸入本系列早些时候创建的用户名和密码,或者单击Signup 并创建一组新的凭证
完成登录后,可以在左上角看到一个 Talks 菜单从菜单中选择 New Talk打开┅个 HTML 表单,其中提供了一个独立的 Name 字段如图 5 所示。
这是一个良好的开端但是要捕捉 Talk
的所有属性,您需要的不仅仅是一个简单文本
要姠 Talk
添加新字段,必须编辑 6 个文件 — 四个用于显示两个用于持久性:
首先要处理持久性。解决方案一半用在服务器端另一半用在客户端。
服务器端模型(在 app/models/talk.server.model.js中定义)是应用程序的原型您将在其中命名字段,提供数据类型验证规则等等。
此架构的一个有趣之处是对象模型永远不会离开服务器对象是来自客户机的数据的具体化实现,并在 HTTP 响应中序列化到 JSON
该应用程序有两个控制器(一个位于服务器端,叧一个位于客户端)但是我们只关心客户端控制器。服务器端控制器只是将进入的 JSON推入到模型对象因此在向模型添加额外字段时不需偠对服务器端控制器做任何调整。客户端控制器要进行一些调整来容纳新的字段
所示),同时还定义了两个元数据字段:created
和 user
这个基于 JSON 嘚模式无需多加解释。在定义新字段时您可以指定数据类型、默认值和错误消息,以显示给必要的字段您还可以做出许多其他优化。查看 获得有关的更多信息。
在 $scope.create
函数中表格字段将被聚集到一个 JSON对象,并被发送给服务器以便实现持久存储。从模型向控制器添加相應的字段后您就实现了持久存储。
现在我们要将注意力转移到演示层这样用户就可以查看新字段并进行交互。
在 Web 浏览器中您新修改嘚 New Talk 页面应当类似图 6 所示。
请注意用于编辑的 HTML 与之前修改的创建表单稍微有些不同。在编辑时您已经有了一个 Talk
对象,因此data-ng-model
属性将以完全限定的方式引用字段比如用 talk.name
而不是
name
。在 Web 浏览器中查看修改如图 7 所示。
view-talk.client.view.html 页面是对象的只读视图用户在保存新的 Talk
,更新现有的Talk
或从列表頁面中选择 Talk
后将来到该视图如清单 13 所示做出修改。
前面提到 slidesUrl
是可选字段在视图页面中,您将使用 ng-if
指令有条件地显示字段(如果已填充)在浏览器中查看页面,检查这一行为如图 8 所示。
请注意这里使用 data-ng-repeat
指令显示了服务器返回的 talk 列表中的每个talk。在浏览器中查看结果洳图 9 所示。
此时您已经了解了 MEAN 堆栈交互的各个方面。您使用 Bootstrap 的响应式 Web 设计功能确保您的网站能够适应所有设备而不仅限于传统的有 101 个鍵和鼠标的传统台式机。您已经领略了使用 Yeoman 生成器向应用程序添加新 CRUD模块的强大之处及其便利性该生成器将原始工件放到正确的目录中,您只需要对它们进行自定义即可