Angular是一款优秀的前端框架，擅长做单页面应用程序（SPA）。Angular的介绍不过多阐述，本文以最基础的demo展示如何使用angular。

一、环境准备

1. 安装node.js 和 npm。安装过程简单，网上有很多安装教程，不过多阐述。安装node.js时会集成npm，所以安装node.js即可，无需再单独安装npm。

2. 使用npm下载angular.js文件到本地。不多说。

3. 准备一款适合自己的IDE;

 

二、如何将angular程序应用到HTML文件？

1. 在html页面通过script标签引入angular.js文件；

2. 创建一个AngularJS模块（module）；angular程序是用JavaScript语言编写的，所以angular程序需要书写在script标签内或外部js文件中，本例采用第一种方式。

3. 给HTML标签添加ng-app属性；

程序清单1：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>hello, Angular!</title>
 6 <!-- 引入angular文件 -->
 7 <script src="angular.js"></script>
 8 <script type="text/javascript">
 9     // app是创建好的angular模块
10     // myapp是模块的名字
11     var app = angular.module('myapp', []);
12 </script>
13 </head>
14 <!-- 给body元素添加ng-app="myapp"属性表示该元素被myapp模块管理 -->
15 <body ng-app="myapp">
16 </body>
17 </html>

案例详解：

1.  angular.module('模块名', ['模块依赖']);

该方法创建并返回一个模块，注意第二个参数是数组，表示该模块的依赖，该参数不能省略。如果省略了，则表示获取模块，

例如 var app = angular.module('myapp');   表示获取到myapp这个模块。如果所创建的模块（module）不需要依赖其他模块，写成空数组即可。

简言之，一个参数获取模块，两个参数创建模块。

2. 在body元素上添加ng-app指令（对HTML元素来说也是属性），表示body及其子元素会被myapp模块管理。ng-app是angular应用程序的边界。

浏览器见到该指令，就会调用angular机制来执行。