AngularJS入门教程-Hello World（二）

2016-06-08 本文已影响304人憨厚的老菜鸟

上一节中，我简单的介绍了AngularJS，并告诉大家如何去下载，这一节，我们就来实际的利用AngularJS开发一个我们最熟知的Hello World。

开发工具

Sublime Text

Hello World

1、创建工程目录

在本地磁盘创建一个工程目录，即创建一个工程文件夹。

2、加入AngularJS文件

将下载完成的AngularJS文件拷贝到工程目录中，本教程使用的是AngularJS－1.5.6版本。

3、创建HTML文件

在工程目录下，创建一个index.html的文件。

4、引入脚本

在html文件中，引入AngularJS所需的脚本文件。

5、利用AngularJS开发

在html中加入如下代码

<body np-app>
  请输入姓名：<input type="text" ng-model="name"/>
  <hr>
  Hello {{name|| 'World'}}
</body>

代码解释：

指令ng-app：<body ng-app>

ng-app指令标记了AngularJS的作用域，它可以放在<html>标签中，如<html ng-app>,表示整个html文档都在AngularJS的作用域下，当然，也可以在局部使用AngularJS的脚本，如<div ng-app>。

指令ng-model：ng-model="name"

绑定HTML控制器的值到应用数据。该Demo中，将文本框中的值绑定到一个名为name的模型中，然后在利用双大括号表达式来进行数据展示。

双大括号表达式：{{name||'World'}}

这个是AngularJS的核心功能－数据绑定,该表达式要在AngularJS的作用域中才会起作用。

6、运行结果

双击工程目录中的index.html文件，在浏览器中打开。

在文本框中输入文字，分割线下面的World会随着变化。

工程目录结构

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Demo</title>
    <script type="text/javascript" src="asset/angularjs/angular.js"></script>
</head>
<body np-app>
  请输入姓名：<input type="text" ng-model="name"/>
  <hr>
  Hello {{name|| 'World'}}
</body>
</html>

总结

本例中需要注意几点：
1）input文本框绑定到一个名为name的模型中，ng-model="name"。
2）双大括号的name是将文本框中的输入的文字插入到问候语中。
这就是AngularJS双向数据绑定的概念，输入框的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。不需要再为该应用另编写一个监听事件的程序。