AngularJS入门教程之Hello World!

2024-05-06 14:49:39

字体：大中小

来源：转载

供稿：网友

开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”：

1.使用您喜爱的文本编辑器，创建一个HTML文件，例如：helloworld.html。
2.将下面的源代码复制到您的HTML文件。
3.在web浏览器中打开这个HTML文件。

源代码：
代码如下:
<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Hello {{'World'}}!
    </body>
</html>

请在您的浏览器中运行以上代码查看效果。

现在让我们仔细看看代码，看看到底怎么回事。当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：

代码如下:
<html ng-app>

这行载入AngularJS脚本：

代码如下:
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

（想了解AngularJS处理整个HTML页的细节，请看Bootstrap。）

最后，标签中的正文是应用的模板，在UI中显示我们的问候语：

代码如下:
Hello {{'World'}}!

注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World'。

下面，让我们看一个更有趣的例子：使用AngularJS对我们的问候语文本绑定一个动态表达式。

Hello AngularJS World!

本示例演示AngularJS的双向数据绑定（bi-directional data binding）：

1.编辑前面创建的helloworld.html文档。
2.将下面的源代码复制到您的HTML文件。
3.刷新浏览器窗口。

源代码：
代码如下:
<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || 'World'}}!
    </body>
</html>

请在您的浏览器中运行以上代码查看效果。

该示例有一下几点重要的注意事项：

1.文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。
2.双大括号标记将yourname模型变量添加到问候语文本。
3.你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！

现在试着在输入框中键入您的名称，您键入的名称将立即更新显示在问候语中。这就是AngularJS双向数据绑定的概念。输入框的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。

上一篇：浅谈javascript中createElement事件

下一篇：什么是 AngularJS？AngularJS简介