第1节：初识Angular-搭建开发应用的环境
1.1.3 搭建开发Angular应用的环境
1．下载Angular文件框架库
在Angular的官方网站（http://angularjs.org/）中，下载最新版本的Angular文件库，该网站的页面如下图1-1所示。
图1-1下载Angular文件库的界面
在Angular官网中，点击“Download”（下载）按钮，选择最新版本的Zip压缩文件包到本地，目前（截止到2014年4月）最新版为1.2.16，本书的全部案例都是基于本版本基础之上开发的。
2．引入Angular文件库
当下载完最新版本的Angular压缩包后，并不需要任何的安装，只需要将其中的angular.js文件通过使用<script>标记导入到页面中即可。假设该文件下载后保存在项目的Script文件夹中，那么，只需要在页面的<head></head>元素中加入下列的代码：
<script src="../Script/angular.min.js" type="text/javascript"></script>
通过加入上述代码便完成了Angular框架的引入，这种方式是对下载后的本地框架库的引入。还可以直接通过<script>元素调用CDN中的Angular框架文件，CDN地址为：https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js，因此，加入<head></head>元素中的代码修改为：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" type="text/javascript"></script>
这两种方式都可以实现Angular框架文件引入页面的功能。在完成框架文件的引入之后，就可以开启我们“神奇”的Angular之旅了。
1.2 开发简单的Angular应用
首先，我们来编写一个简单的Angular应用，参见下列的示例。
示例1-1 编写一个简单的Angular程序
(1) 功能描述
当页面加载时，在页面的正文部分显示“Hello,欢迎来到angular世界！”的字样。
(2) 实现代码
新建一个HTML文件1-1.html，加入如代码清单1-1所示的代码。
代码清单1-1 第一个简单的Angular程序
<!doctype html>
<html ng-app>
<head>
<title>第一个简单的angular程序</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
</head>
<body>
{{'Hello,欢迎来到angular世界！'}}
</body>
</html>
(3) 页面效果
HTML文件1-1.html最终实现的页面效果如下图1-2所示。
图1-2 第一个简单的Angular程序
(4) 源码分析
在本示例的代码中，我们先在<html>元素中增加了一个“ng-app”属性，这一属性的功能是通知引入的Angular文件框架，页面中的哪个部分开始接受它的管理。既然是在<html>元素中增加这个属性，表明Angular可以管理整个页面文件，“ng-app”属性还可以添加至某个<div>元素中，表明仅在这个<div>范围内，可以调用Angular框架管理其中包含的DOM元素。
此外，在页面的<body>元素中，使用两个大括号的方式包含了一个字符串，其中两个大括号是Angular框架插入动态数据的一种方式，我们称之为“双花括号插值语法”。在通常情况下，通过这种方式插入的数据均为表达式，并且在插入时已获取了表达式的结果值，并直接将该值显示在页面中。在本实例中，由于表达式是字符串内容，因此，直接显示在页面中。
