AngularJS入门和快速开始

最新推荐文章于 2024-08-25 08:47:15 发布

aigouzz

最新推荐文章于 2024-08-25 08:47:15 发布

阅读量257

点赞数

文章标签： angularjs

本文介绍AngularJS的基础知识，包括如何创建第一个应用“Hello World”，实现动态数据绑定，并讲解AngularJS的模板、逻辑及模型数据等核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于AngularJS，是一门比较新的技术，我在知道它比较强大，但是我也只是自学了一点点，属于AngularJS的新手，真正的大项目中也没有用到AngularJS，但是我对AngularJS还是比较喜欢的。下面分享一下，新手如何快速开始和入门AngularJS！

Hello World!

开始学习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）：

编辑前面创建的helloworld.html文档。

将下面的源代码复制到您的HTML文件。

刷新浏览器窗口。

源代码

<!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>