全面掌握前端框架AngularJS

整理自菜鸟教程

 

AngularJS

AngularJS 通过新的属性和表达式扩展了 HTML。

AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。

AngularJS 学习起来非常简单。

 

AngularJS 实例

 

名字 :

 

Hello {{name}}

 

AngularJS 历史

AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的。

AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。

这是一个非常好的构想，该项目目前已由 Google 正式支持，有一个全职的开发团队继续开发和维护这个库。

 

AngularJS 简介

---

AngularJS 是一个 JavaScript 框架。它可通过

 

建议把脚本放在 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

 

---

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

AngularJS 实例

 

名字 :

 

Hello {{name}}

 

实例讲解：

当网页加载完毕，AngularJS 自动开启。

ng-app 指令告诉 AngularJS，

元素是 AngularJS 应用程序 的"所有者"。

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

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

 

如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。

---

什么是 AngularJS？

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

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

---

AngularJS 指令

正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。

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

AngularJS 实例

 

姓名为

 

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

 

带有有效的 HTML5：

AngularJS 实例

 

姓名为

 

 

---

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 实例

 

 

我的第一个表达式： {{ 5 + 5 }}

 

---

AngularJS 应用

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令指明了应用, ng-controller 指明了控制器。

AngularJS 实例

 

尝试修改以下表单。

名:

姓:



姓名: {{firstName + " " + lastName}}

 

AngularJS 模块定义应用:

AngularJS 模块

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

AngularJS 控制器控制应用:

AngularJS 控制器

app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });

在接下来的教程中你将学习到更多的应用和模块的知识。

---

在 Cloud Studio 中使用 AngularJS

• step1：访问 Cloud Studio，注册/登录账户。

• step2：在右侧的运行环境菜单选择："ubuntu"

  

• step3：在左侧代码目录中新建 html 目录，编写你的 HTML 代码，例如 index.html

• step4：在 index.html 文件的中粘贴如下代码、来引入 AngularJS：

• step5：在终端中输入命令sudo vim /etc/nginx/site-enable/default。将配置文件红框部分修改为如下图所示，然后输入命令：sudo nginx restart 重启 nginx 服务（ nginx 安装完成并启动后默认会监听80端口。我们需要将 nginx 的站点目录以及监听的端口号改为我们需要的）

  

• step6：点击最右侧的【访问链接】选项卡，在访问链接面板中填写端口号为：8080（和刚才 nginx 配置文件中的端口号一致），点击创建链接，即可点击生成的链接访问我们刚刚编写的代码，查看 AngularJS 效果。

  

 

AngularJS 表达式

---

AngularJS 使用 表达式 把数据绑定到 HTML。

---

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 实例

 

我的第一个表达式: {{ 5 + 5 }}

 

---

AngularJS 数字

AngularJS 数字就像 JavaScript 数字：

AngularJS 实例

 

总价: {{ quantity * cost }}

div ng-app="" ng-init="quantity=1;cost=5">

总价： {{ quantity * cost }}

 

使用 ng-bind 的相同实例：

AngularJS 实例

 

总价:

使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

---

 

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串：

AngularJS 实例

 

姓名: {{ firstName + " " + lastName }}

 

使用 ng-bind 的相同实例：

AngularJS 实例

 

姓名:

 

 

---

AngularJS 对象

AngularJS 对象就像 JavaScript 对象：

AngularJS 实例

 

姓为 {{ person.lastName }}

 

使用 ng-bind 的相同实例：

AngularJS 实例

 

姓为

 

 

---

AngularJS 数组

AngularJS 数组就像 JavaScript 数组：

AngularJS 实例

 

第三个值为 {{ points[2] }}

 

使用 ng-bind 的相同实例：

AngularJS 实例

 

第三个值为

 

---

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 实例

 

在输入框中尝试输入:

姓名:

你输入的为: {{ firstName }}

 

ng-app 指令告诉 AngularJS，

元素是 AngularJS 应用程序 的"所有者"。

数据绑定

上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

在下一个实例中，两个文本域是通过两个 ng-model 指令同步的：

AngularJS 实例

 

价格计算器

数量:
价格:

总价: {{quantity * price}}

 

 

重复 HTML 元素

---

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

AngularJS 实例

 

 

使用 ng-repeat 来循环数组

 

   
• 
        {{ x }}
     

 

 

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

AngularJS 实例

 

循环对象:

 
• 
    {{ x.name + ', ' + x.country }}

 

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

---

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的 根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。

---

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:

AngularJS 实例

 

 

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

• 元素名
• 属性
• 类名
• 注释

以下实例方式也能输出同样结果:

元素名

 

 

属性

 

 

类名

 

注意： 你必须设置 restrict 的值为 "C" 才能通过类名来调用指令。

 

注释

 

注意： 我们需要在该实例添加 replace 属性， 否则评论是不可见的。

注意： 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。

!-- directive: runoob-directive -->

 

限制使用

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

实例

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

 

注意： 通过设置 restrict 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。

 

restrict 值可以是以下几种:

• E 作为元素名使用
• A 作为属性使用
• C 作为类名使用
• M 作为注释使用

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

 

AngularJS ng-model 指令

---

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

---

ng-model 指令

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

AngularJS 实例

 

名字:

使用 ng-model 指令来绑定输入域的值到控制器的属性。

 

---

双向绑定

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：

AngularJS 实例

 

名字:

你输入了: {{name}}

修改输入框的值，标题的名字也会相应修改。

 

---

验证用户输入

AngularJS 实例

 

    Email:
   
    不是一个合法的邮箱地址

在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。

 

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

---

应用状态

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

AngularJS 实例

 

Email:

编辑邮箱地址，查看状态的改变。

状态

Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。

Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。

Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。

 

---

CSS 类

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

AngularJS 实例

 

    输入你的名字:
   

编辑文本域，不同状态背景颜色会发生变化。

文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。

 

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 对象当作一个参数传递:

AngularJS 实例

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

{{carname}}

控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。

 

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

---

Scope 概述

AngularJS 应用组成如下：

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

scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

AngularJS 实例

如果你修改了视图，模型和控制器也会相应更新：

    
    

{{greeting}}

    点我    

当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。

 

---

Scope 作用范围

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

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

AngularJS 实例

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

   
• {{x}}

    

 

每个 

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

---

根作用域

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

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

AngularJS 实例

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

姓氏为 {{lastname}} 家族成员:

   
• {{x}} {{lastname}}

注意 $rootScope 在循环对象内外都可以访问。

 

AngularJS 控制器

---

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

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

---

AngularJS 控制器

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

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

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

AngularJS 实例

名:  

姓:  



姓名: {{firstName + " " + lastName}}

 

应用解析：

AngularJS 应用程序由 ng-app 定义。应用程序在

内运行。

ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。

控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

---

控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以有方法（变量和函数）：

AngularJS 实例

名:

姓:



姓名: {{fullName()}}

 

---

外部文件中的控制器

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

只需要把

名:

姓:



姓名: {{firstName + " " + lastName}}

 

---

其他实例

以下实例创建一个新的控制器文件:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

保存文件为namesController.js:

然后，在应用中使用控制器文件:

AngularJS 实例

 

 
• 
      {{ x.name + ', ' + x.country }}
   

 

 

AngularJS 过滤器

---

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

---

AngularJS 过滤器

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

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

---

表达式中添加过滤器

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

(下面的两个实例，我们将使用前面章节中提到的 person 控制器)

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

AngularJS 实例

姓名为 {{ lastName | uppercase }}

 

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

AngularJS 实例

姓名为 {{ lastName | lowercase }}

 

---

currency 过滤器

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

AngularJS 实例

数量:
价格:

总价 = {{ (quantity * price) | currency }}

 

---

向指令添加过滤器

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

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

AngularJS 实例

循环对象:

 
• 
      {{ x.name + ', ' + x.country }}
   

 

---

过滤输入

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

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

AngularJS 实例

输入过滤:

 
• 
      {{ (x.name | uppercase) + ', ' + x.country }}
   

 

---

自定义过滤器

以下实例自定义一个过滤器 reverse，将字符串反转：

AngularJS 实例

姓名: {{ msg | reverse }}

 

AngularJS 服务(Service)

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

---

什么是服务？

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

AngularJS 内建了30 多个服务。

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

实例

当前页面的url:

{{myUrl}}

该实例使用了内建的 $location 服务获取当前页面的 URL。

 

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

---

为什么使用服务?

在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。

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

$location vs window.location

	window.location	$location.service
目的	允许对当前浏览器位置进行读写操作	允许对当前浏览器位置进行读写操作
API	暴露一个能被读写的对象	暴露jquery风格的读写器
是否在AngularJS应用生命周期中和应用整合	否	可获取到应用生命周期内的每一个阶段，并且和$watch整合
是否和HTML5 API的无缝整合	否	是（对低级浏览器优雅降级）
和应用的上下文是否相关	否，window.location.path返回"/docroot/actual/path"	是，$location.path()返回"/actual/path"

---

$http 服务

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

实例

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

 

欢迎信息:

{{myWelcome}}

$http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。

 

以上是一个非常简单的 $http 服务实例。

---

$timeout 服务

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

实例

两秒后显示信息:

 

两秒后显示信息:

{{myHeader}}

$timeout 访问在规定的毫秒数后执行指定函数。

 

---

$interval 服务

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

实例

每一秒显示信息:

 

现在时间是:

{{theTime}}

$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。

 

---

创建自定义服务

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

创建名为hexafy 的服务:

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

要使用自定义服务，需要在定义控制器的时候独立添加，设置依赖关系:

实例

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

255 的16进制是:

{{hex}}

自定义服务，用于转换16进制数：

 

---

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

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

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

在过滤器中使用服务:

{{255 | myFormat}}

 

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

创建服务 hexafy:

在获取数组 [255, 251, 200] 值时使用过滤器:

 
• {{x | myFormat}}

过滤器使用服务将10进制转换为16进制。

 

AngularJS XMLHttpRequest

---

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

使用格式：

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

简写方法

POST 与 GET 简写方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

此外还有以下简写方法：

• $http.get
• $http.head
• $http.post
• $http.put
• $http.delete
• $http.jsonp
• $http.patch

 

---

读取 JSON 文件

以下是存储在web服务器上的 JSON 文件：

http://www.runoob.com/try/angularjs/data/sites.php

{ "sites": [

                     { "Name": "angularjs教程", "Url": "www.runoob.com", "Country": "CN" },

                     { "Name": "Google", "Url": "www.google.com", "Country": "USA" },

                     { "Name": "Facebook", "Url": "www.facebook.com", "Country": "USA" },

                    { "Name": "微博", "Url": "www.weibo.com", "Country": "CN" }

              ]

}

---

AngularJS $http

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

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

废弃声明 (v1.5)

v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。

通用方法实例

AngularJS1.5 以上版本 - 实例

 

 
• 
      {{ x.Name + ', ' + x.Country }}
   

 

简写方法实例

AngularJS1.5 以上版本 - 实例

 

 
• 
      {{ x.Name + ', ' + x.Country }}
   

 

AngularJS1.5 以下版本 - 实例

 

 
• 
      {{ x.Name + ', ' + x.Country }}
   

 

应用解析:

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

AngularJS 应用通过 ng-app 定义。应用在

中执行。

ng-controller 指令设置了 controller 对象 名。

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

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

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

服务器数据文件为：http://www.runoob.com/try/angularjs/data/sites.php。

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

 

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

 

AngularJS Select(选择框)

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

---

使用 ng-options 创建选择框

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

实例

该实例演示了 ng-options 指令的使用。

 

ng-init 设置默认选中值。

---

ng-options 与 ng-repeat

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

实例

{{x}}

该实例演示了使用 ng-repeat 指令来创建下拉列表。

 

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:

选择网站:

{{x.site}}

你选择的是: {{selectedSite}}

该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。

 

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

实例

使用 ng-options:

选择网站:

你选择的是: {{selectedSite.site}}

网址为: {{selectedSite.url}}

该实例演示了使用 ng-options  指令来创建下拉列表，选中的值是一个对象。

 

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

---

数据源为对象

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

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

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

实例

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

选择的网站是:

你选择的值是: {{selectedSite}}

该实例演示了使用对象作为创建下拉列表。

 

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

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

实例

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

选择一辆车:

你选择的是: {{selectedCar.brand}}

模型: {{selectedCar.model}}

颜色: {{selectedCar.color}}

注意选中的值是一个对象。

 

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

实例

选择一辆车:

你选择的是: {{selectedCar.brand}}

型号为: {{selectedCar.model}}

颜色为: {{selectedCar.color}}

下拉列表中的选项也可以是对象的属性。

 

AngularJS 表格

---

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

---

在表格中显示数据

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

AngularJS 实例

 

 
   
   
 

{{ x.Name }}

{{ x.Country }}

 

废弃声明 (v1.5)

v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。

如果你使用的是 v1.5 以下版本，可以使用以下代码：

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("/try/angularjs/data/Customers_JSON.php")
    .success(function (response) {$scope.names = response.records;});
});

Customers_JSON.php 文件代码：

echo <<

{

"records":[

                {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},

                {"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},

                {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},

                {"Name":"Around the Horn","City":"London","Country":"UK"},

                {"Name":"B's Beverages","City":"London","Country":"UK"},

                {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},

                {"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},

                {"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},

                {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},

                {"Name":"Bon app'","City":"Marseille","Country":"France"},

               {"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},

               {"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},

               {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},

               {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},

               {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"} 

            ] 

} 

EOT;

?>

---

使用 CSS 样式

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

CSS 样式

 

 
   
   
 

{{ x.Name }}

{{ x.Country }}

 

---

使用 orderBy 过滤器

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

AngularJS 实例

 

 
   
   
 

{{ x.Name }}

{{ x.Country }}

 

---

使用 uppercase 过滤器

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

AngularJS 实例

 

 
   
   
 

{{ x.Name }}

{{ x.Country | uppercase }}

 

---

显示序号 ($index)

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

AngularJS 实例

 

 
   
   
   
 

{{ $index + 1 }}

{{ x.Name }}

{{ x.Country }}

 

---

使用 $even 和 $odd

AngularJS 实例

 

 
   
   
   
   
 

{{ x.Name }}

{{ x.Name }}

{{ x.Country }}

{{ x.Country }}

 

AngularJS SQL

---

在前面章节中的代码也可以用于读取数据库中的数据。

---

使用 PHP 从 MySQL 中获取数据

AngularJS 实例

 

 
   
   
 

{{ x.Name }}

{{ x.Country }}

 

 

 

---

ASP.NET 中执行 SQL 获取数据

AngularJS 实例

 

    
    

{{ x.Name }}

{{ x.Country }}

 

---

服务端代码

以下列出了几种服务端代码类型：

1. 使用 PHP 和 MySQL。返回 JSON。
2. 使用 PHP 和 MS Access。返回 JSON。
3. 使用 ASP.NET, VB, 及 MS Access。 返回 JSON。
4. 使用 ASP.NET, Razor, 及 SQL Lite。 返回 JSON。

---

跨域 HTTP 请求

如果你需要从不同的服务器（不同域名）上获取数据就需要使用跨域 HTTP 请求。

跨域请求在网页上非常常见。很多网页从不同服务器上载入 CSS, 图片，Js脚本等。

在现代浏览器中，为了数据的安全，所有请求被严格限制在同一域名下，如果需要调用不同站点的数据，需要通过跨域来解决。

以下的 PHP 代码运行使用的网站进行跨域访问。

header("Access-Control-Allow-Origin: *");

 

---

1. PHP 和 MySql 代码实例

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);
?>

---

2. PHP 和 MS Access 代码实例

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);
?>

---

3. 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
%>

---

4. 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

 

AngularJS HTML DOM

---

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

---

ng-disabled 指令

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

AngularJS 实例

点我!

按钮

{{ mySwitch }}

 

 

实例讲解：

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

ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。

如果 mySwitch 为true, 按钮将不可用: 

点我！

如果 mySwitch 为false, 按钮则可用: 

点我!

---

ng-show 指令

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

AngularJS 实例

我是可见的。

我是不可见的。

 

 

ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。

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

AngularJS 实例

我是可见的。

---

ng-hide 指令

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

AngularJS 实例

我是不可见的。

我是可见的。

 

 

AngularJS 事件

---

AngularJS 有自己的 HTML 事件指令。

---

ng-click 指令

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

AngularJS 实例

点我！

{{ count }}

 

---

隐藏 HTML 元素

ng-hide 指令用于设置应用部分是否可见。

ng-hide="true" 设置 HTML 元素不可见。

ng-hide="false" 设置 HTML 元素可见。

AngularJS 实例

隐藏/显示

名:

姓:


姓名: {{firstName + " " + lastName}}

 

应用解析:

第一部分 personController与控制器章节类似。

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

ng-hide 指令设置

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

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

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

---

显示 HTML 元素

ng-show 指令可用于设置应用中的一部分是否可见 。

ng-show="false" 可以设置 HTML 元素 不可见。

ng-show="true" 可以以设置 HTML 元素可见。

以下实例使用了 ng-show 指令:

AngularJS 实例

隐藏/显示

名:

姓:


姓名: {{person.firstName + " " + person.lastName}}

 

AngularJS 模块

---

模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。

---

创建模块

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

...

"myApp" 参数对应执行应用的 HTML 元素。

现在你可以在 AngularJS 应用中添加控制器，指令，过滤器等。

---

添加控制器

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

AngularJS 实例

 

{{ firstName + " " + lastName }}

 

 

---

添加指令

AngularJS 提供了很多内置的指令，你可以使用它们来为你的应用添加功能。

此外，你可以使用模块来为你应用添加自己的指令：

AngularJS 实例

 

 

 

---

模块和控制器包含在 JS 文件中

通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。

在以下实例中， "myApp.js" 包含了应用模块的定义程序， "myCtrl.js" 文件包含了控制器：

AngularJS 实例

 

{{ firstName + " " + lastName }}

 

 

myApp.js

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

 

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

 

myCtrl.js

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});

---

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

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

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

---

什么时候载入库?

在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。

对于 HTML 应用程序，通常建议把所有的脚本都放置在 元素的最底部。

这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 区域被加载。

在我们的实例中，AngularJS 在 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。

另一个解决方案是在 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：

AngularJS 实例

{{ firstName + " " + lastName }}

 

AngularJS 表单

---

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

---

HTML 控件

以下 HTML input 元素被称为 HTML 控件:

• input 元素
• select 元素
• button 元素
• textarea 元素

---

数据绑定

Input 控件使用 ng-model 指令来实现数据绑定。

通过以上代码应用有了一个名为 firstname 的属性。

它通过 ng-model 指令来绑定到你的应用。

firstname 属性可以在 controller 中使用：

实例

 

    First Name:
 

 

也可以在应用的其他地方使用:

实例

 

    First Name:
 

 

你输入的内容为: {{firstname}}

修改输出框的内容，显示信息也会跟着变化。

 

---

Checkbox（复选框）

checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中：

实例

复选框选中后显示 h1 标签内容：

 

    选中复选框，显示标题:
   
 

 

My Header

标题使用了 ng-show 指令，复选框选中后显示 h1 标签内容。

 

---

单选框

我们可以使用 ng-model 来绑定单选按钮到你的应用中。

单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。

实例

根据选中的单选按钮，显示信息：

  选择一个选项:
  Dogs
  Tutorials
  Cars

 

     

Dogs

     

Welcome to a world of dogs.

 

 

     

Tutorials

     

Learn from examples.

 

 

     

Cars

     

Read about cars.

 

ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。

 

myVar 的值可以是 dogs, tuts, 或 cars。

---

下拉菜单

使用 ng-model 指令可以将下拉菜单绑定到你的应用中。

ng-model 属性的值为你在下拉菜单选中的选项：

实例

根据选中的下拉菜单选项，显示信息：

  选择一个选项:
 
   
    Dogs
    Tutorials
    Cars
 

 

     

Dogs

     

Welcome to a world of dogs.

 

 

     

Tutorials

     

Learn from examples.

 

 

     

Cars

     

Read about cars.

 

ng-switch 指令根据下拉菜单的选择结果显示或隐藏 HTML 区域。

 

myVar 的值可以是 dogs, tuts, 或 cars。

HTML 表单

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

---

AngularJS 表单实例

First Name:

Last Name:
 

RESET

form = {"firstName":"John","lastName":"Doe"}

master = {"firstName":"John","lastName":"Doe"}

---

应用程序代码

 

    First Name:

   

    Last Name:

   
   


    RESET
 

 

form = {{user}}

 

master = {{master}}

 

    

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 表单和控件的知识。

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

 

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

---

应用代码

Validation Example

name="myForm" novalidate>

用户名:

  
  
  用户名是必须的。
  

邮箱:

  
  
  邮箱是必须的。
  非法的邮箱。
  

     ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">

HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

 

---

实例解析

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

 

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

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

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

 

AngularJS API

---

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

---

AngularJS 全局 API

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：

• 比较对象
• 迭代对象
• 转换对象

全局 API 函数使用 angular 对象进行访问。

以下列出了一些通用的 API 函数：

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

注意：自 AngularJS 1.7 之后移除 angular.lowercase 和 angular.uppercase 方法, 改为 angular.$$lowercase 和 angular.$$uppercase

---

angular.lowercase()

实例

{{ x1 }}

{{ x2 }}

 

angular.uppercase()

实例

{{ x1 }}

{{ x2 }}

 

angular.isString()

实例

{{ x1 }}

{{ x2 }}

 

angular.isNumber()

实例

{{ x1 }}

{{ x2 }}

 

AngularJS Bootstrap

---

AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。

 

---

Bootstrap

你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 元素中添加如下代码:

如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：

以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。

 

---

HTML 代码

Users

  
    Edit
    First Name
    Last Name
  
  
    
      
        Edit
      
    
    {{ user.fName }}
    {{ user.lName }}
  

---

   Create New User

---

Create New User:
Edit User:



  First Name:
  
    
  

 

  Last Name:
  
    
  

  Password:
  
    
  

  Repeat: