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