anjularjs简介

1 什么时候该用AngularJS

AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架，因为它的核心其实是对HTML标签的增强。何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。后面会详细介绍。那么，什么又是动态web应用呢？与传统web系统相区别，web应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。为了实现这些，ng引入了一些非常棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定，能够让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。　另外一个疑问，ng是MVC框架吗？还是MVVM框架？官网有提到ng的设计采用了MVC的基本思想，而又不完全是MVC，因为在书写代码时我们确实是在用ng-controller这个指令(起码从名字上看，是MVC吧)，但这个controller处理的业务基本上都是与view进行交互，这么看来又很接近MVVM。让我们把目光移到官网那个非醒目的title上：“AngularJS — Superheroic JavaScript MVW Framework”。

2. 什么时候该用AngularJS

AngularJS是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如jQuery）合作融洽。如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用，就不是AngularJS的用武之地了

3.客服端模板

多页面的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>

4.模型-视图-控制器（MVC）

MVC应用程序架构是在19世纪70年代作为Smalltalk的一部分提出来的。自从被提出以来。它就成为了构建应用程序的流行架构。无论Java、c++还是OC都能看到MVC的影子。但是MVC对于web应用构建还是很不成熟。

MVC的核心就是处理数据、逻辑和界面的分开。

视图从模型中取得数据，展示给用户。当用户和应用程序交互的时候。控制器来负责相应。然后更新模型中的数据，模型通知视图数据的改变然后展示给用户。

在Anjular应用程序中，属兔就是DOM，控制器是JavaScript的类，模型数据存储在对象属性中。

我们认可MVC因为有这几个原因：首先，它给你一个元数据模型来让你存数据，这样你不用每次用的时候重新产生数据。你的项目会在理解你写了什么上有优势，当他们知道你在使用MVC结构来组织你的代码。也许最重要的我们要让你的app易于拓展维护和测试。

5.数据绑定

以前的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的序号，所以我们知道要删除的是谁。