- AngularJS入门与进阶
- 江荣波
- 1361字
- 2020-11-28 23:44:28
1.4 AngularJS应用剖析
1.4.1 第一个AngularJS应用解惑
在1.3节中，我们一起完成了第一个AngularJS应用，并看到了运行效果，从未接触过AngularJS的读者可能会产生以下几个疑问：
● <html>标签中的ng-app属性是什么？
● {{}}嵌套的两个大括号又是什么？
● 为什么页面显示的内容变成了“Hello World! ”和“Hello AngularJS! ”？
下面将对这些问题进行解答。
ng-app是AngularJS的一个内置指令，可以出现在任意位置，并有两个作用，一个是启动AngularJS框架，另一个是告诉AngularJS框架从ng-app指令所在标签的开始标签到结束标签之间的所有DOM元素由AnguarJS框架进行管理。
为了证明上面的结论，我们可以把ng-app的位置放到第一个<div>标签中，完整代码如下：
代码清单：ch01\ch01_04.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ch01_04</title>
<script type="text/javascript" src="../angular-1.5.5/angular.js">
</script>
</head>
<body>
<div ng-app>{{"Hello World! "}}</div>
<div>{{"Hello AngularJS! "}}</div>
</body>
</html>
接下来在浏览器中预览ch01_04.html页面，如图1.8所示。页面输出内容发生了变化。
图1.8 ng-app指令作用说明案例
这是因为ng-app出现在第一个<div>标签中，只有第一个<div>开始标签到结束标签之间的DOM元素由AngularJS框架进行管理，所以第二个<div>中的两个嵌套大括号原样输出。通常情况下，我们会把ng-app指令放在<html>标签中，让AngularJS管理整个页面。
{{}}是AngularJS的表达式形式，由两个嵌套的大括号构成，大括号中间为表达式内容，AngularJS会对表达式内容进行解析，然后将表达式结果输出到浏览器。在上面的例子中，表达式内容为字符串字面量，AngularJS会将该字面量输出到页面。
1.4.2 AngularJS应用构成元素
在第一个AngularJS例子中，我们已经接触到构成AngularJS应用的一些元素，例如指令、表达式。除此之外，构成AngularJS应用的元素还有很多，一些重要的概念将会在后面用到，这里我们需要先了解一下。
● 模型（Model）:AngularJS程序中用于展示到页面的数据，本质是一个JavaScript对象。
● 视图（VIew）：从用户的角度来看，视图就是用户所看到的网页内容；从AngularJS应用的角度来说，视图则是AngularJS指令与表达式经过解析后的DOM元素。
● 控制器（Controller）:AngularJS应用中用于处理业务逻辑的JavaScript方法。
● 作用域（Scope）：可以把作用域理解为一个容器，在控制器中可以访问这个容器，然后往容器中放入一些模型数据，在视图中就可以通过表达式将数据展现给用户。
● 指令（Directives）：扩展的HTML属性或标签，能够被AngularJS框架识别，根据不同的指令执行相应的动作。例如，前面提到的ng-app指令，作为html元素的扩展属性，能够被AngularJS框架识别，从而启动AngularJS框架。
● 表达式（Expressions）：用于向页面输出信息，在前面已经接触过，下节将会对表达式做更详细的介绍。
● 模板（Template）:AngularJS以HTML作为模板语言，AngularJS模板实际上就是HTML片段。
1.4.3 AngularJS表达式
表达式是AngularJS应用中，最基本也最常用的概念，本小节就对AngularJS表达式做一个详细的介绍。
1．表达式的定义方式
{{expression}}
AngularJS框架遇到嵌套的两层大括号时会把嵌套大括号中的内容作为表达式处理。
2．表达式中的四则运算
AngularJS表达式支持加减乘除四则运算及字符串拼接运算，例如：
代码清单：ch01\ch01_05.html
<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>ch01_05</title>
<script type="text/javascript" src="../angular-1.5.5/angular.js">
</script>
</head>
<body>
<div>1 + 2 = {{1 + 2}}</div>
<div>5-3 = {{5-3}}</div>
<div>5 * 3 = {{5 * 3}}</div>
<div>10 / 2 = {{10 / 2}}</div>
<div>"hello"+"world" = {{"hello" + "world"}}</div>
</body>
</html>
在浏览器中的预览效果如下：
1 + 2 = 3
5-3 = 2
5 * 3 = 15
10 / 2 = 5
"hello"+"world" = helloworld
3．表达式中的逻辑运算
AngularJS表达式除了支持算术运算外，还支持逻辑运算，例如：
代码清单：ch01\ch01_06.html
<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>ch01_06</title>
<script type="text/javascript" src="../angular-1.5.5/angular.js">
</script>
</head>
<body>
<div>1 || 0 = {{1 || 0}}</div>
<div>true && false = {{true && false}}</div>
</body>
</html>
AngularJS表达式的逻辑运算结果和JavaScript相同，页面输出如下：
1 || 0 = 1
true && false = false
4．表达式与作用域
AngularJS表达式可以访问作用域中的数据，把数据输出到HTML页面，例如：
代码清单：ch01\ch01_07.html
<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>ch01_07</title>
<script type="text/javascript" src="../angular-1.5.5/angular.js">
</script>
</head>
<body ng-init="person={'name':'jane'}; arr=['angularjs', 'jquery', 'dojo']">
<div >{{person.name}}</div>
<div >{{arr[0]}}</div>
</body>
</html>
在本例中，我们又接触了一个新指令ng-init。该指令用于初始化作用域，在上面的代码中，我们通过ng-init指令向作用域中增加一个person对象和arr数组，然后通过表达式输出person对象的name属性和arr数组的第一个元素。
接下来可以在浏览器中运行ch01_07.html页面，输出内容如下：
jane
angularjs