Web上的MVC框架概念介绍及简单示例
如果你已经编写过很多应用程序，那么你很可能会一次又一次地解决同样的编码问题。能够减少这种重复发明轮子事情的技术，就是使用软件框架。
在本篇文章中，主要讲MVC框架，并且介绍如何使用Google的AngulasJS针对单页面的JavaScript应用程序实现这样一种框架。
#附: : 更多的angular cdn地址：http://www.bootcdn.cn/angular.js/
angular cdn地址 ：https://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2-all.umd.min.js
1，软件框架
框架的作用是提高你编写应用程序的效率，与此同时，为应用程序增强一致性，提高高质量和可靠性以及稳定性。
选择编写良好和合适的框架，可以给你节省很多的时间，以便你关注自己的应用程序的独特需求，而不会在应用程序架构上花费太多的宝贵时间。
（1）为何要使用框架
框架帮助你复用此前已经构建和测试过的代码，提高应用程序的可靠性，减少了在应用程序创建中所需的编码和测试工作。由于框架将结构强加于你的应用程序之上，它还鼓励了更好的编程实践。
最后，框架通常为你提供一些方法来扩展其功能，以使的它更加适合于你的应用程序的需求。
（2）框架和库不同
很多人把软件框架和软件库这两个术语搞混淆了。
然而，框架和库之间有一个基本的区别，当你使用一个库的时候，该库中的对象和方法是已经存在的，等待应用程序调用它们。要创建应用程序，你需要知道自己的代码中会用到哪些对象和方法。
当使用一个框架的时候，你自己要设计和便携应用程序所使用的对象和方法。框架只是为你提供一个编写它们的一致的结构。
2，模型-视图-控制器（MVC）架构
MVC软件架构的概念相当简单:将应用程序分为不同的单元，其中每一个单元分别属于如下几个部分之一。
（1）模型
模型表示应用程序中处理业务数据和业务逻辑的部分。模型可能是一个单个的对象，或者是它也可以是由各种对象所组成的某些结构。
（2）视图
视图是用于将信息展现给用户的一个模型的表示。它通常充当一个表现过滤器，只是将一个模型中包含的某些方面的数据展现出来，而隐藏另外一些数据。视图向模型请求，以获取需要表现的数据。它也可以通过发送相应的命令，来修改模型中的数据。这样的查询和命令，都必须在模型中由语义定义。
（3）控制器
控制器充当用户和应用程序之间的连接，它安排视图在屏幕上显示，或者通过显示菜单，输入字段，按钮或其他的页面元素来读取用户输入。控制器先解释用户输入，然后将其传递给一个或多个视图。
3，针对WebAPP使用MVC框架
MVC架构能够很好地用于Web应用程序框架中。
- 模型：页面内容存储在支撑应用程序的模型之中。技术性的细节可能有所不同，文本和图像可能存储在数据库中，而服务器文件则以其他的方式存储，但是，数据融合在一起的规则是相同的，都是作为框架的模型部分进行编码。
- 视图：HTML和CSS给内容添加了一个或多个可视化的显示层，应用这些层面可以给Web应用程序一种特定的外观和样式。我们可以修改内容显示的方式，而根本不需要修改模型中存储的初始的内容。
- 控制器：控制器元素包含了连接到页面上的交互元素的程序代码，例如，表单字段，按钮和链接等。这些代码解释用户输入并与模型和视图通信。
4，AngularJS框架
AngularJS框架是Google开发的一个MVC框架，它能够用来构建架构良好的,易于测试的和可维护的JavaScript Web应用程序。它涉及来帮助生成强大的，可靠的，单页面的Web应用程序。
（1）AngularJS概览
AngularJS是一个MVC框架，它将你的HTML代码（对应与MVC泛型中的视图）和JavaScript对象绑定起来（MVC模型部分）。
这样一来，对于模型做出的任何修改，都会自动更新到页面上，反之亦然，例如，当一个文本字段的内容变化的时候，和字段相关联的模型也会更新。同样的方式，视图中的任何修改，例如用户在一个字段输入了信息，或者单击了一个按钮，都会修改相应的模型。
在幕后，AngularJS处理了所有这些逻辑，因此，你不必编写代码来更新页面当HTML代码，或者监听并响应用户事件。
（2）在页面中包含AngularJS
要使用AngularJS，必须在页面中包含它。更容易的方式就是通过Google的CDN来包含它:
额，不用看了，国内google的 大家都懂的，用.百度的就行了。
（3）用ng-指令扩展HTML
AngularJS使用了很多的指令，来帮助你把页面的HTML元素和MVC架构中的模型关联起来。这些指令中每个都是以ng-开头的，并且可以添加到任何元素中。
在任何页面中必须包含的关键属性是ng-app，它定义了一个AngulerJS应用。你需要将其应用于一个元素，而该元素包含了带有ng-指令的其他页面元素。可以将其应用于页面的
元素（使得整个页面都作为应用程序的一部分），或者应用于包含应用程序的一个
当页面加载的时候，AngularJS找到这个元素，并且处理在其子元素上所见到的所有ng-指令。
两个更为重要的ng-指令 是ng-model 和ng-bind。
ng-model指令把输入字段，选择框，文本字段等HTML空间的值和模型中存储的应用程序数据连接起来。
ng-bind指令将MVC模型中的应用程序数据绑定到HTML视图中的元素。
一个小示例如下程序清单所示。
AngularJS Example
Name:
只要Web页面加载了，AngulerJS就会开始工作，ng-app 指令告诉AngularJS，在这个例子中，是页面的
元素包含了一个AbgularKS应用程序。然后，ng-model指令将输入字段中包含的值绑定到变量名称。类似地，ng-bind指令将元素的HTML内容绑定到变量名。通过这种方式，元素变成了MVC框架中的视图 现在，输入字段中做出的任何修改，都会立即反应到元素中，如图20.2所示。
这样就行了。我们已经有了一个动态的应用程序，而如果没有AngularJS的话，要使用多得多的代码才能构建它。我们不必担心为数据绑定和更新代码，也不必指定任何模型。实际上，我们生殖不必自行编写任何的JavaScript代码!由于AngularJS的设计，应用程序变得很简单，并且已经能工作了
（4）作用域
作用域是一个对象，他将一个DOM元素(MVC架构中的视图部分)连接到控制器；在MVC的术语中，这个对象变成了模型。
控制器和视图都有一个$rootScope。这个$rootScope是顶级的作用域，它属于包含了ng-app指令的DOM元素。
当在应用程序中没有设置显式的作用域的时候，$rootScope就是AngularJS用来绑定数据和函数的作用域。前面的实例正是因为这样才能够工作的。
为了更好地了解作用域是如何工作的，让我们将控制器绑定到一个特殊的DOM元素，为该元素创建一个作用域，然后将与其交互。
（5）指令
在前面的示例中，我们已经见到过几个指令。在AngularJS中，指令是连接到一个DOM元素的一个函数，使这个元素能够运行方法，连接到控制域和作用域对象，以及操作DOM。
当一个AngularJS应用程序启动的时候，AngularJS开始遍历DOM（从拥有ng-app属性的DOM元素开始），它将会解析复杂收集和运行这些指令的代码。
指令复制实现AngularJS应用程序动态化的所有艰苦工作。我们在前面已经看到过指令的几个示例，包括ng-model和ng-bind指令:
Name:
AngularJS中还内建了很多默认的指令，我们接下来将会介绍其中的一些。
两对花括号用于包含一个表达式指令:
{{expression}}
AngularJS表达式和JavaScript表达式几乎一样，因为它们都包含字面值，操作符和遍历。如下都是有效的AngularJS表达式:
{{3+9}}
{{firstname + " " +lastname}}
AngularJS表达式在写该表达式的具体位置解释为数字。
ng-init
ng-init指令在启动的时候运行，在AngularJS运行任何应用程序代码之前，它就运行了，使用ng-init指令，你可以在运行任何其他函数之前设置默认的变量。
ng-click
ng-click指令给一个DOM元素添加一个监听器。当单击该元素的时候，AngularJS将执行该指令中定义的表达式。
ng-repeat
ng-repeat指令遍历一个集合，并且为每一个项加载一个模板。它所复制的模板就是拥有ng-repeat属性的元素。
$scope.departments = [
{name:'sales'}
{name:'support'}
{name:'Production'}
{name:'Shipping'}
];可以使用ng-repeat来遍历它们:
- {{dept.name}}
这里的
- {{dept.name}}
（7）过滤器
过滤器的工作就是从数组中选择元素的一个子集，并且将其作为一个新的数组返回。如下是能够对一个数组做的一些事情:
- 使用currency，将一个数字格式化为货币的格式。
- 使用filter，从数组中选择元素的一个子集。
- 使用lowercase，将一个字符串格式化为小写的。
- 使用orderBy，根据一个表达式来排序数组。
- 使用uppercase，将一个字符串格式化为大写的。
如下是AngularJS中以个过滤器的一般语法:
{{filter_expression | filter：expression : comparator }}
假设你想要对某些数据应用一个currency过滤器:
Total:
Tax:
Invoice Total = {{(netTotal + tax) | currency }}
（8）给指令添加一个过滤器
也可以给任何一个ng-指令添加一个过滤器，只要使用管道符号(|),后面跟着一个过滤器的说明就可以了:
- {{dept.name}}
这个实力会把所有列表条目都显示为大写字母。
5，构建一个AngularJS应用程序
现在，我们将所有的知识综合应用，来构建一个基本的AngularJS应用程序。
一个基本的AngularJS应用程序
我们先从一个基本的HTML页面开始，它包含一个文本输入字段，用来接收用户输入的搜索字符串，还有一个
下面的程序清单展示了这个页面的基本的HTML，其中已经包含了AngularJS框架。
AngularJS Example
Search Departments:
- 接下来，我们对页面应用必要的ng-指令
- 对元素应用ng-app指令，将该元素定义为这个AngularJS应用程序的容器。
- 对搜索字段应用ng-model指令，将其定义为MVC框架中的一个模型。
- 对搜索结果的列表中的
- 元素应用ng-repeat指令。
- 元素将会对于每个搜索结果都重复一次。
我们还使用了ng-init指令来为应用程序设置一些初始数据。在真实的情况中，这一数据更可能是从诸如服务器端数据库这样的外部来源引入的，但在这里，只是为了充当示例
ng-init = "departments = [
{name:'Sales',contact:'Marsha Brown'},
{name:'Support',contact:'xiaobaicai'},
{name:'Production',contact:'xiaohuihui'},
{name:'Service',contact:'xiaohong'},
{name:'Location',contact:'xiaobaibai'}]"我们的初始数据包含了虚构的各个部门的一个数组，每一项都包含了部门名称，以及负责管理该部门的职员的负责人。
上面的程序清单修改后如下所示，
AngularJS Example
Search Departments:
- {{ dept.name }}