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

 

posted @ 2017-03-27 13:01  我的天空-老潘  阅读(358)  评论(0编辑  收藏  举报