AngularJS 初步了解.docx

AngularJS 是一个 JavaScript 框架

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

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

我们建议把脚本放在 <body> 元素的底部。

这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

AngularJS 表达式

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

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

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

* 使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

< div ng-app = "" ng-init = " quantity=1;cost=5 " > < p > 总价： {{ quantity * cost }} </ p > </ div >

--------------------- AngularJS 数字 - -------------------

< div ng-app = "" ng-init = " quantity=1;cost=5 " > < p > 总价： < span ng-bind = " quantity * cost " ></ span ></ p > </ div >

---------------------AngularJS 对象 --------------------

ng-init = " person={firstName:'John',lastName:'Doe'} "

使用 ng-bind 绑定数据

< div ng-app = "" ng-init = " person={firstName:'John',lastName:'Doe'} " > < p > 姓为 < span ng-bind = " person.lastName " ></ span ></ p > </ div >

--------------------- AngularJS 字符串 - -------------------

< div ng-app = "" ng-init = " firstName='John';lastName='Doe' " > < p > 姓名： {{ firstName + " " + lastName }} </ p > </ div >

----------------------AngularJS 数组 ---------------------

< div ng-app = "" ng-init = " points=[1,15,19,2,40] " > < p > 第三个值为 {{ points[2] }} </ p > </ div >

-----------------------------------------------------------

AngularJS 表达式与 JavaScript 表达式

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。