一.AngularJS
1.简介
AngularJS 是一个 JavaScript 框架,它通过ng-directives 扩展了 HTML。 AngularJS通过ng-app 指令定义一个 应用程序。它通过ng-model 指令把元素值（比如输入域的值）绑定到应用程序。它通过ng-bind 指令把应用程序数据绑定到 HTML 视图。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
注：先用src引入AngularJS的包，用ng-app指定了一个应用程序即要运行ng-app里面的内容，在通过ng-mode把指定元素的值绑定到了应用程序。
在一个AngularJS Web应用中，控制器就像一个组织一样，作为数据模型和视图之间的渠道。控制器会向作用域中添加业务逻辑，而作用域是模型i子集。
2.AngularJS有四大特性：
1）MVC模型:Model-数据模型
View-视图层负责展示的内容。
Controller-控制器，业务逻辑和展示逻辑。
2)模块化Module
3)指令系统
4)双向数据绑定
3.表达式
AngularJS 使用 表达式 是为了把数据绑定到 HTML。其表达式应写在双大括号内：如：{{ expression }}。
AngularJS 将在表达式书写的位置"输出"数据。AngularJS 表达式，数字，字符串都 和JavaScript 表达式，数字和字符串很像。
3.AngularJS 指令的使用及数据的绑定
（1）AngularJS 指令是扩展的 HTML 属性，它在功能上相当于Taglib指令库，带有前缀 ng-。ng-if用作属性从DOM中添加和移除元素，ng-class用作属性和类，为某个元素设置class属性，ng-class-even用作属性和类，对由ng-repeat指令生成的偶数元素设置classs属性，ng-show用作属性和类在DOM中显示和影藏元素，ng-style用作属性和类，设置一个或多个CSS属性。ng-repeat属性值的格式为<name>in<collection>。
（2）双向数据的绑定
AngularJS 是通过｛｛｝｝数据绑定表达式。AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。{{ }} 是通过 ng-model=" " 进行同步。只要输入框中的内容改变则ng-model里的内容也会相应的发生变化，ng-model里的内容发生变化,则相对应的输入框的内容也会发生变化即ng-model与view进行双向数据的绑定如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libsoxin/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>
</div>
</body>
</html>
运行结果如下：
4.AngularJS模型
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。ng-hide 指令用于设置应用部分是否可见。ng-hide="true" 设置 HTML 元素不可见。ng-hide="false" 设置 HTML 元素可见。ng-show 指令可用于设置应用中的一部分是否可见 。ng-show="false" 可以设置 HTML 元素 不可见。ng-show="true" 可以以设置 HTML 元素可见。
5.AngularJS Scope作用域
Scope(作用域) 是应用在oyo HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
6.控制器用过Scope作用域向视图提供数据和逻辑，加强了数据绑定技术的基础，这也是AngularJS开发的一个独有特性。作用域的设置：当控制器申明了对于$scope服务依赖时，就可以使得控制器通过其对应的作用域向视图提供各种能力。通过控制器使用作用域地方法：
1.定义数据
2.定义行为
7.控制器
控制器是通过AngularJS的Module对象所提供的controller方法而创建出来的。controller方法的参数是新建控制器的名字和一个将被用于创建控制器的函数。也就是说控制器可以在视图中绑定数据表达式或指令中调用的JavaScrip函数。AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。
8.服务器
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。有个 $location 服务，它可以返回当前页面的 URL 地址。服务可以使用 DOM 中存在的对象，$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。
9.AngularJS Select(选择框)
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：
使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择网站:</p>
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
<p>该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。</p>
</body>
</html>
该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。
AngularJS Bootstrap
在<head>元素中添加如下代码:<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
| <label> | col-sm-2 | 跨越 2 列 |
| <div> | col-sm-10 | 跨越 10 列 |
9.路由与多视图
AngularJS可以方便地实现前端路由和多视图功能，可以在一个页面内，在不完全刷新的情况下跳转到另一个页面。
在这种情况下，index.html是一个空模版：
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html> body内的div具有ng-view属性，代表他是载入其他页面的容器。
AngularJS的路由功能，可以让该容器，在不同URL上载入不同的页面模版。
使用路由功能的JS代码如下：
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);$routeProvider.when告诉了浏览器路由规则，包括使用的模版页面以及对应的控制器。
10.事件的处理
AngularJS有自己的一套事件处理机制，click事件绑定如下，首先定义事件处理函数：
function PhoneDetailCtrl($scope, $routeParams, $http) {
...
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}
然后在模版中进行绑定
<img ng-src="{{mainImageUrl}}" class="phone">
...
<ul class="phone-thumbs">
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}" ng-click="setImage(img)">
</li>
</ul>