AngularJS基础教程

Hello AngularJS

前言

在本章节,让我们来初探AngularJS,用AngularJS创建我们的第一个应用:Hello AngularJS

获得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 应该是这样子的:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello AngularJS</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="">
<div>Hello AngularJS</div>
</body>
</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="",它们两个是完全等效的。

最后,来个广告

若你觉得此文不错,请分享,若认为尚需改进,请点讚。

结束语