本网站只能被运行在支持JavaScript脚本的环境中

第一节 从一个最简单的AngularJS页面开始

下载AngularJS

点击此处进入AngularJS官网。点击此处下载压缩版angular核心脚本文件。

一个最简单的AngularJS页面

我们的教程从一个最简单的AngularJS页面开始。在该页面中,显示“你好 XXXX!”,此处引号中的XXXX代表用户从页面中的一个文本框中输入的字符串,例如用户输入“张三”,则页面中显示“你好 张三!”。

<!DOCTYPE html>
<html>
<head>
<title>AngularJS使用示例</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <label>姓名:</label>
        <input type="text" ng-model="name" value=""/>
        <h1>你好 {{name}}!</h1>
    </div>
</body>
</html>

在本页面中,为了使用AngularJS,我们除了在head标签中引用Angularjs核心脚本之外,为body元素使用ng-app属性。<input type="text" ng-model="name" value=""/>中的ng-model为一个指令。在这段代码中,虽然没有书写任何JavaScript脚本代码,但是该指令将引起AngularJS内部脚本代码的自动执行。

<h1>Hello {{name}}!</h1>代码表示在h1中显示在ng-model指令中指定的变量。此处显示用户在输入框中输入的文字。

使用BootStrap进行美化

让我们使用BootStrap将该页面美化一下。对于BootStrap尚不熟悉的读者,可以点击此处查看BootStrap系列教程。

<!DOCTYPE html>
<html>
<head>
<title>AngularJS使用示例</title>
<script src="js/angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body ng-app>
    <div class="container">
        <div class="jumbotron">
            <label>姓名:</label>
            <input type="text" ng-model="name" value=""/>
            <h1>你好 {{name}}!</h1>
        </div>
    </div>
</body>
</html>