AngularJS(二):ng-app指令、表达式
本文也同步发表在我的公众号“我的天空”
ng-app指令
AngularJS指令是扩展的HTML属性,所有指令均带有前缀“ng-”,我们学习的第一个指令便是ng-app,其定义了AngularJS管理的HTML范围,可以将其想象为“作用域”,只有在添加了ng-app指令的元素中,才能应用AngularJS。如果打算将全部页面应用在AngularJS下,则可以在html标签里加上ng-app指令,如以下代码:
<html ng-app>
....
</html>
如果仅仅是在页面的某一部分应用AngularJS,那么可将ng-app指令加在具体HTML元素上,如以下只在第一个DIV内应用AngularJS:
<html>
<div ng-app>
....
</div>
<div>
....
</div>
</html>
ng-app可以为其命名,如ng-app="myApp",这个时候便可以通过名称来引用,就像我们之前的演示代码一样,甚至也可以直接写成ng-app=""。
表达式
在AngularJS中,使用表达式将数据绑定在HTML中,并且其与Javascript表达式很相似。AngularJS将表达式用双大括号包裹后嵌入到HTML中,如以下代码将显示10:
<body ng-app>
<div>{{3+7}}</div>
<body>
当然在实际情况中,我们基本不会直接在表达式里写常量,观察在上一讲中的示例代码,我们在表达式中写了一个变量“test”,同时使用ng-init指令为该变量赋予初值,以下代码将使div的内容显示为"hello":
<body ng-app ng-init="test='hello'">
<div>{{test}}</div>
</body>
我们也可以使用ng-init为多个变量赋初值,多个变量之间用分号隔开:
<body ng-app ng-init="a='hello';b='angularJS'">
<div>{{a}}</div>
<div>{{b}}</div>
</body>
在实际应用中,我们一般不大会使用ng-init来为变量赋初值,在后面的控制器一章中将学习更好的初始化数据的方法。
AngularJS的表达式可以支持多种数据类型,包括数字、字符串、对象、数组等,以下代码分别展示:
AngularJS数字:
<body ng-app ng-init="a=10">
<div>{{a}}</div>
</body>
AngularJS字符串:
<body ng-app ng-init="a='Hello AngularJS'">
<div>{{a}}</div>
</body>
AngularJS数组(显示“王五”):
<body ng-app ng-init="names=['张三','李四','王五']">
<div>{{names[2]}}</div>
</body>
AngularJS对象(显示“男”):
<body ng-app ng-init="people={name:'张三',sex:'男',age:18}">
<div>{{people.sex}}</div>
</body>
AngularJS表达式与Javascript表达式的相同之处在于其可以包含字母、操作符和变量,不同之处在于它可以写在HTML中,另外也不支持条件判断、循环、异常等。
该系列的示例代码
https://github.com/panyongwow/angularJS