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>
我们建议把脚本放在 <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'}
"
{{ person.lastName }}
使用 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 表达式支持过滤器。