标签：
AngularJS是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如jQuery）合作融洽。如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度的应用，就不是AngularJS的用武之地了
多页面的web应用程序通过后台服务器程序在HTML中填充数据，然后把结果返回给浏览器。单页面应用程序也成为AJAX应用程序也是这样做的，但是做了一些拓展。anjularJS所不同的是它是在客户端完成HTML模板和数据的组合工作。这样，服务端就成了为前端提供静态资源的角色，并对这些资源进行维护。
让我们举个例子来看看anjularJS是如何在前端组合HTML模板和数据的。我们来举一个hello，word例子，但我们并不把Hello，world写在html里，我们把hello这个问候语写成我们可以再以后更改的数据形式。
来看下代码
1 <html ng-app>
2 <head>
3 <script src="angular.js"></script>
4 </head>
5 <body>
6 <div ng-controller=‘HelloController‘>
7 <p>{{greeting.text}}, World</p>
8 </div>
9 </body>
10 </html>
MVC应用程序架构是在19世纪70年代作为Smalltalk的一部分提出来的。自从被提出以来。它就成为了构建应用程序的流行架构。无论Java、c++还是OC都能看到MVC的影子。但是MVC对于web应用构建还是很不成熟。
MVC的核心就是处理数据、逻辑和界面的分开。
视图从模型中取得数据，展示给用户。当用户和应用程序交互的时候。控制器来负责相应。然后更新模型中的数据，模型通知视图数据的改变然后展示给用户。
在Anjular应用程序中，属兔就是DOM，控制器是JavaScript的类，模型数据存储在对象属性中。
我们认可MVC因为有这几个原因：首先，它给你一个元数据模型来让你存数据，这样你不用每次用的时候重新产生数据。你的项目会在理解你写了什么上有优势，当他们知道你在使用MVC结构来组织你的代码。也许最重要的我们要让你的app易于拓展维护和测试。
以前的AJAX单页面应用程序很常见，这样的平台有Rails,PHP，JSP帮助我们创建用户界面通过拼凑html和数据的方式，然后再把这些送回客户端展示出来。
类似于就Query这样的库拓展了这种方式到客户端，并且使我们以一种相同的方式。但是能单独的更新DOM，而不是更新整个页面。这里，我们组合HTML模版和数据，然后插入结果到DOM中通过设置某一元素的innerHtml。
这样的方式很好。但是当你想插入新的数据到UI中，或者改变基于用户输入的数据到正确的状态，在UI和JavaScript属性里。
但是如果我们能完成这些而不用写代码。如果我们只是生命那部分UI映射那部分JavaScript属性。让他嗯自动一步同步。这种编程的风格叫做数据绑定。我们把这种方式包含在anjularJS中是引文他能与MVC协同工作的很好。这能减少代码当你写视图和模型。把数据从一个地方移动到另一个地方的工作是自动完成的。
我们做一个例子解释。hellocontroller设置了模型greeting.text一次，之后就没再改变。我们修改这个例子通过添加一个能改变greeting.text值的文本框使greeting.text可变。
<html ng-app>
ng-app属性告诉Anjular要管理页面的那些部分。我们把它加到了HTML元素上。我们将桃酥Anjular我们想要它管理整个页面。这样做是很常见的。但是你可能想把它放到一个div里。在这个app里如果你想用一个已经存在的使用特定方法的app使用集成Anjular来管理页面
<body ng-controller=‘CartController‘>
在Angular中，你管理页面某一部分的javascript类叫做controller。通过包含控制器在body标签，我就生命了CartController将要管理所有<body>标签中的所有内容。
<div ng-repeat=‘item in items‘>
ng-repeat属性告诉这里边的东西是要循环显示的，，本例中将会产生三个div，每个都有产品题目，单位价格，总价，还有一个移除按钮。
<span>{{item.title}}</span>
通过{{}}来进行数据绑定，我们能从页面的其他部分插入数据，然后使他保持同步
<input ng-model=‘item.quantity‘>
ng-model做了文本域和属性之间的数据绑定。
{{}}是一种单向数据绑定。我们同步数据的改变通过使用ng-model。当用户填写了一个新值的时候，ng-model改变了item.quantity的值。
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
anjular提供了一种特性叫做过滤器，使我们能够格式化文本。有这么一些列过滤器叫做currency过滤器能格式化美元。
<button ng-click=‘remove($index)‘>Remove</button>
我们传入了一个$index参数，它代表了ng-repeat的序号，所以我们知道要删除的是谁。
标签：
原文地址：http://www.cnblogs.com/ycss/p/4556528.html
