这一篇我们将一起感受学习一个小型的、活生生的应用,而不是继续深入分析哪些单个的特性。我们将会一起感受一下,前面所讨论过的所有片段如何才能真正的组合在一起,形成一个真实的、可以运行的应用。

GutHub是一款菜谱管理应用。我们学习它有两个目的,第一是用它来管理美味的菜谱,第二是用它来学习angularjs的方方面面:

这款应用的特性如下:

a)         两列布局

b)         在左侧有一个导航栏

c)         允许你创建新菜谱

d)         允许你浏览现有的菜谱列表

主视图位于右侧,主视图将会根据具体的URL刷新,可惜显示菜谱列表、菜谱项目详情、以及用来添加或编辑菜谱的表单。

 

 

模型、控制器和模版(视图)之间的关系

         这三种东西是如何协作的,应用应该用什么样的视角来看待它们。

         模型就是真理。你的整个应用都是由模型驱动的——视图中所有展示的内容都是视图、被存储起来的内容是模型,几乎所有的内容都是模型。所以请把“模型就是真理”这句话多读几遍。同时花一点时间思考一下模型,思考一下对象中的属性应该是怎样的内容、应该如何从服务器端获取模型,以及如何保存它。通过视图绑定技术,视图会根据数据模型自动刷新,所以模型总是应用的焦点。

 

    控制器将会负责业务逻辑:应该如何获取模型、可以在模型上执行何种操作、视图需要模型上的何种信息,如何如何转换模型以获取想要的信息。表单校验任务、对服务器调用、使用正确的数据启用视图,以及与此相关的几乎所有的事情都是控制器的职责。

   

    最有,模版代表模型的展现形式,以及用户应该如何与应用进行交互。模版主要用来做一下事情:

n  展示模型

n  定义用户与应用之间的交互方式

n  给应用提供样式,并且判断何时以及怎样显示一些元素

n  过滤并格式化数据

 

视图是模版和模型融合之后产生的东西。模版中不应该包含任何业务逻辑和行为,只有控制器才能具备这些特性。但是你可能会问,DOM操作应该放到那里呢?DOM操作并不会发生在控制器或模版中。它由angular指令负责(有时候也可以通过服务进行操作,DOM操作放到放到服务中可以避免重复代码)。

   

      模型

         对于当前这款应用,我们将会让模型保持超级简单。这里的模型就是一些菜谱,它们将是真个应用的唯一的模型对象,其他所有的东西都是构建在模型之上。

         每一天菜谱都具有一下特性:

  •   一个ID,这个ID将会被持久化到服务器
  •   一个名称
  •   一个简短的描述
  •   烹饪指南
  •   是否是特色菜
  •   配料数组,每一项都包含重量、单位及名称

 

就这么多,超级简单,应用中所有的东西都围绕这个简单的模型而构建,下面是一天简单的菜谱:

 1 {
 2   "id":"1",
 3   "title":"热姜汁藕片",
 4   "description":"藕片切得越薄越容易入味。",
 5   "ingredients":[
 6     {
 7       "amount":"450",
 8       "amountUnits":"g",
 9       "ingredientName":"姜"
10     },
11     {
12       "amount":"450",
13       "amountUnits":"g",
14       "ingredientName":"藕"
15     },
16     {
17       "amount":"0",
18       "amountUnits":"0",
19       "ingredientName":"香油"
20     },
21     {
22       "amount":"3",
23       "amountUnits":"g",
24       "ingredientName":"食盐"
25     },
26     {
27       "amount":"50",
28       "amountUnits":"mml",
29       "ingredientName":"白醋"
30     }
31   ],
32   "instructions":"1、准备食材 \n 2、姜用工具磨成姜蓉 \n 3、姜用工具磨成姜蓉 \n 4、藕片入开水汆一下,大概3分钟断生,捞出 \n 5、锅里倒入白醋 \n 6、烧至沸腾后加入姜蓉 \n 7、30秒后加入香油和盐,将热姜汁淋入藕片上,腌制20分钟左右即可食用"
33 
34 }
View Code

相关文章:

  • 2021-11-09
  • 2022-01-09
  • 2021-10-23
  • 2022-12-23
  • 2021-08-04
  • 2021-09-20
  • 2021-12-23
  • 2020-03-11
猜你喜欢
  • 2021-10-16
  • 2021-09-28
  • 2021-08-27
  • 2021-09-15
  • 2022-12-23
  • 2021-04-18
相关资源
相似解决方案