angularJS学习笔记

Jsangular

AngularJS 通过 ng-directives 扩展了 HTML。

  • ng-app 指令定义一个 AngularJS 应用程序。
  • ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
  • ng-bind 指令把应用程序数据绑定到 HTML 视图。

什么是 AngularJS？

“AngularJS 是专门为应用程序设计的 HTML。”
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素”背后”添加代码。
AngularJS 支持输入验证。

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 控制器

AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。

实例讲解：
AngularJS 应用程序由 ng-app 定义。应用程序在

内运行。
ng-controller 指令把控制器命名为 object。
函数 personController 是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性：$scope.person。
person 对象有两个属性：firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
控制器也可以把函数作为对象属性：

控制器方法

控制器也可以带有方法：

AngularJS 过滤器

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

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

  • 向表达式添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
（下面的两个实例，我们将使用前面章节中提到的 person 控制器）
uppercase 过滤器格式化字符串为大写：

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：

AngularJS XMLHttpRequest

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

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

AngularJS SQL

在前面章节中的代码也可以用于读取数据库中的数据
使用 PHP 从 MySQL 中获取数据

PHP 读取 MySQL 数据代码

AngularJS HTML DOM

AngularJS 有自己的 HTML 属性指令。
ng-disabled 指令

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

ng-show 指令

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

AngularJS HTML 事件

AngularJS 有自己的 HTML 事件指令。
ng-click 指令

ng-click 指令定义了一个 AngularJS 单击事件。

  • 隐藏 HTML 元素

ng-hide指令用于设置应用的一部分 不可见 。
ng-hide="true"让 HTML 元素 不可见。
ng-hide="false" 让元素可见。

  • 显示 HTML 元素

ng-show 指令可用于设置应用中的一部分可见 。
ng-show="false" 可以设置 HTML 元素 不可见。
ng-show="true" 可以以设置 HTML 元素可见。
以下实例使用了 ng-show 指令:

AngularJS 模块

模块定义了您的应用程序。
所有的控制器都应该属于一个模块。
模块保持全局命名空间中的整洁。
AngularJS 模块实例

在本实例中，”myApp.js” 包含了一个应用程序模块定义，”myCtrl.js” 包含了一个控制器：

使用一个由 模块 替代的控制器：

您的应用程序至少应该有一个模块文件，一个控制器文件。
首先，创建模块文件 “myApp.js”：

然后，创建控制器文件。本实例中是 “myCtrl.js”：