SakuraLu 2017-05-11
简介:AngularJS 是一个 JavaScript 框架,通过 <script> 标签添加到 HTML 页面
例如:
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
通过表达式绑定数据到 HTML
AngularJS 指令:
(参考网址:http://www.runoob.com/angularjs/angularjs-reference.html)
以 ng 作为前缀的 HTML 属性:
(1)ng-directives 扩展了 HTML
(2)ng-app 指令定义一个 AngularJS 应用程序的根元素,一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序,在网页加载完毕时会自动引导(自动初始化)应用程序
(3)ng-model 指令把html元素(比如输入域的值)绑定到应用程序
(扩展)ng-model 指令作用:
①为应用程序数据提供类型验证(number、email、required)
②为应用程序数据提供状态(invalid、dirty、touched、error)
③为 HTML 元素提供 CSS 类
④绑定 HTML 元素到 HTML 表单
(4)ng-bind 指令把应用程序数据绑定到 HTML 视图
(5)ng-init 指令初始化AngularJS应用程序变量,为应用程序定义了初始值.通常情况下,不使用 ng-init,使用一个控制器或模块来代替它
(6)ng-controller 定义了控制器
(7)ng-bind绑定HTML元素到应用程序数据,
<element ng-bind="expression"></element> // 或作为 CSS 类: <element class="ng-bind: expression"></element>
(8)ng-repeat 指令会重复一个HTML元素,遍历数组对象
(9)创建自定义的指令,使用 .directive 函数来添加自定义的指令,要调用自定义指令,HTML 元素上需要添加自定义指令名
使用驼峰法来命名一个指令, 例如runoobDirective, 但在使用它时需要以 - 分割.可以通过以下方式来调用指令:元素名,属性,类名,注释
(10)ng-if 指令用于在表达式为 false 时移除 HTML 元素,若为true,会添加移除元素,并显示.语法<div ng-if="expression"></div>
(11) ng-hide 隐藏元素,而ng-if 是从 DOM 中移除元素
(AngularJS 模块(Module) 定义了 AngularJS 应用
AngularJS 控制器(Controller) 用于控制 AngularJS 应用
ng-app指令定义了应用, ng-controller 定义了控制器)
angularjs作用:
把应用程序数据绑定到 HTML 元素
克隆和重复 HTML 元素
隐藏和显示 HTML 元素
在 HTML 元素"背后"添加代码
支持输入验证
AngularJS表达式可以包含字母,操作符,变量;可以写在 HTML 中;不支持条件判断,循环及异常;支持过滤器
数据绑定:
{{ firstName }} 表达式是一个 AngularJS 数据绑定表达式
AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据
{{ firstName }} 是通过 ng-model="firstName" 进行同步