AngularJS 指令

什么是 AngularJS？

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

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

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

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

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

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

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

ng-option 指令来创建一个下拉列表

ng-repeat 指令是通过数组来循环

隐藏 HTML 元素

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

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

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

显示 HTML 元素

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

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

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

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

AngularJS 指令

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

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

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

AngularJS 表达式

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

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

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

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

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

AngularJS 应用

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

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

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

AngularJS 依赖注入

依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。

该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

• value
• factory
• service
• provider
• constant

• AngularJS 指令

  本教程用到的 AngularJS 指令 :

  指令	描述
  ng-app	定义应用程序的根元素。
  ng-bind	绑定 HTML 元素到应用程序数据
  ng-bind-html	绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
  ng-bind-template	规定要使用模板替换的文本内容
  ng-blur	规定 blur 事件的行为
  ng-change	规定在内容改变时要执行的表达式
  ng-checked	规定元素是否被选中
  ng-class	指定 HTML 元素使用的 CSS 类
  ng-class-even	类似 ng-class，但只在偶数行起作用
  ng-class-odd	类似 ng-class，但只在奇数行起作用
  ng-click	定义元素被点击时的行为
  ng-cloak	在应用正要加载时防止其闪烁
  ng-controller	定义应用的控制器对象
  ng-copy	规定拷贝事件的行为
  ng-csp	修改内容的安全策略
  ng-cut	规定剪切事件的行为
  ng-dblclick	规定双击事件的行为
  ng-disabled	规定一个元素是否被禁用
  ng-focus	规定聚焦事件的行为
  ng-form	指定 HTML 表单继承控制器表单
  ng-hide	隐藏或显示 HTML 元素
  ng-href	为 the <a> 元素指定链接
  ng-if	如果条件为 false 移除 HTML 元素
  ng-include	在应用中包含 HTML 文件
  ng-init	定义应用的初始化值
  ng-jq	定义应用必须使用到的库，如：jQuery
  ng-keydown	规定按下按键事件的行为
  ng-keypress	规定按下按键事件的行为
  ng-keyup	规定松开按键事件的行为
  ng-list	将文本转换为列表 (数组)
  ng-model	绑定 HTML 控制器的值到应用数据
  ng-model-options	规定如何更新模型
  ng-mousedown	规定按下鼠标按键时的行为
  ng-mouseenter	规定鼠标指针穿过元素时的行为
  ng-mouseleave	规定鼠标指针离开元素时的行为
  ng-mousemove	规定鼠标指针在指定的元素中移动时的行为
  ng-mouseover	规定鼠标指针位于元素上方时的行为
  ng-mouseup	规定当在元素上松开鼠标按钮时的行为
  ng-non-bindable	规定元素或子元素不能绑定数据
  ng-open	指定元素的 open 属性
  ng-options	在 <select> 列表中指定 <options>
  ng-paste	规定粘贴事件的行为
  ng-pluralize	根据本地化规则显示信息
  ng-readonly	指定元素的 readonly 属性
  ng-repeat	定义集合中每项数据的模板
  ng-selected	指定元素的 selected 属性
  ng-show	显示或隐藏 HTML 元素
  ng-src	指定 <img> 元素的 src 属性
  ng-srcset	指定 <img> 元素的 srcset 属性
  ng-style	指定元素的 style 属性
  ng-submit	规定 onsubmit 事件发生时执行的表达式
  ng-switch	规定显示或隐藏子元素的条件
  ng-transclude	规定填充的目标位置
  ng-value	规定 input 元素的值

  过滤器解析 AngularJs 过滤器。

  ---

  AngularJS 事件

  AngularJS 支持以下事件:

• ng-click
• ng-dbl-click
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-keydown
• ng-keyup
• ng-keypress
• ng-change

• 事件解析： Angular 事件。

  ---

  AngularJS 验证属性

• $dirty
• $invalid
• $error

• 验证解析：Angular 验证。

  ---

  AngularJS 全局 API

  转换

  API	描述
  angular.lowercase()	将字符串转换为小写
  angular.uppercase()	将字符串转换为大写
  angular.copy()	数组或对象深度拷贝
  angular.forEach()	对象或数组的迭代函数

  比较

  API	描述
  angular.isArray()	如果引用的是数组返回 true
  angular.isDate()	如果引用的是日期返回 true
  angular.isDefined()	如果引用的已定义返回 true
  angular.isElement()	如果引用的是 DOM 元素返回 true
  angular.isFunction()	如果引用的是函数返回 true
  angular.isNumber()	如果引用的是数字返回 true
  angular.isObject()	如果引用的是对象返回 true
  angular.isString()	如果引用的是字符串返回 true
  angular.isUndefined()	如果引用的未定义返回 true
  angular.equals()	如果两个对象相等返回 true

  JSON

  API	描述
  angular.fromJson()	反序列化 JSON 字符串
  angular.toJson()	序列化 JSON 字符串

  基础

  API	描述
  angular.bootstrap()	手动启动 AngularJS
  angular.element()	包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。
  angular.module()	创建，注册或检索 AngularJS 模块