AngularJS的表达式、指令的学习（2）

最近没有那么忙，就来系统学习一下AngularJS吧，昨天简单的认识了一下，今天就从表达式入手吧，嘿嘿。

一、AngularJS 表达式

AngularJS表达式写在双大括号内：{{expression}}，把数据绑定到HTML，其实和与ng-bind是一样的实现，在表达式书写的位置"输出"数据，既可以直接写表达式，而在页面呈现时间就是直接输出的表达式的结果。AngularJS 表达式很像JavaScript表达式：它们可以包含文字、运算符和变量。

（1）、AngularJS与javascript的对比

<1>、AngularJS数字与javascript的对比

在浏览器中呈现的结果如下：

<2>、AngularJS字符串javascript的对比

在浏览器中呈现的结果如下：

<3>、AngularJS对象与javascript的对比

在浏览器中呈现的结果如下：

<4>、AngularJS数组与javascript的对比

在浏览器中呈现的结果如下：

（2）、使用ng-init实现以上实例的相同

<1>、AngularJS数字使用ng-init来把表达式的值绑定在html中

在浏览器中呈现的结果如下：

<2>、AngularJS字符串使用ng-init来把表达式的值绑定在html中

在浏览器中呈现的结果如下：

<3>、AngularJS对象使用ng-init来把表达式的值绑定在html中

在浏览器中呈现的结果如下：

<4>、AngularJS数组使用ng-init来把表达式的值绑定在html中

在浏览器中呈现的结果如下：

综上所述，我们可以看到类似于JavaScript 表达式，AngularJS表达式可以包含字母，操作符以及变量，与JavaScript 表达式不同，AngularJS表达式可以写在HTML中，但是AngularJS不支持条件判断，循环及异常。更不同的是AngularJS表达式支持过滤器。

二、AngularJS指令

AngularJS
通过被称为“指令”的新属性来扩展
HTML，前面就介绍过AngularJS指令是扩展的HTML属性，带有前缀ng-；ng-app指令初始化一个AngularJS应用程序；ng-
init指令初始化应用程序数据；而ng-model指令把元素值（比如输入域的值）绑定到应用程序。

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

在浏览器中呈现的结果如下：

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

（2）、数据绑定

上
面实例中的{{firstName}}表达式是一个AngularJS数据绑定表达式，AngularJS中的数据绑定，同步了AngularJS表达式
与AngularJS数据，{{firstName}}是通过ng-model="firstName"进行同步，如下实例中，两个文本域是通过两个
ng-model指令同步的：

在浏览器中呈现的结果如下：

（3）、重复Html元素

在浏览器中呈现的结果如下：

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

在浏览器中呈现的结果如下：

由上面的几个小实例我们就总结一下吧简单：

ng-app指令定义了AngularJS应用程序的根元素，在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-init指令为AngularJS应用程序定义了初始值。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

ng-model指令绑定HTML元素到应用程序数据。ng-model指令也可以为应用程序数据提供类型验证（number、email、
required），或者为应用程序数据提供状态（invalid、dirty、touched、error），也可以为HTML元素提供CSS类以及绑
定HTML元素到HTML表单。

ng-repeat指令对于集合中（数组中）的每个项会克隆一次HTML元素。

今天就写到这里啦，嘿嘿，明天继续的啦。我只是从基础学起的哦，嘿嘿，加油加油！

巴特西

AngularJS的表达式、指令的学习（2）

最新文章

热门文章