全国服务热线:400-885-2225
最新活动

AngularJS 简介

发布时间:2016-03-22 15:46 | 编辑:admin

 
1. AngularJS 简介
    AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。
  通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:
  类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
  框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。
  AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
  使用双大括号{{}}语法进行数据绑定;
  使用DOM控制结构来实现迭代或者隐藏DOM片段;
  支持表单和表单的验证;
  能将逻辑代码关联到相关的DOM元素上;
  能将HTML分组成可重用的组件。
1.1. 端对端的解决方案
  AngularJS试图成为WEB应用中的一种端对端的解决方案。这意味着它不只是你的WEB应用中的一个小部分,而是一个完整的端对端的解决方案。这会让AngularJS在构建一个CRUD(增加Create、查询Retrieve、更新Update、删除Delete)的应用时显得很“固执”(原文为 opinionated,意指没有太多的其他方式)。但是,尽管它很“固执”,它仍然能确保它的“固执”只是在你构建应用的起点,并且你仍能灵活变动。AngularJS的一些出众之处如下:
  构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。
  测试方面包括:单元测试、端对端测试、模拟和自动化测试框架。
  具有目录布局和测试脚本的种子应用作为起点。
1.2. AngularJS的可爱之处
  AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。
  如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。
 
1.3. 阅读本教程前,您需要了解的知识:
在开始学习 AngularJS 之前,您需要具备以下基础知识:
1) HTML
2) CSS
3) JavaScript
1.4. AngularJS 历史
AngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。
AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。
这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护这个库。
 
1.5. AngularJS 是什么
AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。
1) AngularJS 把应用程序数据绑定到 HTML 元素。
2) AngularJS 可以克隆和重复 HTML 元素。
3) AngularJS 可以隐藏和显示 HTML 元素。
4) AngularJS 可以在 HTML 元素"背后"添加代码。
5) AngularJS 支持输入验证
 
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
 
 
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
 
 
 我们建议把脚本放在 <body> 元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。
 
1.6. Hello World!
开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”:
使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html。
将下面的源代码复制到您的HTML文件。
在web浏览器中打开这个HTML文件。
源代码
<!doctype html>
<html ng-app>
   <head>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
   </head>
    <body>
        Hello {{'World'}}!
</body>
</html>
请在您的浏览器中运行以上代码查看效果。
现在让我们仔细看看代码,看看到底怎么回事。 当加载该页时,标记ng-app告诉AngularJS处理整个HTML页并引导应用:
<html ng-app>
这行载入AngularJS脚本:
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
(想了解AngularJS处理整个HTML页的细节,请看Bootstrap。)
最后,标签中的正文是应用的模板,在UI中显示我们的问候语:
Hello {{'World'}}!
注意,使用双大括号标记{{}}的内容是问候语中绑定的表达式,这个表达式是一个简单的字符串‘World’。
下面,让我们看一个更有趣的例子:使用AngularJS对我们的问候语文本绑定一个动态表达式。
1.7. Hello AngularJS World!
本示例演示AngularJS的双向数据绑定(bi-directional data binding):
1) 编辑前面创建的helloworld.html文档。
2) 将下面的源代码复制到您的HTML文件。
3) 刷新浏览器窗口。
源代码
<!doctype html><html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || 'World'}}!
    </body></html>
请在您的浏览器中运行以上代码查看效果。
该示例有一下几点重要的注意事项:
文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。
双大括号标记将yourname模型变量添加到问候语文本。
你不需要为该应用另外注册一个事件侦听器或添加事件处理程序!
现在试着在输入框中键入您的名称,您键入的名称将立即更新显示在问候语中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量(一个方向),模型变量的任何更改都会立即反映到问候语文本中(另一方向)。
1.8. AngularJS 扩展了 HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
 
<!DOCTYPE html>
<html>
<body>
 
<div ng-app="">
  <p>在输入框中尝试输入:</p>
  <p>姓名:<input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
 
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
 
</body>
</html>
代码讲解:
当网页加载完毕,AngularJS 自动开启。
ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
 如果您移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。
 
 
 
1.9. AngularJS 指令
正如您所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
<div ng-app="" ng-init="firstName='John'">
 
<p>姓名为 <span ng-bind="firstName"></span></p>
 
</div>
 
 HTML5 允许扩展的(自制的)属性,以 data- 开头。
     AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。
 
带有有效的 HTML5:
<div data-ng-app="" data-ng-init="firstName='John'">
 
<p>姓名为 <span data-ng-bind="firstName"></span></p>
 
</div>
 
1.10. AngularJS 表达式
AngularJS 表达式写在双大括号内:{{ expression }}。
AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
 
<!DOCTYPE html>
<html>
<body>
 
<div ng-app="">
  <p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>
 
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
 
</body>
</html>
 
1.11. AngularJS 应用
AngularJS 模块(Module) 定义了 AngularJS 应用。
AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
 
<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>
 
1.11.1. AngularJS 模块
AngularJS 模块定义应用:
 
var app = angular.module('myApp', []);
1.11.2. AngularJS 控制器
AngularJS 控制器控制应用:
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
在接下来的教程中你将学习到更多的应用和模块的知识。
 
2. 表达式
AngularJS 使用 表达式 把数据绑定到 HTML。
2.1. 表达式说明
AngularJS 表达式写在双大括号内:{{ expression }}。
AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
2.2. 数字
1)AngularJS 数字就像 JavaScript 数字:
<div ng-app="" ng-init="quantity=1;cost=5">
 
<p>总价: {{ quantity * cost }}</p>
 
</div>
2)使用 ng-bind 的相同实例:
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: <span ng-bind="quantity * cost"></span></p>
</div>
 
 使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。
 
 
2.3. 字符串
1)AngularJS 字符串就像 JavaScript 字符串:
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
 
<p>姓名: {{ firstName + " " + lastName }}</p>
 
</div>
 
2)使用 ng-bind 的相同实例:
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
 
<p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p>
 
</div>
 
2.4. 数组
1)AngularJS 数组就像 JavaScript 数组:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
 
<p>第三个值为 {{ points[2] }}</p>
 
</div>
 
2)使用 ng-bind 的相同实例:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
 
<p>第三个值为 <span ng-bind="points[2]"></span></p>
 
</div>
 
2.5. 对象
1)AngularJS 对象就像 JavaScript 对象:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
 
<p>姓为 {{ person.lastName }}</p>
 
</div>
2)使用 ng-bind 的相同实例:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
 
<p>姓为 <span ng-bind="person.lastName"></span></p>
 
</div>
 
2.6. AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。
 
3. 指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML。
3.1. 指令说明
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
 
示例:
<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 应用程序。
 
 
3.2. 数据绑定
上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model="firstName" 进行同步。
在下一个实例中,两个文本域是通过两个 ng-model 指令同步的:
 
<div ng-app="" ng-init="quantity=1;price=5">
 
<h2>价格计算器</h2>
 
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
 
<p><b>总价:</b> {{ quantity * price }}</p>
 
</div>
 
 使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。
 
 
3.3. 重复 HTML 元素
1)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>
 
2)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)应用程序。把实例中的对象想象成数据库中的记录。
 
3.4. ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块。
 
3.5. ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。
稍后您将学习更多有关控制器和模块的知识。
 
3.6. ng-model 指令
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以:
1) 为应用程序数据提供类型验证(number、email、required)。
2) 为应用程序数据提供状态(invalid、dirty、touched、error)。
3) 为 HTML 元素提供 CSS 类。
4) 绑定 HTML 元素到 HTML 表单。
3.7. ng-repeat 指令
ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。
4. 控制器
 AngularJS 控制器 控制 AngularJS 应用程序的数据。
 AngularJS 控制器是常规的 JavaScript 对象。
4.1. 控制器说明
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)。
 
4.2. 控制器方法
上面的实例演示了一个带有 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>
 
 
4.3. 外部文件中的控制器
在大型的应用程序中,通常是把控制器存储在外部文件中。
只需要把 <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>
 
4.3.1. 其他实例
 
以下实例创建一个新的控制器文件:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
 
 
保存文件为  namesController.js:
然后,在应用中使用控制器文件:
<div ng-app="myApp" ng-controller="namesCtrl">
 
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
 
</div>
 
<script src="namesController.js"></script>
 
5. 过滤器(Filters)
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
5.1. 过滤器说明
AngularJS 过滤器可用于转换数据:
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
 
 
 
 
 
 
 
 
 
 
 
 
 
5.2. 表达式中添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。.
((下面的两个实例,我们将使用前面章节中提到的 person 控制器))
1)uppercase 过滤器将字符串格式化为大写:
<div ng-app="myApp" ng-controller="personCtrl">
 
<p>姓名为 {{ lastName | uppercase }}</p>
 
</div>
2)lowercase 过滤器将字符串格式化为小写:
<div ng-app="myApp" ng-controller="personCtrl">
 
<p>姓名为 {{ lastName | lowercase }}</p>
 
</div>
 
5.3. 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>
 
5.4. 向指令添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。
orderBy 过滤器根据表达式排列数组:
<div ng-app="myApp" ng-controller="namesCtrl">
 
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
 
<div>
 
5.5. 过滤输入
输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
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>
 
6. XMLHttpRequest的支持
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。
6.1. 读取 JSON 文件
以下是存储在web服务器上的 JSON 文件:
{
"records":
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
}
 
________________________________________
6.2. 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 跨域问题最佳解决方案。
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 变为一个数组。
 
 以上代码也可以用于读取数据库数据。
 
 
7. 事件
AngularJS 有自己的 HTML 事件指令。
7.1. ng-click 指令
ng-click 指令定义了 AngularJS 点击事件。
<div ng-app="" ng-controller="myCtrl">
 
<button ng-click="count = count + 1">点我!</button>
 
<p>{{ count }}</p>
 
</div>
 
7.2. 隐藏 HTML 元素
ng-hide 指令用于设置应用部分是否可见。
ng-hide="true" 设置 HTML 元素不可见。
ng-hide="false" 设置 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>
应用解析:
第一部分 personController与控制器章节类似。
应用有一个默认属性: $scope.myVar = false;
ng-hide 指令设置 <p>元素及两个输入域是否可见, 根据 myVar 的值 (true 或 false) 来设置是否可见。
toggle() 函数用于切换 myVar 变量的值(true 和 false)。
ng-hide="true" 让元素 不可见。
7.3. 显示 HTML 元素
ng-show 指令可用于设置应用中的一部分是否可见 。
ng-show="false" 可以设置 HTML 元素 不可见。
ng-show="true" 可以以设置 HTML 元素可见。
以下实例使用了 ng-show 指令:
<div ng-app="myApp" ng-controller="personCtrl">
 
<button ng-click="toggle()">隐藏/显示</button>
 
<p ng-show="myVar">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>
 
 
8. 表格
ng-repeat 指令可以完美的显示表格。
8.1. 在表格中显示数据
使用 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>
 
8.2. 使用 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>
 
8.3. 使用 orderBy 过滤器
排序显示,可以使用 orderBy 过滤器: 
<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
 
8.4. 使用 uppercase 过滤器
使用 uppercase 过滤器转换为大写: 
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase }}</td>
  </tr>
</table>
 
8.5. 显示序号 ($index)
表格显示序号可以在 <td> 中添加 $index: 
<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
 
8.6. 使用 $even 和 $odd
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>
 
9. 模块
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。
 
9.1. 带有控制器的模块
应用("myApp") 带有控制器 ("myCtrl"):
<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>
 
<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>
 
</body>
</html>
 
9.2. 模块和控制器包含在 JS 文件中
通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。
在以下实例中, "myApp.js" 包含了应用模块的定义程序, "myCtrl.js" 文件包含了控制器:
<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>
 
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
 
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
 
</body>
</html>
myApp.js
var app = angular.module("myApp", []);
 
 在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名字。
 
myCtrl.js
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});
9.3. 函数会影响到全局命名空间
JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
AngularJS 模块让所有函数的作用域在该模块下,避免了该问题。
9.4. 什么时候载入库?
 在我们的实例中,所有 AngularJS 库都在 HTML 文档的头部载入。
 
 
对于 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="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>
 
</body>
</html>
 
10. 表单
AngularJS 表单是输入控件的集合。
10.1. HTML 控件
以下 HTML input 元素被称为 HTML 控件:
1) input 元素
2) select 元素
3) button 元素
4) textarea 元素
HTML 表单通常与 HTML 控件同时存在。
10.2. AngularJS 表单实例
form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}
10.3. 应用代码
<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 中新增的。禁用了使用浏览器的默认验证。
 
 
 
10.4. 实例解析
ng-app 指令定义了 AngularJS 应用。
ng-controller 指令定义了应用控制器。
ng-model 指令绑定了两个 input 元素到模型的 user 对象。
formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。
reset() 方法设置了 user 对象等于 master 对象。
ng-click 指令调用了 reset() 方法,且在点击按钮时调用。
novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。
 
11. 输入验证
AngularJS 表单和控件可以验证输入的数据。
11.1. 输入验证
在前面的几个章节中,你已经学到关于 AngularJS 表单和控件的知识。
AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。
 客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。
 
11.2. 应用代码
<!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>
11.3. 实例解析
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性: user 和 email。
我们使用了 ng-show指令, color:red 在邮件是 $dirty 或 $invalid 才显示。
属性 描述
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
 
12. SQL支持
在前面章节中的代码也可以用于读取数据库中的数据。(因为在解决方案中很少直接页面操作数据,所以不作教学内容)
12.1. 使用 PHP 从 MySQL 中获取数据
<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_MySQL.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>
12.2. ASP.NET 中执行 SQL 获取数据
<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_SQL.aspx")
    .success(function (response) {$scope.names = response.records;});
});
</script>
12.3. 服务端代码
以下列出了列出了几种服务端代码类型:
使用 PHP 和 MySQL。返回 JSON。
使用 PHP 和 MS Access。返回 JSON。
使用 ASP.NET, VB, 及 MS Access。 返回 JSON。
使用 ASP.NET, Razor, 及 SQL Lite。 返回 JSON。
12.4. 跨域 HTTP 请求
如果你需要从不同的服务器(不同域名)上获取数据就需要使用跨域 HTTP 请求。
跨域请求在网页上非常常见。很多网页从不同服务器上载入 CSS, 图片,Js脚本等。
在现代浏览器中,为了数据的安全,所有请求被严格限制在同一域名下,如果需要调用不同站点的数据,需要通过跨域来解决。
以下的 PHP 代码运行使用的网站进行跨域访问。
header("Access-Control-Allow-Origin: *");
更多跨域访问解决方案可参阅:PHP Ajax 跨域问题最佳解决方案。
12.5. PHP 和 MySql 代码实例
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
 
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
 
$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");
 
$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
    $outp .= '"City":"'   . $rs["City"]        . '",';
    $outp .= '"Country":"'. $rs["Country"]     . '"}'; 
}
$outp ='{"records":['.$outp.']}';
$conn->close();
 
echo($outp);
?>
12.6. PHP 和 MS Access 代码实例
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=ISO-8859-1");
 
$conn = new COM("ADODB.Connection");
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb");
 
$rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers");
 
$outp = "";
while (!$rs->EOF) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
    $outp .= '"City":"'   . $rs["City"]        . '",';
    $outp .= '"Country":"'. $rs["Country"]     . '"}'; 
    $rs->MoveNext();
}
$outp ='{"records":['.$outp.']}';
 
$conn->close();
 
echo ($outp);
?>
12.7. ASP.NET, VB 和 MS Access 代码实例
<%@ Import Namespace="System.IO"%>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb"%>
<%
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
Dim conn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
Dim outp
Dim c
conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable=objDataSet.Tables("myTable")
 
outp = ""
c = chr(34)
for each x in objTable.Rows
if outp <> "" then outp = outp & ","
outp = outp & "{" & c & "Name"    & c & ":" & c & x("CompanyName") & c & ","
outp = outp &       c & "City"    & c & ":" & c & x("City")        & c & "," 
outp = outp &       c & "Country" & c & ":" & c & x("Country")     & c & "}"
next
 
outp ="{" & c & "records" & c & ":[" & outp & "]}"
response.write(outp)
conn.close
%>
________________________________________
12.8. ASP.NET, VB Razor 和 SQL Lite 代码实例
@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName, City, Country FROM Customers");
var outp =""
var c = chr(34)
}
@foreach(var row in query)
{
if outp <> "" then outp = outp + ","
outp = outp + "{" + c + "Name"    + c + ":" + c + @row.CompanyName + c + ","
outp = outp +       c + "City"    + c + ":" + c + @row.City        + c + ","
outp = outp +       c + "Country" + c + ":" + c + @row.Country     + c + "}"
}
outp ="{" + c + "records" + c + ":[" + outp + "]}"
@outp
 
13. 包含(Includes)
在 AngularJS 中,你可以在 HTML 中包含 HTML 文件。
 
13.1. 在 HTML 中包含 HTML 文件
在 HTML 中,目前还不支持包含 HTML 文件的功能。
13.1.1. 服务端包含
大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes)。
使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器。
13.1.2. 客户端包含
通过 JavaScript 有很多种方式可以在 HTML 中包含 HTML 文件。
通常我们使用 http 请求 (AJAX) 从服务端获取数据,返回的数据我们可以通过 使用 innerHTML 写入到 HTML 元素中
13.2. AngularJS 包含
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:
<body>
 
<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>
 
</body>
步骤如下:
13.2.1. 步骤 1: 创建 HTML 列表
myUsers_List.html
<h3>Users</h3>
 
<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>&nbsp;&nbsp;Edit
      </button>
    </td>
    <td>{{ user.fName }}</td>
    <td>{{ user.lName }}</td>
  </tr></tbody>
</table>
13.2.2. 步骤 2: 创建 HTML 表单
myUsers_Form.html
<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>
13.2.3. 步骤 3: 创建控制器
myUsers.js
angular.module('myApp', []).controller('userCtrl', function($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;
  }
};
})
13.2.4. 步骤 4: 创建主页
myUsers.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="userCtrl">
 
<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>
 
<script src= "myUsers.js"></script>
 
</body>
 
</html>
14. HTML DOM支持
AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
14.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)。
如果 mySwitch 为true, 按钮将不可用: 
<p>
<button disabled>点我!</button>
</p>
如果 mySwitch 为false, 按钮则可用: 
<p>
<button>Click Me!</button>
</p>
 
14.2. ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素。
<div ng-app="">
 
<p ng-show="true">我是可见的。</p>
 
<p ng-show="false">我是不可见的。</p>
 
</div>
ng-show 指令根据 value 的值来显示(隐藏)HTML 元素。
你可以使用表达式来计算布尔值( true 或 false):
<div ng-app="">
 
<p ng-show="hour > 12">我是可见的。</p>
</div>
 
 在下一个章节中,我们将为大家更多通过点击按钮来隐藏 HTML 元素的实例。
 
 
 
14.3. ng-hide 指令
ng-hide 指令用于隐藏或显示 HTML 元素。
<div ng-app="">
 
<p ng-hide="true">我是不可见的。</p>
 
<p ng-hide="false">我是可见的。</p>
 
</div>
 
15. AngularJS API
API 意为 Application Programming Interface(应用程序编程接口)。
15.1. AngularJS 全局 API
AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如:
1) 比较对象
2) 迭代对象
3) 转换对象
全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数:
API 描述
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串,如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。
15.2. angular.lowercase()
<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>
15.3. angular.uppercase()
<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.uppercase($scope.x1);
});
</script>
15.4. angular.isString()
<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.isString($scope.x1);
});
</script>
15.5. angular.isNumber()
<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.isNumber($scope.x1);
});
</script>
 
16. AngularJS Bootstrap
AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。
查看 Bootstrap教程。
16.1. Bootstrap说明
你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
如果站点在国内,建议使用百度静态资源库的Bootstrap,代码如下:
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。
16.2. HTML 代码
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
 
<div class="container">
 
<h3>Users</h3>
 
<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>&nbsp;&nbsp;Edit
      </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> 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>
</div>
 
<script src = "myUsers.js"></script>
</body>
</html>
16.3. 指令解析
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> 元素
 
16.4. 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 列
 
16.5. JavaScript 代码
myUsers.js
angular.module('myApp', []).controller('userCtrl', function($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;
  }
};
 
});
 
16.6. 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 验证模型变量的错误和完整性
 
 
17. 参考手册
17.1. AngularJS 指令
本教程用到的 AngularJS 指令 :
指令 描述 解析
ng-app 定义应用程序的根元素。 指令
 
ng-bind 绑定 HTML 元素到应用程序数据。 介绍
 
ng-click 定义元素被单击时的行为。 HTML 事件
 
ng-controller 为应用定义控制器对象。 控制器
 
ng-disabled 绑定应用程序数据到 HTML 的 disabled 属性。 HTML DOM
 
ng-hide 隐藏或显示 HTML 元素。 HTML DOM
 
ng-include 在应用中包含 HTML。 包含
 
ng-init 为应用程序定义初始值。 指令
 
ng-model 绑定应用程序数据到 HTML 元素。 指令
 
ng-repeat 在集合中为每个数据定义一个模板。 指令
 
ng-show 显示或隐藏 HTML 元素。 HTML DOM
 
17.2. AngularJS 过滤器
本教程中用到的 AngularJS 过滤器:
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
17.3. AngularJS 事件
事件 描述
ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter