Angular 是目前最流行的前端框架之一，支持构建大型、高度动态的 Web 应用程序。该框架采用 TypeScript 编写，提供了一种声明式的方式来构建复杂的 UI。在这篇文章中，我们将介绍 Angular 的基础知识并逐步深入了解，让您能够从入门到进阶，成为一名全面的 Angular 开发人员。
Angular 概述
Angular 是由 Google 负责维护的开源前端框架，最初是为 Web 2.0 应用程序而开发的。它是 Model-View-ViewModel（MVVM）设计模式的实现，并支持依赖注入、模块化、组件化和路由器等现代化开发方式。Angular 还提供了许多其他功能，例如表单、动画和服务端渲染。
准备工作
要开始学习 Angular，您需要了解一些基本知识，如 HTML、CSS 和 JavaScript。您还需要安装 Node.js 和 Angular CLI（命令行界面）。Angular CLI 是一个命令行工具，可帮助您创建、构建和测试 Angular 应用程序。
安装 Node.js：
在官方网站下载并安装 Node.js，可以从该网站中找到适合您的操作系统的版本：https://nodejs.org/en/download/
安装 Angular CLI：
打开命令行工具，执行以下命令：
npm install -g @angular/cli
创建一个新的 Angular 应用程序
使用 Angular CLI 可以快速创建一个新的 Angular 应用程序。打开终端并执行以下命令：
ng new my-app cd my-app ng serve
此命令将创建一个名为“my-app”的新项目，并在浏览器中打开主页。现在，您已经可以开始编写自己的 Angular 代码了。
Angular 组件和模板
在 Angular 中，组件和模板是应用程序的基本构建块。组件是一段使用 TypeScript 编写的代码，它定义了一个可重用的 UI 组件。模板则是一段 HTML 代码，与组件相结合，用于定义组件的外观和行为。
组件是通过装饰器来定义的，例如：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello World!</h1>`
})
export class AppComponent {}在此示例中，我们定义了一个名为 AppComponent 的组件，并指定其的选择器为“my-app”。组件的模板是指定在该装饰器中的，我们在此处简单地使用了一个 h1 标签作为示例。
组件输入和输出
在 Angular 中，组件还支持输入和输出。输入用于将数据从父级组件传递给子级组件，而输出则允许子级组件发出事件并将其传递回父级组件。
以下是一个使用输入和输出的示例组件：
-- -------------------- ---- -------
------ - ---------- ------ ------- ------------ - ---- ----------------
------------
--------- -----------
--------- -------- ------------------------- -------------
--
------ ----- -------------- -
-------- ----- -------
--------- ------- - --- -----------------------
--------- -
-----------------------------
-
-在此示例中，我们定义了一个名为 ChildComponent 的组件，并定义了一个 Input 属性 name，以及一个名为 clicked 的输出事件。当用户单击按钮时，我们触发 clicked 输出并将当前 name 属性值传递回父级组件。
组件生命周期钩子
在 Angular 中，组件还支持许多生命周期钩子，这些钩子用于在特定点执行一些操作。例如，ngOnInit 生命周期钩子在组件初始化时执行，ngOnDestroy 钩子在组件销毁时执行。
以下是一个使用生命周期钩子的示例组件：
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------------
--------- ---------------
--------- ------- ------- --------
--
------ ----- ----------- ---------- ------- --------- -
-------- -------
---------- -
------------ - ------ --------
-
------------- -
---------------------- -------------
-
-在此示例中，我们定义了一个名为 MyComponent 的组件，并实现了 OnInit 和 OnDestroy 生命周期钩子。我们在 ngOnInit 钩子中设置了 message 属性值，并在 ngOnDestroy 钩子中输出一条日志。
Angular 服务
在 Angular 中，服务用于封装应用程序中的业务逻辑，并使其可重复使用。服务可被各个组件共享，并利用 Angular 机制（如依赖注入）来实现多种方式的集成和扩展。
以下是一个使用服务的示例组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ---------------
------------
--------- ---------
--------- ------- ------- --------
--
------ ----- ------------ -
-------- -------
------------------- ---------- ---------- --
---------- -
------------ - ----------------------------
-
-在此示例中，我们定义了一个名为 AppComponent 的组件，并注入了一个名为 MyService 的服务。我们在 ngOnInit 钩子中调用了服务的 getMessage 方法，并将其结果赋值给 message 属性。
以下是一个简单的 MyService：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- -------
--
------ ----- --------- -
------------- ------ -
------ ------ --------
-
-在此示例中，我们定义了一个名为 MyService 的服务，并将其标记为可供整个应用程序使用。服务具有 getMessage 方法，并返回一个简单的消息。
Angular 路由器
在 Angular 中，路由器用于管理导航和视图。使用路由器，用户可以通过单击链接或浏览器的后退和前进按钮等方式在应用程序的不同视图之间进行导航。
以下是一个使用路由器的示例：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------- ------ - -------------- - ---- -------------------- ------ - ---------------- - ---- ---------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- - ----- ---------- ---------- ---------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- --
在此示例中，我们定义了一个名为 AppRoutingModule 的路由器模块，并设置了三个路由：首页、关于页面和联系页面。每个路由都使用了一个不同的组件，并设置了不同的 URL 路径。
要使用路由器，需要在应用程序中使用正确的 HTML 链接和 URL 路径：
<a routerLink="/">Home</a> <a routerLink="/about">About</a> <a routerLink="/contact">Contact</a>
在此示例中，我们定义了三个 HTML 锚点，每个锚点都使用了正确的路由器链接，以便将用户导航到适当的页面。
Angular HTTP
在 Angular 中，HTTP 模块用于处理带有远程服务器的网络请求。使用 HTTP 模块，您可以轻松实现从浏览器向服务器进行 GET、POST、PUT 和 DELETE 请求等常见操作。
以下是一个使用 HTTP 模块的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- ---------
--------- ------- ------- --------
--
------ ----- ------------ -
-------- -------
------------------- ----- ----------- --
---------- -
-------------------------------------------------------------
--------------------- ---- -- -
------------ - ---------------
---
-
-在此示例中，我们定义了一个名为 AppComponent 的组件，并注入了一个名为 HttpClient 的 HTTP 服务。在 ngOnInit 钩子中，我们使用该服务发出了一个 GET 请求，并将响应中的标题存储在 message 属性中。
Angular 进阶
通过本文，您已经了解了如何使用 Angular 创建基本的组件、服务、路由器和 HTTP 请求。但是，要成为一名真正的 Angular 开发人员，您还需要掌握更多深入的知识。
以下是一些推荐的进阶学习内容：
- Angular 模块
- Angular 表单
- Angular 动画
- Angular 状态管理
- Angular 测试
结论
在本文中，我们介绍了 Angular 的基础知识，并提供了一些示例代码和应用程序。我们希望这些知识能够帮助您走上 Angular 编程的道路，并成为一名成功的全栈开发人员。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6703c7afd91dce0dc84c99e5