Angular 是目前前端领域最流行的 Web 应用程序框架之一。Angular 2.0 相比于 1.x 版本，在许多方面都进行了重大的更新和升级。Angular 2.0 具有更加模块化的架构、更高效的性能、更加高级的依赖注入等等。本文将详细介绍如何学习 Angular 2.0，并通过开发一个简单的单页面应用程序（SPA）来演示这些新特性。
Angular 2.0 的基础知识
在开始 Angular 2.0 的学习之前，我们应该了解一些基本的概念和术语。Angular 2.0 中的一些最基本的概念如下：
组件（Component）
组件是 Angular 2.0 应用程序中最基本的单元。每个组件都有自己的特定功能，在应用程序中负责处理相应的任务。组件可以包含其他组件，并可以与它们交互。
模板（Template）
模板是一个组件的 HTML 片段。它用于定义组件的外观和 UI。每个组件都有自己的模板。
指令（Directive）
指令是一个用于扩展 HTML 标记的 Angular 2.0 概念。指令可以包含组件、属性和 UI 相关的逻辑。
服务（Service）
服务是一个 Angular 2.0 应用程序中的共享功能。服务可以被其他组件注入，以便提供相应的功能。
依赖注入（Dependency Injection）
依赖注入是 Angular 2.0 的另一个基本概念，它允许我们将一个组件所需的服务注入到其构造函数中。这样，我们就可以完全避免对其他模块的强耦合。
这些概念是 Angular 2.0 学习过程中最重要的概念之一。熟练掌握它们可以让你更好地理解 Angular 2.0 中的代码，并更加高效地使用该框架。
开发一个基于 Angular 2.0 的单页面应用程序
在本文的剩余部分中，我们将基于上面介绍的基础概念来开发一个简单的单页面应用程序。该应用程序将显示一个待办事项列表，用户可以添加、编辑和删除这些项。
步骤 1：安装必需的工具和库
在开始开发之前，我们需要安装一些必需的工具和库。首先，我们需要安装 Node.js 和 npm。这些工具是 Angular CLI 和 Angular 应用程序所必需的。
然后，我们需要通过以下命令安装 Angular CLI：
npm install -g @angular/cli
最后，我们需要安装一些 Angular 应用程序所必需的库。使用下面的命令来完成：
ng new todo --style=scss --routing
这个命令将创建一个名为 "todo" 的新应用程序，并选择 SASS 作为默认的样式语言。它还会打开路由支持。
步骤 2：创建一个待办事项服务
接下来，我们需要创建一个待办事项服务来存储应用程序的数据。在 Angular 中，服务通常用于数据存储和处理，以及后端接口的调用。
使用以下命令创建一个服务：
ng generate service todo
这个命令将在 app 目录中创建一个名为 todo.service.ts 的文件。打开该文件并将其更改为以下内容：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- - ---- --------------
-------------
----------- ------
--
------ ----- ----------- -
------- ------ ---------- - -
- --- -- ----- ---- ---------- --
- --- -- ----- ------- -------- --
- --- -- ----- ------ ------ --
--
----------- ---------- -
------ -----------
-
---------------- --------- -
----------------------
-
---------------- --------- -
----- - - -------------------------- -- -------- --- ---------
-- -- - --- -
------------- - -----
-
-
---------------- --------- -
----- - - -------------------------- -- -------- --- ---------
-- -- - --- -
-------------------- ---
-
-
-这个服务定义了一个名为 "items" 的私有数组，并提供了一个 API 以便获取、创建、更新和删除该数组中的模型数据。
步骤 3：创建一个待办事项组件及其模板
现在，我们需要创建一个待办事项组件来显示我们的数据。使用以下命令创建一个组件：
ng generate component todo-list
这个命令将在 app 目录中创建一个名为 todo-list 的组件。打开该组件并在其中添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- - ---- ---------------
------ - ----------- - ---- ------------------
------------
--------- ----------------
------------ -----------------------------
---------- ------------------------------
--
------ ----- ----------------- ---------- ------ -
------ -----------
------------------- ------------ ------------ --
---------- -
---------- - ----------------------------
-
-在这里，我们定义了一个 "items" 属性，它将用于保存待办事项数据。我们还将 "TodoService" 注入到组件的构造函数中以便获取待办事项的数据。
接下来，我们需要在项目目录下的 "src/app/todo-list" 文件夹中创建一个名为 "todo-list.component.html" 的新文件，用于定义待办事项组件的模板：
-- -------------------- ---- -------
--------- ---------
---- -------------
---- ------------ ----------- ---- -- -------
---- --------------- --------- --------
---- ----------------
------- ---------------------------------------------
------
------
------这个模板将定义待办事项组件的外观。它包含一个 h2 元素、一个 "list" CSS 类名称的 div 元素以及一个 "item" CSS 类名称的 div 元素。我们还为每个待办事项定义了一个 "name" 和 "actions" 元素。
我们使用 Angular 2.0 的 ngFor 指令对待办事项数组进行了循环迭代，并使用组件中定义的属性绑定将待办事项的名称显示在列表中。点击 "Delete" 按钮将会调用组件内的 onDeleteClick 方法。
步骤 4：创建添加待办事项表单
现在，我们将添加一个表单在待办事项列表中添加新事项。使用以下命令创建一个新组件：
ng generate component add-todo
这个命令将在 app 目录中创建一个名为 add-todo 的新组件。打开该组件并将其更改为以下内容：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- - ---- ---------------
------ - ----------- - ---- ------------------
------------
--------- ---------------
------------ ----------------------------
---------- -----------------------------
--
------ ----- ---------------- -
----- -------- - -
--- -----
----- --
--
------------------- ------------ ------------ --
---------- -
---------------------------------------
--------- - -
--- -----
----- --
--
-
-这个组件定义了一个名为 "item" 的属性，该属性包含待添加事项的名称和 ID。它还通过 "TodoService" 注入来创建新的待办事项。在组件模板定义的表单提交时，我们将调用 "TodoService" 的 createItem 方法来在 "items" 数组中添加新的待办事项。最后，我们将 "item" 重置为一个新对象。
接下来，我们需要在项目目录下的 "src/app/add-todo" 文件夹中创建一个名为 "add-todo.component.html" 的新文件，用于定义添加待办事项表单的模板：
-- -------------------- ---- -------
------- ----- ---------
----- ----------------------
---- -------------------
------ -----------------------
------ ----------- ----------- --------- ------------------------
------
------- ----------------- -------------
-------在这个模板中，我们创建了一个名为 "name" 的文本框，以便用户输入所需的待办事项的名称。
步骤 5：创建编辑待办事项表单
最后，我们将添加一个功能，以便编辑待办事项。使用以下命令创建一个新组件：
ng generate component edit-todo
这个命令将在 app 目录中创建一个名为 edit-todo 的新组件。打开该组件并将其更改为以下内容：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------ - -------- - ---- ---------------
------ - ----------- - ---- ------------------
------------
--------- ----------------
------------ -----------------------------
---------- ------------------------------
--
------ ----- ----------------- -
-------- ----- ---------
------------------- ------------ ------------ --
---------- -
---------------------------------------
-
---------- -
---------------------------------------
-
-这个组件定义了一个名为 "item" 的输入属性，该属性包含当前待办事项的数据。它还添加了两个方法：一个用于表单提交以更新待办事项，另一个用于删除待办事项。
接下来，我们需要在项目目录下的 "src/app/edit-todo" 文件夹中创建一个名为 "edit-todo.component.html" 的新文件，用于定义编辑待办事项表单的模板：
-- -------------------- ---- -------
-------- ----- ---------
----- ----------------------
---- -------------------
------ -----------------------
------ ----------- ----------- --------- ------------------------
------
------- ------------------ ----------------
-------
------- --------------------------- -------------这个模板在编辑待办事项时显示。与添加待办事项表单模板类似，它也包含一个名为 "name" 的文本框，以便用户编辑待办事项的名称。此外，我们添加了一个 "Save Changes" 按钮以保存修改，还添加了一个 "Delete Item" 按钮以删除待办事项。
步骤 6：完成主应用程序模板
最后，我们需要定义一个主模板来组合我们的三个组件。在项目目录下的 "src/app" 文件夹中打开 "app.component.html" 文件，并将其更改为以下内容：
<div class="container"> <router-outlet></router-outlet> </div>
在这个模板中，我们使用 Angular 2.0 的路由插座定义一个名为 "container" 的 div 元素，并通过该插座使用 router-outlet 元素，以便 Angular 2.0 显示当前活动组件的内容。
步骤 7：在主应用程序模块中添加路由
在 app 目录中打开 app.module.ts 文件，并将其更改为以下内容：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ----------------- - ---- ----------------------------------
------ - ---------------- - ---- --------------------------------
------ - ----------------- - ---- ----------------------------------
----- ------- ------ - -
- ----- --- ----------- --------- ---------- ------ --
- ----- -------- ---------- ----------------- --
- ----- ------ ---------- ---------------- --
- ----- ----------- ---------- ----------------- --
--
-----------
------------- -
-------------
------------------
-----------------
-----------------
--
-------- -
--------------
------------
----------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在这里，我们定义了一个 "routes" 常量，该常量表示当前应用程序中所有可能的路由。然后，我们将这些路由添加到路由模块中，并把路由模块添加到主应用程序模块中。在其中，我们也包含了之前定义的所有组件。
步骤 8：运行应用程序
现在，我们准备好运行我们的应用程序了。在命令行中运行以下命令：
ng serve --open
这个命令将启动 Angular 2.0 应用程序，并在默认浏览器中打开它。现在，您可以使用我们创建的添加、编辑和删除功能来操作待办事项的列表。
结论
本文介绍了如何使用 Angular 2.0 框架构建一个单页面应用程序。我们涵盖了 Angular 2.0 中的一些重要概念和概述，包括组件、模板、指令、服务和依赖注入等。我们还演示了如何使用这些概念来开发一个简单的 to-do 应用程序，并演示了如何使用 Angular 2.0 的路由插座和路由模块进行路由。
虽然这只是一个简单的例子，但它包含了许多在实际项目中广泛使用的 Angular 2.0 概念和实践。我们希望本文能够帮助你更好地了解 Angular 2.0，并为你在你的下一个项目中使用该框架提供指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f10ab36fbf96019735e0af