Angular.js教程
AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC框架，由谷歌最初开发的 开源项目，干净的架构吸引了大量粉丝，适合建立CRUD类型的业务应用程序，并不适合开发游戏等应用， 使用声明性编程的用户界面和命令式编程的逻辑， 支持现代桌面和移动浏览器 Internet Explorer版本8.0及以上。
AngularJS是一款客户端MVC的javascript框架，而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS架构)，如果你有Struts或SpringMVC等后端MVC框架编程经验，学习Angular会很快，基本是按照同一个MVC思路实现的。MVC模式见：
Model模型:
- 业务数据.通过$scope显露给视图View
View视图:
- 用户界面层
- 数据绑定模型
- 调用控制器的功能。
- 使用声明指令directives以便重用代码
Controller控制器
- 将视图和模型胶合一起
- 提供功能方法
- 使用服务，可重复使用的逻辑
除了上面MVC模型以外，还提供以下组件(有些类似安卓)：
服务组件
- 服务是可重用的业务逻辑组件
- 可测试性
- 能作为单身对象创建
- 使用AngularJS依赖注入的注射依赖组件
- 创建服的务作为一个模块的一部分
- 一个模块可以依赖于另一个模块
AngularJS提供的标准服务有以下：
- $http：用于处理 XMLHttpRequest
- $location：提供当前URL的信息
- $q：
异步请求使用，promise/deferred模块
- $routeProvider：配置路由
- $log：日志服务
directives标签指令：
类似JSP中的标签JSTL等或Struts的标签。能够增强Html的行为能力。指令directive有四种：
- E - Element元素名称: <my-directive></my-directive>
- A - Attribute属性: <div my-directive="exp"> </div>
- C - Class: <div class="my-directive: exp;"></div>
- M - Comment注解: <!-- directive: my-directive exp -->
内建标准的指令有：
- ng-app (A) 用来启动AngularJS
- ng-controller (A, C) 绑定控制器
- ng-model (A, C) 绑定模型
- ng-change (E, A)
- ng-click (A, C)
- ng-repeat (A, C)
Helloword第一个程序
开始一个Angular项目，可以直接拷贝这个源码项目到你的目录即可(GitHub)，然后在其基础上修改拓展。
例如一个index.html的代码如下图：
其中有两个指令。
ng-app定义了有AngularJS管理的DOM部分，用来启动AngularJS。
ng-controller定义了Scope部分，用ng-controller将控制器绑定。控制器HelloController代码是：
在index,html的scope内，{{ }}表示显示scope中的对象。
这个index.htm运行的结果就是
Hello, World
基本流程如下：
- 用户请求第一页
- 和模板一起装入index.html页面
- 等待的页面完全加载后，寻找ng-app
- 扫描绑定和指令
- 根据绑定指令通过AJAX连接到服务器加载额外的数据
具体流程图如下：静态页面DOM加载后，通过加载事件加载内容，然后注入 编译混合到DOM中，变成最后视图输出，这个原理和JSP的标签与HTML混合类似，不同的是JSP是在后端进行。
下面我们在上面index,html增加ng-model ：
我们增加了<input ng-model='greeting.text'>输入框，输入的值将赋值给greeting.text变量。
运行结果输出：
再增加ng-click如下：
ng-click是显示一个按钮。一旦点按，调用HelloController中的showGreeting方法。
运行显示结果如下：
我们看看下面图说明了上述模型和控制器和Html模板是如何整合在一起的。
控制器和模板最终都指向整合到Model之中。如果我们从读写两个方向都理解，首先模型携带后端数据库数据，并结合模板显示；当用户提交表单，模型主要用来写的，也就是存储提交表单的变量，将这些变量值存储到后端数据库。这里的Model和Struts中的表达Form就非常类似。这是一种two way databind双向数据绑定。
我们知道控制器是将视图和Model胶合在一起，这主要通过$scope这个对象。
<body ng-controller="SpicyCtrl">
<button ng-click="chiliSpicy()">Chili</button>
<button ng-click="jalapenoSpicy()">Jalape?o</button>
<p>The food is {{spice}} spicy!</p>
</body>
function SpicyCtrl($scope) {
$scope.spice = 'very';
$scope.chiliSpicy = function() {
$scope.spice = 'chili';
}
$scope.jalapenoSpicy = function() {
$scope.spice = 'jalape?o';
}
}
这里SpicyCtrl是一个控制器，$scope可以认为是代表<body ng-controller="SpicyCtrl"></body>这个范围的作用域。我们可以对作用域$scope添加新的属性，如这里是spice。深入地你可以构建自己的scope。
AngularJS教程之二 双向数据绑定
AngularJS教程之三 服务与依赖注入
AngularJS教程之四 phone完整进阶案例