在本章节中,我们将介绍如何创建一个简单的 AngularJS 应用程序,并展示一些常见的 AngularJS 指令和功能。
创建一个 AngularJS 应用程序
首先,我们需要在 HTML 文件中引入 AngularJS 库。可以通过 CDN 或者下载本地文件进行引入。接着,在 HTML 文件中添加一个 ng-app 指令来定义 AngularJS 应用程序的根元素。示例代码如下:
-- -------------------- ---- -------
--------- -----
------
------
--------- --------- -----------
------- ------------------------------------------------------------------------------------
-------
----- ---------------
---- -----------------------
------ ------- -------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
-------------- - ------- ------------
---
---------
-------
-------在上面的示例中,我们创建了一个名为 myApp 的 AngularJS 应用程序,并定义了一个名为 myCtrl 的控制器。控制器中定义了一个名为 message 的作用域变量,用于在页面中显示一条消息。
使用 ng-model 指令
ng-model 指令用于在 AngularJS 应用程序中创建双向数据绑定。下面是一个简单的示例,展示了如何使用 ng-model 指令来实现输入框和显示框的数据同步:
-- -------------------- ---- -------
--------- -----
------
------
--------- --------- -----------
------- ------------------------------------------------------------------------------------
-------
----- ---------------
---- -----------------------
------ ----------- ----------------
---------- -- ---- -------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
----------- - ------------
---
---------
-------
-------在上面的示例中,我们创建了一个输入框和一个显示框,通过 ng-model 指令实现了它们之间的数据绑定。当用户在输入框中输入内容时,显示框中的内容会实时更新。
以上就是关于 AngularJS 实例的介绍,希望能帮助您更好地理解 AngularJS 的基本用法。在接下来的章节中,我们将继续深入探讨 AngularJS 的更多功能和用法。