AngularJS 是一个流行的前端框架，具有强大的功能和灵活性。对于初学者来说，掌握 AngularJS 不仅可以提高工作效率，还能让你更好地理解前端开发的整个流程。在这篇文章中，我们将介绍初学 AngularJS 应该注意的 10 个要点。
1. 安装 AngularJS
要使用 AngularJS，你需要安装它。有两种方式可以安装 AngularJS：使用 CDNs（Content Delivery Networks） 或下载 AngularJS 文件并将其添加到你的本地项目中。
1.1 使用 CDNs
如果你想使用 AngularJS，最快捷的方式就是从一个 CDN 上获取文件。CDN 是用于提供静态文件的全球性网络。以下是使用外部 AngularJS 资源的示例：
-- -------------------- ---- -------
--------- -----
------
------
------- ------------------------------------------------------------------------------------
-------
------
---- ----------
-------- --------- -------
------
-------
-------最重要的代码是引用的 JavaScript 文件。这个文件来自一个公共 AngularJS 资源网站。
1.2 从本地文件引用 AngularJS
另一种获取 AngularJS 框架并将其包含在项目中的方式是从官方网站下载 AngularJS 文件并添加到代码库中：
-- -------------------- ---- -------
--------- -----
------
------
------- --------------------------------------
-------
------
---- ----------
-------- --------- -------
------
-------
-------2. 学习 AngularJS 的基础知识
学习 AngularJS 需要掌握许多基本概念。以下是一些重要的基础知识：
2.1 模块
AngularJS 应用程序是由多个模块组成的。每个模块都有自己的功能和应用程序的特定角色。你可以使用 ngApp 指令将模块添加到 HTML 根元素中。
-- -------------------- ---- ------- --------- ----- ------ ------ ------- -------------------------------------- ------- ----- --------------- --------- --------- ------- ------- -------
在上面的代码中，我们将 ng-app 属性设置为“myApp”。这意味着该应用程序使用一个名为“myApp”的 AngularJS 模块。
2.2 控制器
控制器是 AngularJS 应用程序的一部分，用于控制视图与数据的交互。你可以使用 ngController 指令将控制器添加到应用程序中。
-- -------------------- ---- -------
--------- -----
------
------
------- --------------------------------------
-------
----- -------------- -----------------------
--------------------
------- ----------------------------------------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
-------------- - ------------
-------------------- - ---------- -
-------------- - ------------
--
---
---------
-------
-------上面的代码中，我们将 ng-controller 属性设置为“myCtrl”。这表示该控制器用于 HTML 元素的“myCtrl”部分。
2.3 指令
指令是用于扩展 HTML 元素的 AngularJS 属性。指令包括属性、元素、CSS 类等，并用于更改元素的行为或外观。
-- -------------------- ---- -------
--------- -----
------
------
------- --------------------------------------
-------
----- ---------------
--------- --------- -------
-- ------------ ---- ---------
-- ------------------- --------- -- -----------
------- --------------- - ----- - -- ------------------
----- ---
---------
--------- -- ----- -- ------
-------
-------在上面的代码中，我们定义了三个指令：
- ng-bold：使 HTML 元素以粗体形式呈现。
- ng-hide：隐藏 HTML 元素。
- ng-click 和 ng-init：控制 HTML 元素的行为。
3. 了解依赖注入
依赖注入是 AngularJS 框架的一个重要功能。它使开发人员不需要手动管理对象之间的依赖性，从而增加了代码的可读性和可维护性。依赖注入也有助于测试你的代码，因为你可以单独测试每个组件。
-- -------------------- ---- -------
--------- -----
------
------
------- --------------------------------------
-------
----- ---------------
--------- --------- -------
---- -----------------------
--------------------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- ------ -
------------------------------------------------ -
-------------- - --------------
---
---
---------
-------
-------在上述代码中，$http 服务可以通过注入来使用；这意味着你无需手动管理应用程序中的任何对象之间的依赖性。例如，如果我们想使用 ngAnimate 库中的动画，在我们的应用程序中使用它只需要添加它到我们的 AngularJS 模块中即可：
var app = angular.module('myApp', ['ngAnimate']);4. 使用表单
表单是一个重要的 AngularJS 元素。你可以使用 AngularJS 表单来创建用户界面和收集数据。
-- -------------------- ---- -------
--------- -----
------
------
------- --------------------------------------
-------
----- ---------------
------ --------- -------
----- -------------------------
------ ---------------------------
------ ----------- -------------- -------------------- ---------
------ --------------------------
------ ----------- ------------- ------------------- ---------
------ ---------------------------
------ ------------ ---------- ---------------- ---------
------- -------------------------
-------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
----------------- - ---------- -
----------------
--
---
---------
-------
-------在上述代码中，我们创建了一个简单的 AngularJS 表单。它包括三个输入框和一个提交按钮。我们还添加了一些指令来控制表单的行为和外观。
5. 学习 AngularJS 中的路由
路由是将用户从一个视图导向到另一个视图的一种机制。在 AngularJS 中，你可以使用 ngRoute 模块来实现路由。
-- -------------------- ---- -------
--------- -----
------
------
------- --------------------------------------
------- --------------------------------------------
-------
----- ---------------
--------- --------- ---------
-------------------
--------
--- --- - ----------------------- -------------
----------------------------------- -
--------------
---------- -
----------- - -----------
--
------------- -
----------- - ----------
--
--------------- -
----------- - ------------
---
---
---------
-------
-------在上述代码中，我们使用 ngRoute 模块为我们的应用程序添加了路由支持。我们定义了三个视图：主页、红色页和绿色页。
6. 了解双向数据绑定
双向数据绑定是 AngularJS 的一个重要特性，它允许视图和模型之间的同步。 当视图中的数据发生更改时，模型中的数据也会相应地更改。反之亦然。
-- -------------------- ---- -------
--------- -----
------
------
------- --------------------------------------
-------
----- ---------------
------ --------- -------
-------
----
---------- ----------- --------------------------
---------- ----------- -------------------------
-----
----
----------------------
---------------------
-----
--------
--------
--- --- - ----------------------- ----
---------
-------
-------在上述代码中，我们创建了一个带有两个 input 元素的表格。这些 input 元素与 AngularJS 模型中的 firstName 和 lastName 属性进行了双向绑定。 这意味着当你在 input 元素中输入任何文本时，该文本将同步到表格中相应的行中。
7. 学习 AngularJS 中的服务与工厂
服务是 AngularJS 用于访问服务器并获取数据的一种方法。工厂则是服务的一种实现方式，用于生成数字、字符串和布尔值等数据。
-- -------------------- ---- -------
--------- -----
------
------
------- --------------------------------------
-------
----- ---------------
------ --------- -------
---- -----------------------
----
--- ------------------- -- -----------
---------------------------
-------------------------------
-----
-----
------
--------
--- --- - ----------------------- ----
------------------------------ ---------- -
--- --------- - -
- ----- ----- ----- --------- --------- --
- ----- ----- ----- --------- ----------- --
- ----- ---- ----- --------- ---------- -
--
------ ----------
---
------------------------ ---------------- ---------------- -
---------------- - ----------------
---
---------
-------
-------在上述代码中，我们定义了一个 employeeService 工厂，该工厂返回一个数据数组。我们还定义了一个控制器，该控制器使用此工厂向视图中的所有雇员展示数据。
8. 熟悉 AngularJS 中的过滤器
过滤器是 AngularJS 中一种极其有用的功能，可以帮助你轻松地修改视图数据。常用的 AngularJS 过滤器包括 uppercase、lowercase、limitTo 和 orderby。
-- -------------------- ---- -------
--------- -----
------
------
------- --------------------------------------
-------
----- ---------------
------ --------- --------
---- -----------------------
------------
----
--- ----------------- -- ------ - ------------------ ----------- -------
-----
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------- - -
--------------
-----------------
-------------
--------------
--
---
---------
-------
-------在此示例中，我们使用 orderBy 过滤器按字母顺序对我们的人物列表进行排序。
9. 学习指令和链接函数
AngularJS 框架还集成了一种名为指令的强大功能，它使你可以创建自定义 HTML 元素和属性。 指令由两个组成部分：指令自身的定义和链接功能。
-- -------------------- ---- -------
--------- -----
------
------
------- --------------------------------------
-------
----- ---------------
------ --------- -------
-------------------------------------
--------
--- --- - ----------------------- ----
-------------------------------- ---------- -
------ -
--------- ----
--------- ---------------------
--
---
---------
-------
-------在此示例中，我们创建了一个自定义指令，名为 customDirective，它在页面上创建了一个段落（HTML 的 p 元素）。
10. 使用 AngularJS 中的模板
模板是用于创建视图的 HTML 代码的另一种方式。在 AngularJS 中，你可以使用模板创建自定义视图和指令，这样你就可以将 HTML 代码和 JavaScript 代码分开编写。
-- -------------------- ---- -------
--------- -----
------
------
------- --------------------------------------
-------
----- ---------------
------ --------- -------
---- -----------------------
----
--- ----------------- -- ---------- ----------- -------
-----
------
------- ----------------------- ---------------------
--------------
---------
--------
--- --- - ----------------------- ----
------------------------ ---------------- --------------- -
------------- - -
--------------
-----------------
-------------
--------------
--
------------------------------------- --------------------
---
---------
-------
-------在此示例中，我们创建了一个 myTemplate.html 文件，该文件包含一个简单的段落元素。在控制器中，我们使用 $templateCache 服务将修改过的版本的模板添加到页面中。
总结
AngularJS 是一种功能强大的前端框架。初学者应该注意以上 10 个要点，它们包括安装 AngularJS、学习基础知识、依赖注入、表单、路由、双向数据绑定、服务和工厂、过滤器、指令与链接函数以及模板。掌握这些概念有助于你更好地理解 AngularJS 框架并编写更高效的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0c4fa48841e9894ce0168