AngularJS基础教程

点击这里到AngularJS官网下载最新版本。

点击左边的“Download AngularJS 1”，会弹出一个对话框：

在这里你有多种选择，你可选择压缩版、未压缩版或zip包，也可选择使用CDN（当然这个CDN在我朝是不推荐使用的）。

你也可以用 npm 来安装AngularJS，前提是你的电脑上需安装有 Node.js。

我们不对选项做任何修改，直接点击底部的“Download”下载最新的压缩版。

如果官网无法打开，你可以到这里去下载：http://www.bootcdn.cn/angular.js/。

用你喜欢的任何IDE创建一个名叫 HelloAngularJS 的Web项目。将下载的 AngularJS 文件放入项目中，并在根目录下创建一个名为 index.html 的文件。

在 index.html 中引入 AngularJS 文件，为 body 标签加入属性 ng-app="" ，并在 body 标签内加入一个 div，在此 div 内输入 Hello AngularJS。

最终我们的 index.html 应该是这样子的：

在浏览器在打开 index.html：

从运行效果来看，与我们之前不使用 AngularJS 创建的页面并没有什么不同。

从代码来看，我们在 body 标签中加入了一个我们之前并未用过的属性 ng-app=""，但它似乎没有起任何作用，没有给我们带来任何惊喜。

单从这个案例中我们确实无法看出 AngularJS 为我们做了什么，但它确定有做事情。ng-app="" 是一个 AngularJS 指令，它告诉 AngularJS 应该对 DOM 的哪部分进行管理。

那么 AngularJS 能做哪些“管理”呢？在后面的课程中我们将逐一介绍。

在 AngularJS 中还有很多指令，在后面的学习中我们也将了解到更多。

在 HTML 规范中，自定义属性建议以 data- 开头。显然，AngularJS 的指令不是 HTML 自带的属性，属于自定义属性。为了迎合 HTML 的规范，AngularJS 的所有指令都允许在前面加上 data-。例如，可将 ng-app="" 写为 data-ng-app=""，它们两个是完全等效的。