Angular简单应用剖析

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

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

这款应用的特性如下：

a) 两列布局

b) 在左侧有一个导航栏

c) 允许你创建新菜谱

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

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

模型、控制器和模版（视图）之间的关系

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

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

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

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

n 展示模型

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

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

n 过滤并格式化数据

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

模型

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

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

一个ID，这个ID将会被持久化到服务器

一个名称

一个简短的描述

烹饪指南

是否是特色菜

配料数组，每一项都包含重量、单位及名称

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

<h2>Edit Recipe</h2>
<form name="recipeForm" ng-submit="save()" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="title">标题:</label>

<div class="controls">
<input type="text" ng-model="recipe.title" id="title" class="input-xlarge" focus/>
</div>
</div>

<div class="control-group">
<label class="control-label" for="description">描述:</label>

<div class="controls">
<input type="text" ng-model="recipe.description" id="description" class="input-xlarge" focus/>
</div>
</div>

<div class="control-group">
<label class="control-label" for="ingredients">原材料:</label>
<ul class="controls" ng-controller="IngredientsController">
<li ng-repeat="i in recipe.ingredients">
<input type="text" ng-model="i.amount" class=""/>
<input type="text" ng-model="i.amountUnits" class=""/>
<input type="text" ng-model="i.ingredientName" class=""/>
<button class="btn btn-primary" ng-click="removeIngredient($index)">
<i class="glyphicon-minus-sign"></i>
删除
</button>
</li>
<button type="button" class="btn btn-primary" ng-click="AddIngredient()">
<i class="glyphicon-plus-sign"></i> 添加
</button>
</ul>
<input type="text" ng-model="recipe.ingredients" id="ingredients" class="input-xlarge" focus/>

</div>

<div class="control-group">
<label class="control-label" for="instructions">做法:</label>

<div class="controls">
<input type="text" ng-model="recipe.instructions" id="instructions" class="input-xxlarge" focus/>
</div>
</div>

<div class="form-actions">
<button class="btn btn-primary" ng-click="save()">保存</button>
<button class="btn btn-primary" ng-show="!recipe.id" ng-click="remove()">删除</button>
</div>
</form>

View Code

项目架构图：



这个项目比较简单、就不上效果图了。大家可以写一个自己的demo来熟悉angular的各个模块。