AngularJS 是一个为动态 web 应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展 html 的语法,以弥补在构建动态 WEB 应用时静态文本的不足,从而在 web 应用程序中使用 HTML 声明动态内容。
AngularJS 有五个主要核心特性,如下介绍:
AngularJS 有一套完整的、可扩展的、用来帮助 web 应用开发的指令集,它使得 HTML 可以转变成 "特定领域语言 (DSL)",是用来扩展浏览器能力的技术之一,在 DOM 编译期间,和 HTML 关联着的指令会被检测到,并且被执行,这使得指令可以为 DOM 指定行为,或者改变它。
AngularJS 通过称为指令的新属性来扩展的 HTML,带有前缀 ng-,我们也可以称之为 "指令属性",它就是绑定在 DOM 元素上的函数,可以调用方法、定义行为、绑定 controller 及 $scope 对象、操作 DOM,等等。
AngularJS 指令指示的是 "当关联的 HTML 结构进入编译阶段时应该执行的操作",它本质上只是一个当编译器编译到相关 DOM 时需要执行的函数,可以写在元素的名称里,属性里,CSS 类名里,注释里。
当浏览器启动、开始解析 HTML 时,DOM 元素上的指令属性就会跟其他属性一样被解析,也就是说当一个 Angular.js 应用启动,Angular 编译器就会遍历 DOM 树来解析 HTML,寻找这些指令属性函数,在一个 DOM 元素上找到一个或多个这样的指令属性函数,它们就会被收集起来、排序,然后按照优先级顺序被执行。
Angular.js 应用的动态性和响应能力,都要归功于指令属性,常见的有:ng-app、ng-init、ng-model、ng-bind、ng-repeat 等等。
关于 "指令属性" 就先暂时介绍这些,相信你已经对它有初步的了解,接下来我们就开始逐一的深入的学习它们。
ng-app 指令来标明一个 AngularJS 应用程序,并通过 AngularJS 完成自动初始化应用和标记应用根作用域,同时载入和指令内容相关的模块,并通过拥有 ng-app 指令的标签为根节点开始编译其中的 DOM。
引用方法很简单,如下所示:
- <div ng-app="">
- </div>
如上引用,一个 AngularJS 应用程序初始化就完成了并标记了作用域,也就是 div 元素就是 AngularJS 应用程序的 "所有者",在它里面的指令也就会被 Angular 编译器所编译、解析了。
ng-init 指令初始化应用程序数据,也就是为 AngularJS 应用程序定义初始值,通常情况下,我们会使用一个控制器或模块来代替它,后面我们会介绍有关控制器和模块的知识。
如下所示,我们为应用程序变量 name 赋定初始值。
- <div ng-app="" ng-init="name='Hello World'">
- </div>
我们不仅可以赋值字符串,也可以赋值为数字、数组、对象,而且可以为多个变量赋初始值,如下所示:
- <div ng-app="" ng-init="quantity=1;price=5">
- </div>
- //或者
- <div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
- </div>
AngularJS 框架的核心功能之一 —— 数据绑定,由两个花括号 {{}} 组成,可以把数据绑定到 HTML,类似 Javascript 代码片段,可以包含文字、运算符和变量,通常在绑定数据中用到,表达式可以绑定数字、字符串、对象、数组,写在双大括号内:{{expression}}。
- <div ng-app="" ng-init="name='Hello World'">
- {{ name }}
- </div>
2.1. 输出数字,如下示例:
- <div ng-app="" ng-init="quantity=12;price=5">
- 总价: {{ quantity * price }}
- </div>
2.2. 输出对象,如下示例:
- <div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
- 名字为: {{ names[0] }}
- </div>
在 AngularJS 中,只需要使用 ng-model 指令就可以把应用程序数据绑定到 HTML 元素,实现 model 和 view 的双向绑定。
如下示例,使用 ng-model 指令对数据进行绑定。
注:输出什么显示什么
- <div ng-app="">
- 请输入任意值:
- <input type="text" ng-model="name" />
- 你输入的为: {{ name }}
- </div>
ng-model 把相关处理事件绑定到指定标签上,这样我们就可以不用在手工处理相关事件 (比如 change 等) 的条件下完成对数据的展现需求。
以上介绍了 ng-model 的单向绑定 (view->model) 后面控制器我们会用到它的双向绑定功能,好,参照以上代码,赶快试试数据绑定的效果吧!
指令 ng-bind 和 AngularJS 表达式 {{}} 有异曲同工之妙,但不同之处就在于 ng-bind 是在 angular 解析渲染完毕后才将数据显示出来的。
如下使用 ng-bind 指令绑定把应用程序数据。
- <div ng-app="">
- 请输入一个名字:
- <input type="text" ng-model="name" />
- Hello
- <span ng-bind="name">
- </span>
- </div>
PS:使用花括号语法时,因为浏览器需要首先加载页面,渲染它,然后 AngularJS 才能把它解析成你期望看到的内容,所以对于首个页面中的数据绑定操作,建议采用 ng-bind,以避免其未被渲染的模板被用户看到。
AngularJS 也有自己的 HTML 事件指令, 比如说通过 ng-click 定义一个 AngularJS 单击事件。
对按钮、链接等,我们都可以用 ng-click 指令属性来实现绑定,如下简单示例:
- <div ng-app="" ng-init="click=false">
- <button ng-click="click= !click">
- 隐藏/显示
- </button>
- <div ng-hide="click">
- 请输入一个名字:
- <input type="text" ng-model="name" />
- Hello
- <span ng-bind="name">
- </span>
- </div>
- </div>
PS:ng-hide="true",设置 HTML 元素不可见。
ng-click 指令将 DOM 元素的鼠标点击事件 (即 mousedown) 绑定到一个方法上,当浏览器在该 DOM 元素上鼠标触发点击事件时,Angular 就会调用相应的方法,是不是很简单方便呢!
来源: http://www.cnblogs.com/pythonxiaohu/p/5863086.html