AngularJS 是一个由 Google 开发的 JavaScript 框架，用于构建动态 Web 应用程序。它提供了一些强大的功能，如数据绑定、依赖注入、组件化等，使得开发者可以更加轻松地创建复杂的应用程序。本文将介绍 AngularJS 的基础知识，帮助初学者快速入门。
准备工作
在开始学习 AngularJS 之前，需要先安装它。可以通过以下方式进行安装：
- 下载 AngularJS 的最新版本：https://angularjs.org/
- 在 HTML 文件中引入 AngularJS 库：
------- ------------------------------------------------------------------------------------
数据绑定
AngularJS 的一个重要特性是数据绑定。它允许开发者将应用程序中的数据与 HTML 元素绑定在一起，使得当数据发生变化时，HTML 元素也会相应地更新。下面是一个简单的例子：
---- ---------- ------------ ----------- -------------------- ------------------ ------
这个例子中，ng-app 指令表示这个应用程序的边界，ng-model 指令表示将输入框中的值与 name 变量绑定在一起，{{name}} 表示将 name 变量的值显示在 HTML 中。当用户在输入框中输入值时，{{name}} 的值也会相应地更新。
控制器
控制器是 AngularJS 应用程序中的一个重要组成部分，它用于定义应用程序的行为。控制器可以将数据从模型中提取出来，并将它们绑定到视图中。下面是一个简单的例子：
---- -------------- ----------------------- ------------ ----------- -------------------- ---------------------- ------ -------- --- --- - ----------------------- ---- ------------------------ ---------------- - ----------- - ------------ --------------- - ----- ------------ --- ---------
这个例子中，ng-controller 指令表示这个应用程序的控制器是 myCtrl，myCtrl 控制器定义了一个名为 greeting 的变量，并将它绑定到视图中。当应用程序加载时，greeting 变量的值将被设置为“欢迎学习 AngularJS!”。
依赖注入
依赖注入是 AngularJS 中的另一个重要特性。它允许开发者将依赖关系声明为控制器的参数，从而使得这些依赖关系可以被自动注入到控制器中。下面是一个例子：
---- -------------- -----------------------
------------ ----------- --------------------
------------------------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- ------ -
----------- - ------------
--------------- - ---------- -
------ ----- - - -----------------------------------------------------------
--
---
---------这个例子中，$http 是 AngularJS 内置的服务，用于进行 HTTP 请求。当 myCtrl 控制器被创建时，$http 服务会自动被注入到控制器中。greeting 函数将使用 $http 服务从远程服务器获取数据，并将获取的数据显示在视图中。
指令
指令是 AngularJS 中的一个强大功能，它允许开发者创建自定义 HTML 元素和属性，并将它们绑定到 JavaScript 函数中。下面是一个例子：
---- -------------- -----------------------
-----------------------------
------
--------
--- --- - ----------------------- ----
---------------------------- ---------- -
------ -
-------- - ---------- ------------
--
---
---------这个例子中，my-directive 是一个自定义指令，它的定义包括一个 template 属性，用于指定指令的 HTML 内容。当 my-directive 元素被创建时，它的内容将被替换为“Hello World!”。
总结
本文介绍了 AngularJS 的基础知识，包括数据绑定、控制器、依赖注入和指令。通过这些知识，开发者可以更加轻松地创建复杂的 Web 应用程序。希望本文对初学者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/655743c1d2f5e1655d1b22c8