AngularJs | 玖牛一毛的博客

文章目录

1. AngularJs简介
2. AngularJS 表达式
3. AngularJS 指令
4. AngularJS Scope(作用域)
5. AngularJS 控制器
6. AngularJS 过滤器
7. AngularJS 服务(Service)
8. AngularJS XMLHttpRequest
1. 8.1. 读取 JSON 文件
2. 8.2. AngularJS $http
9. AngularJS Select(选择框)
10. AngularJS 表格
11. AngularJS HTML DOM
12. AngularJS 事件
13. ng-click 指令
1. 13.1. 隐藏 HTML 元素
14. AngularJS 模块
15. AngularJS 表单
16. AngularJS 输入验证
1. 16.1. 输入验证
2. 16.2. 实例解析
17. AngularJS API
18. AngularJS 动画

AngularJs简介

AngularJS 扩展了 HTML

1
2
3
4 <div ng-app="">
 	<p>名字 : <input type="text" ng-model="name"></p>
 	<h1>Hello {{name}}</h1>
</div>

ng-app

指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的”所有者”。
ng-model

指令把输入域的值绑定到应用程序变量 name
ng-bind

指令把应用程序变量 name 绑定到某个段落的 innerHTML。

什么是 AngularJS？

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素”背后”添加代码。
AngularJS 支持输入验证。

AngularJS 指令

AngularJS 指令是以 ng 作为前缀的 HTML 属性。例如：

ng-init

指令初始化 AngularJS 应用程序变量。

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

<div data-ng-app="" data-ng-init="firstName='John'">
    <p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>

AngularJS 表达式

AngularJS 表达式写在双大括号内：
{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置”输出”数据。
AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例： 10 或 undefined undefined

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
	</head>
	<body>
	<div ng-app="">
	  <p>我的第一个表达式： {{ 5 + 5 }}</p>
	</div>
	</body>
</html>

AngularJS 应用

AngularJS 模块（Module）定义了 AngularJS 应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。

AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
//AngularJS 模块定义应用:
var app = angular.module('myApp', []);
//AngularJS 控制器控制应用:
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

AngularJS 表达式

AngularJS 对象

1
2
3

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
	<p>姓为 {{ person.lastName }}</p>	
</div>

AngularJS 数组

1
2
3

<div ng-app="" ng-init="points=[1,15,19,2,40]">
	<p>第三个值为 {{ points[2] }}</p>	
</div>

AngularJS 表达式与 JavaScript 表达式

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

AngularJS 指令

AngularJS 通过被称为指令的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。

###AngularJS 指令###

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

完整的指令内容可以参阅 AngularJS 参考手册。

<div ng-app="" ng-init="firstName='John'">
	  <p>在输入框中尝试输入：</p>
	  <p>姓名：<input type="text" ng-model="firstName"></p>
	  <p>你输入的为： {{ firstName }}</p>	
</div>

ng-app 指令告诉 AngularJS，div 元素是 AngularJS 应用程序的”所有者”。

一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
	  <p>使用 ng-repeat 来循环数组</p>
	  <ul>
	    <li ng-repeat="x in names">
	      {{ x }}
	    </li>
	  </ul>
<div>

ng-repeat 指令用在一个对象数组上：

<div ng-app="" ng-init="names=[
	{name:'Jani',country:'Norway'},
	{name:'Hege',country:'Sweden'},
	{name:'Kai',country:'Denmark'}]">	
	<p>循环对象：</p>
	<ul>
	  <li ng-repeat="x in names">
	    {{ x.name + ', ' + x.country }}
	  </li>
	</ul>	
</div>

AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。
把实例中的对象想象成数据库中的记录。

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了 初始值。

通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

ng-model 指令

ng-model 指令绑定 HTML 元素到应用程序数据。

ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTMl 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

可以通过以下方式来调用指令：

元素名
属性
类名
注释

元素名

<runoob-directive></runoob-directive>

属性

<div runoob-directive></div>

类名

<div class="runoob-directive"></div>

注释

<!-- 指令: runoob-directive -->

限制使用

你可以限制你的指令只能通过特定的方式来调用。

通过添加 restrict 属性,并设置只值为 “A”, 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

restrict 值可以是以下几种:

E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

##AngularJS ng-model 指令##
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

ng-model 指令

ng-model 指定可以将输入域的值与 AngularJS 创建的变量绑定。

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

验证用户输入

<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

以上实例中，提示信息会在 ng-show 属性返回 true 的情况下显示。

应用状态

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
	Email:
	<input type="email" name="myAddress" ng-model="myText" required>
	<p>编辑邮箱地址，查看状态的改变。</p>
	<h1>状态</h1>
	<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
	<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
	<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>	
</form>

CSS 类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myAddress" ng-model="text" required>
</form>

ng-model 指令根据表单域的状态添加/移除以下类：

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。

如何使用 Scope

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

控制器中的属性对应了视图上的属性：

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>	
</div>	
<script>
var app = angular.module('myApp', []);	
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如：。

Scope 概述

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
如果你修改了视图，模型和控制器也会相应更新：

<div ng-app="myApp" ng-controller="myCtrl">	
<input ng-model="name">	
<h1>我的名字是 {{name}}</h1>	
</div>	
<script>
var app = angular.module('myApp', []);	
app.controller('myCtrl', function($scope) {
    $scope.name = "John Dow";
});
</script>

Scope 作用范围

了解你当前使用的 scope 是非常重要的。

在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。

当我们使用 ng-repeat 指令时，每个重复项都访问了当前的重复对象:

<div ng-app="myApp" ng-controller="myCtrl">	
<ul>
    <li ng-repeat="x in names">{{x}}
</ul>	
</div>	
<script>
var app = angular.module('myApp', []);	
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

每个 li 元素可以访问当前的重复对象，这里对应的是一个字符串，并使用变量 x 表示。

根作用域???

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

创建控制器时，将 $rootScope 作为参数传递，可在应用中使用：

<div ng-app="myApp" ng-controller="myCtrl">	
<h1>{{lastname}} 家族成员:</h1>	
<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}
</ul>
</div>	
<script>
var app = angular.module('myApp', []);	
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

AngularJS 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象。

AngularJS 控制器

AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}	
</div>	
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

应用解析：
AngularJS 应用程序由 ng-app 定义。应用程序在 div 内运行。
ng-controller=”myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
控制器也可以有方法（变量和函数）：

<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}	
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

外部文件中的控制器

在大型的应用程序中，通常是把控制器存储在外部文件中。

只需要把 script 标签中的代码复制到名为 personController.js 的外部文件中即可：

<div ng-app="myApp" ng-controller="personCtrl">	
	First Name: <input type="text" ng-model="firstName"><br>
	Last Name: <input type="text" ng-model="lastName"><br>
	<br>
	Full Name: {{firstName + " " + lastName}}	
	</div>
	<script src="personController.js"></script>

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器

AngularJS 过滤器可用于转换数据：

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

表达式中添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

uppercase 过滤器将字符串格式化为大写：

1
2
3

<div ng-app="myApp" ng-controller="personCtrl">
	<p>姓名为 {{ lastName | uppercase }}</p>	
	</div>

lowercase 过滤器将字符串格式化为小写：

1
2
3

<div ng-app="myApp" ng-controller="personCtrl">
	<p>姓名为 {{ lastName | lowercase }}</p>	
	</div>

currency 过滤器

currency 过滤器将数字格式化为货币格式：

<div ng-app="myApp" ng-controller="costCtrl">
	<input type="number" ng-model="quantity">
	<input type="number" ng-model="price">
	<p>总价 = {{ (quantity * price) | currency }}</p>
	</div>

向指令添加过滤器

orderBy 过滤器根据表达式排列数组：

<div ng-app="myApp" ng-controller="namesCtrl">	
	<ul>
	  <li ng-repeat="x in names | orderBy:'country'">
	    {{ x.name + ', ' + x.country }}
	  </li>
	</ul>	
	<div>

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

<div ng-app="myApp" ng-controller="namesCtrl">	
	<p><input type="text" ng-model="test"></p>	
	<ul>
	  <li ng-repeat="x in names | filter:test | orderBy:'country'">
	    {{ (x.name | uppercase) + ', ' + x.country }}
	  </li>
	</ul>	
	</div>

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务，或使用内建服务。

什么是服务？

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。

有个 $location 服务，它可以返回当前页面的 URL 地址。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    myUrl = $location.absUrl();
});

注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。

为什么使用服务?

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

$http 服务

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

使用 $http 服务向服务器请求数据:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

两秒后显示信息:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

创建自定义服务

你可以创建自定义的访问，链接到你的模块中：

创建名为hexafy 的访问:

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

要使用自定义的访问，需要在定义过滤器的时候独立添加:

使用自定义的的服务 hexafy 将一个数字转换为16进制数:

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

过滤器中，使用自定义服务

当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。

在过滤器 myFormat 中使用服务 hexafy:

<div ng-app="myApp">
	在过滤器中使用服务:	
	<h1>{{255 | myFormat}}</h1>	
	</div>
	<script>
	var app = angular.module('myApp', []);
	app.service('hexafy', function() {
		this.myFunc = function (x) {
	        return x.toString(16);
	    }
	});
	app.filter('myFormat',['hexafy', function(hexafy) {
	    return function(x) {
	        return hexafy.myFunc(x);
	    };
	}]);
	</script>

在从对象会数组中获取值时你可以使用过滤器：

创建服务 hexafy:

<div ng-app="myApp" ng-controller="myCtrl">
	<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>	
	<ul>
	  <li ng-repeat="x in counts">{{x | myFormat}}</li>
	</ul>	
	<p>过滤器使用服务将10进制转换为16进制。</p>
	</div>	
	<script>
	var app = angular.module('myApp', []);
	app.service('hexafy', function() {
		this.myFunc = function (x) {
	        return x.toString(16);
	    }
	});
	app.filter('myFormat',['hexafy', function(hexafy) {
	    return function(x) {
	        return hexafy.myFunc(x);
	    };
	}]);
	app.controller('myCtrl', function($scope) {
	    $scope.counts = [255, 251, 200];
	});
	</script>

AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

读取 JSON 文件

存储在web服务器上的 JSON 文件

AngularJS $http

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

<div ng-app="myApp" ng-controller="customersCtrl"> 	
	<ul>
	  <li ng-repeat="x in names">
	    {{ x.Name + ', ' + x.Country }}
	  </li>
	</ul>
	</div>
	<script>
	var app = angular.module('myApp', []);
	app.controller('customersCtrl', function($scope, $http) {
	    $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
	    .success(function(response) {$scope.names = response.records;});
	});
	</script>

应用解析:

注意：以上代码的 get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上，附：PHP Ajax 跨域问题最佳解决方案。

函数 customersController 是一个标准的 JavaScript 对象构造器。

控制器对象有一个属性: $scope.names。

$http.get() 从web服务器上读取静态 JSON 数据。

当从服务端载入 JSON 数据时，$scope.names 变为一个数组。

以上代码也可以用于读取数据库数据。

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

ng-options 与 ng-repeat

我们也可以使用ng-repeat 指令来创建下拉列表：

1
2
3

<select>
	<option ng-repeat="x in names">{{x}}</option>
	</select>

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：
使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

应该用哪个更好?

假设我们使用以下对象:

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "Runoob", url : "http://www.runoob.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

ng-repeat 有局限性，选择的值是一个字符串:

使用 ng-repeat:

<select ng-model="selectedSite">
	<option ng-repeat="x in sites" value="{{x.site}}">{{x.site}}</option>
	</select>
	<h1>你选择的是: {{selectedSite}}</h1>

使用 ng-options 指令，选择的值是一个对象：

使用 ng-options:

<select ng-model="selectedSite" ng-options="x.site for x in sites">
	</select>
	<h1>你选择的是: {{selectedSite.site}}</h1>
	<p>网址为: {{selectedSite.url}}</p>

当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。

ng-model的值可以随便起名字，他是控制html输出的值

数据源为对象

前面实例我们使用了数组作为数据源，以下我们将数据对象作为数据源。

$scope.sites = {
    site01 : "Google",
    site02 : "Runoob",
    site03 : "Taobao"
};

ng-options 使用对象有很大的不同，如下所示：

使用对象作为数据源, x 为键(key), y 为值(value):

1
2
3

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
	</select>	
	<h1>你选择的值是: {{selectedSite}}</h1>

你选择的值为在 key-value 对中的 value。

value 在 key-value 对中也可以是个对象：

选择的值在 key-value 对的 value 中, 这是它是一个对象:

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性：

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in sites">
</select>

AngularJS 表格

ng-repeat 指令可以完美的显示表格。

在表格中显示数据

使用 angular 显示表格是非常简单的：

<div ng-app="myApp" ng-controller="customersCtrl"> 	
	<table>
	  <tr ng-repeat="x in names">
	    <td>{{ x.Name }}</td>
	    <td>{{ x.Country }}</td>
	  </tr>
	</table>	
	</div>
	<script>
	var app = angular.module('myApp', []);
	app.controller('customersCtrl', function($scope, $http) {
	    $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
	    .success(function (response) {$scope.names = response.records;});
	});
	</script>

使用 CSS 样式

为了让页面更加美观，我们可以在页面中使用CSS：

<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

使用 orderBy 过滤器

排序显示，可以使用 orderBy 过滤器:

<table>
	  <tr ng-repeat="x in names | orderBy : 'Country'">
	    <td>{{ x.Name }}</td>
	    <td>{{ x.Country }}</td>
	  </tr>
	</table>

使用 uppercase 过滤器

使用 uppercase 过滤器转换为大写:

<table>
	  <tr ng-repeat="x in names">
	    <td>{{ x.Name }}</td>
	    <td>{{ x.Country | uppercase }}</td>
	  </tr>
	</table>

显示序号 ($index)

表格显示序号可以在中添加 $index:

<table>
	  <tr ng-repeat="x in names">
	    <td>{{ $index + 1 }}</td>
	    <td>{{ x.Name }}</td>
	    <td>{{ x.Country }}</td>
	  </tr>
	</table>

AngularJS HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

<div ng-app="" ng-init="mySwitch=true">
	<p>
	<button ng-disabled="mySwitch">点我!</button>
	</p>	
	<p>
	<input type="checkbox" ng-model="mySwitch">按钮
	</p>	
	<p>
	{{ mySwitch }}
	</p>	
	</div>

ng-disabled 指令绑定应用程序数据 “mySwitch” 到 HTML 的 disabled 属性。
ng-model 指令绑定 “mySwitch” 到 HTML input checkbox 元素的内容（value）。
如果 mySwitch 为true, 按钮将不可用:

ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。

<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div>

你可以使用表达式来计算布尔值（ true 或 false）:

<div ng-app="">

<p ng-show="hour > 12">我是可见的。</p>

</div>

ng-hide 指令

ng-hide 指令用于隐藏或显示 HTML 元素。

<div ng-app="">

<p ng-hide="true">我是不可见的。</p>

<p ng-hide="false">我是可见的。</p>

</div>

AngularJS 事件

AngularJS 有自己的 HTML 事件指令。

ng-click 指令

ng-click 指令定义了 AngularJS 点击事件。

<div ng-app="" ng-controller="myCtrl">	
	<button ng-click="count = count + 1">点我！</button>
	<p>{{ count }}</p>
	</div>

隐藏 HTML 元素

<div ng-app="myApp" ng-controller="personCtrl">	
	<button ng-click="toggle()">>隐藏/显示</button>	
	<p ng-hide="myVar">
	名: <input type="text" ng-model="firstName"><br>
	姓名: <input type="text" ng-model="lastName"><br>
	<br>
	Full Name: {{firstName + " " + lastName}}
	</p>	
	</div>	
	<script>
	var app = angular.module('myApp', []);
	app.controller('personCtrl', function($scope) {
	    $scope.firstName = "John",
	    $scope.lastName = "Doe"
	    $scope.myVar = false;
	    $scope.toggle = function() {
	        $scope.myVar = !$scope.myVar;
	    };
	});
	</script>

应用解析:

应用有一个默认属性: $scope.myVar = false;

ng-hide 指令设置 p元素及两个输入域是否可见，根据 myVar 的值 (true 或 false) 来设置是否可见。

toggle() 函数用于切换 myVar 变量的值（true 和 false）。

ng-hide=”true” 让元素不可见。

AngularJS 模块

模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。

创建模块

你可以通过 AngularJS 的 angular.module 函数来创建模块：

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []); 

</script>

“myApp” 参数对应执行应用的 HTML 元素。
现在你可以在 AngularJS 应用中添加控制器，指令，过滤器等。

添加控制器

你可以使用 ng-controller 指令来添加应用的控制器:

<div ng-app="myApp" ng-controller="myCtrl">
	{{ firstName + " " + lastName }}
	</div>	
	<script>	
	var app = angular.module("myApp", []);
	app.controller("myCtrl", function($scope) {
	    $scope.firstName = "John";
	    $scope.lastName = "Doe";
	});
	</script>

添加指令

AngularJS 提供了很多内置的指令，你可以使用它们来为你的应用添加功能。
完整的指令内容可以参阅 AngularJS 参考手册。
此外，你可以使用模块来为你应用添加自己的指令：

<div ng-app="myApp" runoob-directive></div>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

在模块定义中 [] 参数用于定义模块的依赖关系。中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

函数会影响到全局命名空间

JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。

AngularJS 表单

AngularJS 表单是输入控件的集合。

HTML 表单

HTML 表单通常与 HTML 控件同时存在。

AngularJS 表单实例

<div ng-app="myApp" ng-controller="formCtrl">
	  <form novalidate>
	    First Name:<br>
	    <input type="text" ng-model="user.firstName"><br>
	    Last Name:<br>
	    <input type="text" ng-model="user.lastName">
	    <br><br>
	    <button ng-click="reset()">RESET</button>
	  </form>
	  <p>form = {{user}}</p>
	  <p>master = {{master}}</p>
	</div>
	<script>
	var app = angular.module('myApp', []);
	app.controller('formCtrl', function($scope) {
	    $scope.master = {firstName: "John", lastName: "Doe"};
	    $scope.reset = function() {
	        $scope.user = angular.copy($scope.master);
	    };
	    $scope.reset();
	});
	</script>

novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

实例解析

ng-app 指令定义了 AngularJS 应用。
ng-controller 指令定义了应用控制器。
ng-model 指令绑定了两个 input 元素到模型的 user 对象。
formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。
reset() 方法设置了 user 对象等于 master 对象。
ng-click 指令调用了 reset() 方法，且在点击按钮时调用。
novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。

AngularJS 输入验证

AngularJS 表单和控件可以验证输入的数据。

输入验证

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>用户名:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
  </span>
</p>

<p>邮箱:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
  <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>

</body>
</html>

实例解析

AngularJS ng-model 指令用于绑定输入元素到模型中。

模型对象有两个属性： user 和 email。

我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。

属性	描述
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

AngularJS API

API 意为 Application Programming Interface（应用程序编程接口）。

全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数：

API	描述
angular.lowercase()	转换字符串为小写
angular.uppercase()	转换字符串为大写
angular.isString()	判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()	判断给定的对象是否为数字，如果是返回 true。

<div ng-app="myApp" ng-controller="myCtrl">
	<p>{{ x1 }}</p>
	<p>{{ x2 }}</p>
	</div>
	<script>
	var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
	$scope.x1 = "JOHN";
	$scope.x2 = angular.lowercase($scope.x1);
	});
	</script>

AngularJS 动画

AngularJS 提供了动画效果，可以配合 CSS 使用。

AngularJS 使用动画需要引入 angular-animate.min.js 库。

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

还需在应用中使用模型 ngAnimate：

<body ng-app="ngAnimate">

勾选复选框隐藏 DIV:

<body ng-app="ngAnimate">

隐藏 DIV: <input type="checkbox" ng-model="myCheck">

<div ng-hide="myCheck"></div>

</body>

如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中：

<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

AngularJs简介

AngularJS 扩展了 HTML

什么是 AngularJS？

AngularJS 指令

AngularJS 表达式

AngularJS 应用

AngularJS 表达式

AngularJS 对象

AngularJS 数组

AngularJS 表达式 与 JavaScript 表达式

AngularJS 指令

重复 HTML 元素

ng-app 指令

ng-init 指令

ng-model 指令

ng-repeat 指令

创建自定义的指令

限制使用

ng-model 指令

验证用户输入

应用状态

CSS 类

AngularJS Scope(作用域)

如何使用 Scope

Scope 概述

Scope 作用范围

根作用域???

AngularJS 控制器

AngularJS 控制器

控制器方法

外部文件中的控制器

AngularJS 过滤器

AngularJS 过滤器

表达式中添加过滤器

currency 过滤器

向指令添加过滤器

过滤输入

AngularJS 服务(Service)

什么是服务？

为什么使用服务?

$http 服务

$timeout 服务

$interval 服务

创建自定义服务

过滤器中，使用自定义服务

AngularJS XMLHttpRequest

读取 JSON 文件

AngularJS $http

AngularJS Select(选择框)

使用 ng-options 创建选择框

ng-options 与 ng-repeat

应该用哪个更好?

数据源为对象

AngularJS 表格

在表格中显示数据

使用 CSS 样式

使用 orderBy 过滤器

使用 uppercase 过滤器

显示序号 ($index)

AngularJS HTML DOM

ng-disabled 指令

ng-show 指令

ng-hide 指令

AngularJS 事件

ng-click 指令

隐藏 HTML 元素

AngularJS 模块

创建模块

添加控制器

添加指令

函数会影响到全局命名空间

AngularJS 表单

HTML 表单

AngularJS 表单实例

实例解析

AngularJS 输入验证

输入验证

实例解析

AngularJS API

AngularJS 动画

AngularJS 表达式与 JavaScript 表达式