一、指令
1.AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。
2.ng-init 指令初始化应用程序数据。
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
3.ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
表达式{{表达式}}
实例
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="firstName=‘John‘">
<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>
<p><span ng-bind="firstName"></span></p> //与表达式效果是一样的
</div>
<script src="//www.runoob.com/try/angularjs/1.2.5/angular.min.js"></script>
</body>
</html>
4.ng-repeat 指令会重复一个 HTML 元素：
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
html 属性赋值有data
angular 兼容就在前面加了(data)之后变成data-ng-repeat
实例
<div ng-app="" ng-init="names=[‘Jani‘,‘Hege‘,‘Kai‘]">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<div>
二、AngularJS 控制器
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
实例：
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="personController">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}
</script>
<script src="//www.runoob.com/try/angularjs/1.2.5/angular.min.js"></script>
</body>
</html>
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller 指令把控制器命名为 object。
函数 personController 是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性：$scope.person。
person 对象有两个属性：firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
三、AngularJS 过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
1.向表达式添加过滤器
<div ng-app="" ng-controller="personController">
<p>姓名为 {{ person.lastName | uppercase }}</p>
</div>
2.向指令添加过滤器
实例
<div ng-app="" ng-controller="namesController">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names | orderBy:‘country‘">
{{ x.name + ‘, ‘ + x.country }}
</li>
</ul>
<div>
四、AngularJS XMLHttpRequest
1.AngularJS $http
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
实例：
<div ng-app="" ng-controller="customersController">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ‘, ‘ + x.Country }}
</li>
</ul>
</div>
<script>
function customersController($scope,$http) {
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>
AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。
ng-controller 指令设置了 controller 对象 名。
函数 customersController 是一个标准的 JavaScript 对象构造器。
控制器对象有一个属性: $scope.names。
$http.get() 从web服务器上读取静态 JSON 数据。
服务器数据文件为： http://www.runoob.com/try/angularjs/data/Customers_JSON.php。
当从服务端载入 JSON 数据时，$scope.names 变为一个数组。
五、AngularJS 表格
ng-repeat 指令可以完美的显示表格。
实例：
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div ng-app="" ng-controller="customersController">
<table>
<tr ng-repeat="x in names | orderBy : ‘Country‘">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
function customersController($scope,$http) {
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
</body>
</html>
六、AngularJS SQL
实例：
<div ng-app="" ng-controller="customersController">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
function customersController($scope,$http) {
var site = "http://www.w3cschool.cc";
var page = "/try/angularjs/data/Customers_SQL.aspx";
$http.get(site + page)
.success(function(response) {$scope.names = response;});
}
</script>
七、AngularJS HTML DOM
1.ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
实例：
<div ng-app="">
<p>
<button ng-disabled="mySwitch">点我！</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">按钮
</p>
</div>
ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。
2.ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素。
实例：
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p ng-show="true">我是可见的。</p>
<p ng-show="!false">我是不可见的。</p>
</div>
<script src="//www.runoob.com/try/angularjs/1.2.5/angular.min.js"></script>
</body>
</html>
3.隐藏 HTML 元素
ng-hide 指令用于设置应用的一部分 不可见 。
ng-hide="true" 让 HTML 元素 不可见。
ng-hide="false" 让元素可见。
八、AngularJS HTML 事件
ng-click 指令
ng-click 指令定义了一个 AngularJS 单击事件。
实例：
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="myController">
<button ng-click="count = count + 1">点我!</button>
<p>{{ count }}</p>
</div>
<script>
function myController($scope) {
$scope.count = 0;
}
</script>
<script src="//www.runoob.com/try/angularjs/1.2.5/angular.min.js"></script>
</body>
</html>
九、AngularJS 模块
1.模块定义应放置在何处？
对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
在上面的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。
在上面的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
实例：
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="//www.runoob.com/try/angularjs/1.2.5/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
2.AngularJS 应用程序文件
现在您已经知道模块是什么以及它们是如何工作的，现在您可以尝试创建您自己的应用程序文件。
您的应用程序至少应该有一个模块文件，一个控制器文件。
首先，创建模块文件 "myApp.js"：
var app = angular.module("myApp", []);
然后，创建控制器文件。本实例中是 "myCtrl.js"：
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
最后，编辑您的 HTML 页面：
实例：
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="//www.runoob.com/try/angularjs/1.2.5/angular.min.js"></script>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
十、AngularJS 表单
HTML 控件
以下 HTML input 元素被称为 HTML 控件:
input 元素
select 元素
button 元素
textarea 元素
实例：
<div ng-app="" ng-controller="formController">
<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>
function formController ($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
};
</script>
十一、AngularJS 输入验证
实例：
<!DOCTYPE html>
<html>
<body>
<h2>验证实例</h2>
<form ng-app="" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<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">Username is required.</span>
</span>
</p>
<p>Email:<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">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
<script>
function validateCtrl($scope) {
$scope.user = ‘John Doe‘;
$scope.email = ‘[email protected]‘;
}
</script>
</body>
</html>
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性： user 和 email。
我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。
十二、AngularJS Bootstrap
如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
实例：
<!DOCTYPE html>
<html ng-app="">
<head>
<link rel="stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="userController">
<div class="container">
<h3>用户列表</h3>
<table class="table table-striped">
<thead>
<tr>
<th>编辑</th>
<th>名</th>
<th>姓</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>
<button class="btn" ng-click="editUser(user.id)">
<span class="glyphicon glyphicon-pencil"></span>编辑
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr>
</tbody>
</table>
<hr>
<button class="btn btn-success" ng-click="editUser(‘new‘)">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr>
<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">名:</label>
<div class="col-sm-10">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">姓:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw1" placeholder="密码">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">重复密码:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw2" placeholder="重复密码">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> 保存修改
</button>
</div>
<script src= "http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
<script src= "myUsers.js"></script>
</body>
</html>
1.指令解析
AngularJS 指令 描述
<html ng-app 为 <html> 元素定义一个应用(未命名)
<body ng-controller 为 <body> 元素定义一个控制器
<tr ng-repeat 循环 users 对象数组，每个 user 对象放在 <tr> 元素中。
<button ng-click 当点击 <button> 元素时调用函数 editUser()
<h3 ng-show 如果 edit = true 显示 <h3> 元素
<h3 ng-hide 如果 edit = true 隐藏 <h3> 元素
<input ng-model 为应用程序绑定 <input> 元素
<button ng-disabled 如果发生错误或者 ncomplete = true 禁用 <button> 元素
2.Bootstrap 类解析
元素 Bootstrap 类 定义
<div> container 内容容器
<table> table 表格
<table> table-striped 带条纹背景的表格
<button> btn 按钮
<button> btn-success 成功按钮
<span> glyphicon 字形图标
<span> glyphicon-pencil 铅笔图标
<span> glyphicon-user 用户图标
<span> glyphicon-save 保存图标
<form> form-horizontal 水平表格
<div> form-group 表单组
<label> control-label 控制器标签
<label> col-sm-2 跨越 2 列
<div> col-sm-10 跨越 10 列
3.JavaScript 代码
function userController($scope) {
$scope.fName = ‘‘;
$scope.lName = ‘‘;
$scope.passw1 = ‘‘;
$scope.passw2 = ‘‘;
$scope.users = [
{id:1, fName:‘Hege‘, lName:"Pege" },
{id:2, fName:‘Kim‘, lName:"Pim" },
{id:3, fName:‘Sal‘, lName:"Smith" },
{id:4, fName:‘Jack‘, lName:"Jones" },
{id:5, fName:‘John‘, lName:"Doe" },
{id:6, fName:‘Peter‘, lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;
$scope.editUser = function(id) {
if (id == ‘new‘) {
$scope.edit = true;
$scope.incomplete = true;
$scope.fName = ‘‘;
$scope.lName = ‘‘;
} else {
$scope.edit = false;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].lName;
}
};
$scope.$watch(‘passw1‘,function() {$scope.test();});
$scope.$watch(‘passw2‘,function() {$scope.test();});
$scope.$watch(‘fName‘, function() {$scope.test();});
$scope.$watch(‘lName‘, function() {$scope.test();});
$scope.test = function() {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true;
} else {
$scope.error = false;
}
$scope.incomplete = false;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true;
}
};
}
4.JavaScript 代码解析
Scope 属性 用途
$scope.fName 模型变量 (用户名)
$scope.lName 模型变量 (用户姓)
$scope.passw1 模型变量 (用户密码 1)
$scope.passw2 模型变量 (用户密码 2)
$scope.users 模型变量 (用户的数组)
$scope.edit 当用户点击创建用户时设置为true。
$scope.error 如果 passw1 不等于 passw2 设置为 true
$scope.incomplete 如果每个字段都为空(length = 0)设置为 true
$scope.editUser 设置模型变量
$scope.watch 监控模型变量
$scope.test 验证模型变量的错误和完整性
十三、AngularJS Include（包含）
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:
实例：
<!DOCTYPE html>
<html ng-app="">
<head>
<link rel="stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="userController">
<div class="container">
<div ng-include="‘myUsers_List.htm‘"></div>
<div ng-include="‘myUsers_Form.htm‘"></div>
</div>
<script src= "http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
<script src= "myUsers.js"></script>
</body>
</html>
1.myUsers_List.html
<table class="table table-striped">
<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>
<button class="btn" ng-click="editUser(user.id)">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>
2.myUsers_Form.htm
<button class="btn btn-success" ng-click="editUser(‘new‘)">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Repeat:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw2" placeholder="Repeat Password">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
十四、AngularJS 应用程序
实例：
<!DOCTYPE html>
<html>
<body>
<div ng-app="myTodoApp" ng-controller="myTodoCtrl">
<h2>我的笔记</h2>
<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>剩下的字符数: <span ng-bind="left()"></span></p>
</div>
<script src="//www.runoob.com/try/angularjs/1.2.5/angular.min.js"></script>
<script src="myTodoApp.js"></script>
<script src="myTodoCtrl.js"></script>
</body>
</html>
应用程序文件 "myTodoApp.js"：
var app = angular.module("myTodoApp", []);
控制器文件 "myTodoCtrl.js"：
app.controller("myTodoCtrl", function($scope) {
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message="";};
$scope.save = function() {$scope.message="";};
});
来源于：http://www.runoob.com/angularjs/angularjs-tutorial.html