小白菜的博客

一个具有程序员所有缺点的程序员的博客

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-指令的其他页面元素。可以将其应用于页面的<body>元素(使得整个页面都作为应用程序的一部分),或者应用于包含应用程序的一个<div>元素:

    <body ng-app>

    当页面加载的时候,AngularJS找到这个元素,并且处理在其子元素上所见到的所有ng-指令。

    两个更为重要的ng-指令 是ng-model 和ng-bind。

    ng-model指令把输入字段,选择框,文本字段等HTML空间的值和模型中存储的应用程序数据连接起来。

    ng-bind指令将MVC模型中的应用程序数据绑定到HTML视图中的元素。

    一个小示例如下程序清单所示。

<html>
<head>
<head>
<title>AngularJS Example</title>
<style>
	#output{
		font :28px bold helvetica,arial,sans-serif;
		color:red;
		}
</style>
<script src="https://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2-all.umd.min.js"></script>
</head>
<body ng-app>
	<p>Name:<input type="text" ng-model="name"></p>
	<span id="output" ng-bind="name"></span>
</body>
</html>

    只要Web页面加载了,AngulerJS就会开始工作,ng-app 指令告诉AngularJS,在这个例子中,是页面的<body>元素包含了一个AbgularKS应用程序。然后,ng-model指令将输入字段中包含的值绑定到变量名称。类似地,ng-bind指令将<span>元素的HTML内容绑定到变量名。通过这种方式,<span>元素变成了MVC框架中的视图

    现在,输入字段中做出的任何修改,都会立即反应到<span>元素中,如图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指令:

<body ng-app>
	<p>Name:<input type="text" ng-model="name"></p>
	<span id="output" ng-bind="name"></span>
</body>

    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来遍历它们:

<ul>

    <li ng-repeat="dept in departments">{{dept.name}}</li>

</ul>

    这里的<li>元素将会复制4次,以得到发送给视图的列表。

<ul>
	<li ng-repeat="dept in departments">{{dept.name}}</li>
</ul>
(7)过滤器

    过滤器的工作就是从数组中选择元素的一个子集,并且将其作为一个新的数组返回。如下是能够对一个数组做的一些事情:

  • 使用currency,将一个数字格式化为货币的格式。
  • 使用filter,从数组中选择元素的一个子集。
  • 使用lowercase,将一个字符串格式化为小写的。
  • 使用orderBy,根据一个表达式来排序数组。
  • 使用uppercase,将一个字符串格式化为大写的。

    如下是AngularJS中以个过滤器的一般语法:

    {{filter_expression | filter:expression : comparator }}

    假设你想要对某些数据应用一个currency过滤器:

<div ng-app>
Total:<input type="number" ng-model="netTotal">
Tax:<input type="number" ng-model="tax">
<p>Invoice Total = {{(netTotal + tax) | currency }}</p>
</div>
(8)给指令添加一个过滤器

    也可以给任何一个ng-指令添加一个过滤器,只要使用管道符号(|),后面跟着一个过滤器的说明就可以了:

<ul>
	<li ng-repeat="dept in departments | filter : uppercase">{{dept.name}}</li>
</ul>

    这个实力会把所有列表条目都显示为大写字母。

5,构建一个AngularJS应用程序

    现在,我们将所有的知识综合应用,来构建一个基本的AngularJS应用程序。

    一个基本的AngularJS应用程序

    我们先从一个基本的HTML页面开始,它包含一个文本输入字段,用来接收用户输入的搜索字符串,还有一个<div>元素,用来包含带有输入的字符串的搜索结果的一个列表。

    下面的程序清单展示了这个页面的基本的HTML,其中已经包含了AngularJS框架。

<html>
<head>
	<title>AngularJS Example</title>
	<script src="https://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2-all.umd.min.js"></script>
</head>
<body>
	<p>Search Departments:<input type="text"></p>
	<div id="list-container">
		<ul>
			<li></li>
		</ul>
	</div>
</body>
</html>
  • 接下来,我们对页面应用必要的ng-指令
  • 对<body>元素应用ng-app指令,将该元素定义为这个AngularJS应用程序的容器。
  • 对搜索字段应用ng-model指令,将其定义为MVC框架中的一个模型。
  • 对搜索结果的列表中的<li>元素应用ng-repeat指令。<li>元素将会对于每个搜索结果都重复一次。

    我们还使用了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'}]"

    我们的初始数据包含了虚构的各个部门的一个数组,每一项都包含了部门名称,以及负责管理该部门的职员的负责人。

    上面的程序清单修改后如下所示,

<html>
<head>
	<title>AngularJS Example</title>
	<style>
	body{
		background-color:#ddf;
		font:16px bold helvetica,arial,sans-serif;
		}
	input{
		padding:10px;
		}
	#list-container{
		background-color:white;
		color:#448;
		border-radius:25px;
		border:1px solid black;
		padding:25px;
		}
	</style>
	<script src="https://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2-all.umd.min.js"></script>
</head>
<body ng-app>
	<p>Search Departments:<input type="text" placeholder="Enter search string" ng-model="searchString"></p>
	<div  ng-init = " departments = [
	{name:'Sales',contact:'Marsha Brown'},
	{name:'Support',contact:'xiaobaicai'},
	{name:'Production',contact:'xiaohuihui'},
	{name:'Service',contact:'xiaohong'},
	{name:'Location',contact:'xiaobaibai'}]"></div>
	<div id="list-container">
		<ul>
			<li ng-repeat="dept in departments">{{ dept.name }}</li>
		</ul>
	</div>
</body>
</html>

阅读更多
版权声明: https://blog.csdn.net/qq_39263663/article/details/80316235
个人分类: javascript
上一篇使用javascript操作cookie
下一篇记一次使用JS编写Chrome扩展程序的实践
想对作者说点什么? 我来说一句

简单MVC框架例子

2017年10月30日 1.26MB 下载

asp.net MVC框架示例代码

2011年11月10日 1.3MB 下载

没有更多推荐了,返回首页

关闭
关闭