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的用武之地了javascript
3.客服端模板
多页面的web应用程序经过后台服务器程序在HTML中填充数据，而后把结果返回给浏览器。单页面应用程序也成为AJAX应用程序也是这样作的，可是作了一些拓展。anjularJS所不一样的是它是在客户端完成HTML模板和数据的组合工做。这样，服务端就成了为前端提供静态资源的角色，并对这些资源进行维护。html
让咱们举个例子来看看anjularJS是如何在前端组合HTML模板和数据的。咱们来举一个hello，word例子，但咱们并不把Hello，world写在html里，咱们把hello这个问候语写成咱们能够再之后更改的数据形式。前端
来看下代码java
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应用构建仍是很不成熟。c++
MVC的核心就是处理数据、逻辑和界面的分开。web
视图从模型中取得数据，展现给用户。当用户和应用程序交互的时候。控制器来负责相应。而后更新模型中的数据，模型通知视图数据的改变而后展现给用户。编程
在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的序号，因此咱们知道要删除的是谁。
- 1. anjularjs
- 2. anjularjs 过滤器
- 3. AnjularJs教程
- 4. AnjularJS 学习
- 5. Anjularjs基础使用
- 6. 【AnjularJS系列5】scopes、module、controller
- 7. anjularjs弹出model（模态框）
- 8. 【AnjularJS系列6】过滤器
- 9. anjularjs-filter,directive,angular模块化
- 10. AnjularJS 表单验证(ng-form)
- 更多相关文章...
- • Scala 简介 - Scala教程
- • AJAX 简介 - PHP教程
- • Github 简明教程
- • Java Agent入门实战（一）-Instrumentation介绍与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。