一.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-mode把指定元素的值绑定到了应用程序。
在一个AngularJS Web应用中，控制器就像一个组织一样，作为数据模型和视图之间的渠道。控制器会向作用域中添加业务逻辑，而作用域是模型i子集。AngularJS使用了MVC模式，即模型Model-视图View-控制器Controller。
2.表达式
AngularJS 使用 表达式 是为了把数据绑定到 HTML。其表达式应写在双大括号内：如：{{ expression }}。
AngularJS 将在表达式书写的位置"输出"数据。AngularJS 表达式，数字，字符串都 和JavaScript 表达式，数字和字符串很像。
3.AngularJS 指令的使用及数据的绑定
（1）AngularJS 指令是扩展的 HTML 属性，带有前缀 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=" " 进行同步。如下：
<!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>
Angular.js
原文地址：http://www.cnblogs.com/PHM64123/p/7604001.html