（4）Angular的开发
angular框架，库，是一款非常优秀的前端高级JS框架，有了这个框架就可以轻松构建SPA应用程序，通过指令宽展了HTML，通过表达式绑定数据到HTML。
轻松构建SPA应用程序，单一页面应用程序
http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html http://www.apjs.net/ http://www.angularjs.cn/ http://docs.angularjs.cn/api https://material.angularjs.org http://angular-ui.github.io/
更少的代码，实现更强劲的功能
image.png
image.png
传统方式实现加法运算
image.png
Angular实现加法运算
image.png
传统方式实现数据列表呈现
image.png
image.png
AngularJS MVC 模块化 自动化双向数据绑定 指令系统
下载 Angular.js 的包 https://github.com/angular/angular.js/releases 使用 CDN 上的 Angular.js http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js 使用 Bower 安装 bower install angular 使用 NPM 安装 npm install angular
创建一个新的HTML文件
image.png
HTML 页面中 ng-xxx 的属性称之为指令 ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序管理的边界 ng-model 指令把文本框的值绑定到变量 name 上 Angular 最大程度的减少了页面上的 DOM 操作 让 JavaScript 中专注业务逻辑的代码 通过简单的指令结合页面结构与逻辑数据 通过自定义指令实现组件化编程
我们需要本地运行 Angular 文档 下载最新的 Angular 包 MVC 是一种应用程序的开发思想 为了解决应用程序展示结构，业务逻辑之间的紧耦合关系
模型 处理数据和业务逻辑
视图 向用户展示数据
控制器 组织调度相应的处理模型
AngularJS很重要的一个特性就是实现模块化编程
var myApp = angular.module("MyApp", []);
控制器
angular.module('OneApp', [])
.controller('HelloController', [
'$scope',
function($scope) {
$scope.p = {
name: 'zhangsan'
};
}
]);控制器 为应用中的模型设置初始状态 通过$scope对象把数据模型或函数行为暴露给视图 监视模型的变化，做出相应的动作
// 监视购物车内容变化，计算最新结果
$scope.$watch(‘totalCart’, calculateDiscount);
scope暴露数据模型（数据，行为）
AngularJS 表达式可以包含字母，操作符，变量
ng-repeat指令用来编译一个数组重复创建当前元素
<ul class="messages">
<li ng-repeat="item in messages track by $index">
{{item}}
</li>
</ul><ul class="messages">
<li ng-repeat="item in messages track by $index" ng-class="{red:item.read}">
{{item.content}}
</li>
</ul>ng-show/ng-hide 指令 ng-link/ng-src 指令
<!-- 浏览器在解析HTML时会去请求{{item.url}}文件 -->
<img src="{{item.url}}">
<!-- 可以使用ng-src解决该问题 -->
<img ng-src="{{item.url}}">ng-model ng-class ng-show/ng-hide/ng-if ng-click ng-link/ng-src 过滤器（Filter） 过滤器的主要用途就是一个格式化数据的小工具， date 过滤器
<span>{{'1284893553026' | date:"MM/dd/yyyy 'at' h:mma"}}</span>limitto 过滤器 limitto过滤器用于限制一个字符串或数组展示的长度：
<ul class="messages">
<li ng-repeat="item in messages | limitTo:-2">
{{item.content | limitTo:2 }}
</li>
</ul>filter过滤器会根据设置的检索数据过滤未匹配到的数据内容
<ul class="messages">
<li ng-repeat="item in messages | filter:{content:123}">
{{item.content}}
</li>
</ul>Form 表单 – 验证规则
必填项 required or ng-required 最小长度 minlength or ng-minlength 最大长度 maxlength 类型 type（number、email）
服务（Service）
公用（公共）的业务逻辑集中存放的一段代码
通过模块的service方法创建一个服务：
var myApp = angular.module('MyApp', []);
// 通过factory方法创建一个公用的service
var userService = myApp.service('UserService', function() {
var users = { 1: 'zhangsan1', 2: 'zhangsan2' };
return {
getUser: function(id) {
return users[id];
},
addUser: function(id, name) {
users[id] = name;
},
};
});$http服务是AngularJS中处理AJAX的服务
// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});MVC
Model（数据模型，业务逻辑） View（界面展示，展示结构） Controller（控制器，控制逻辑）
image.png
AngularJS实现了双向数据绑定