单页应用（Single Page Application, SPA） 是一种非常受欢迎的 Web 应用模式。它的基本思想是，将整个应用程序作为单个 HTML 页面，根据用户的操作动态地更新相应的分区，将用户体验提升到一个新水平。如何开发一个优秀的 SPA 呢？本文将以 Angular 为基础，详细介绍开发 SPA 的完整指南。
准备工作
前置知识
- HTML / CSS / JavaScript 的基础知识
- TypeScript / ES6 的基础知识
- Angular 框架的基本使用
- Angular CLI 工具的基本使用
如果您熟悉这些前置知识，那么就可以进入下一步：准备工具及环境。
工具及环境
- Node.js：用于运行 Angular CLI
- Angular CLI：用于快速创建 Angular 项目
- Visual Studio Code：用于编辑 TypeScript / HTML / CSS 代码
建议您安装最新版本的 Node.js 和 Angular CLI。
SPA 设计
1. SPA 架构
SPA 的架构通常基于组件（Component）的概念构建。一个组件代表一个独立的、可重用的视图控件，具有独立的数据、逻辑和样式。整个应用程序是由多个组件组成的，组件之间通过输入和输出进行交互。如下图所示：
- 路由器（Router）负责管理 URL 和其指定的组件之间的映射关系。
- 组件之间通过依赖注入（Dependency Injection）机制实现服务（Service）之间的通信，共享数据。
- 组件之间通过输入（Input）和输出（Output）共享数据，并且事件驱动。
2. SPA 设计原则
编写高质量的 SPA 应该遵循以下原则：
- 遵循单一职责原则（SRP）：每个组件应该只负责一个特定的、独立的任务。
- 避免过度设计：不要过度设计你的组件，只要你需要的功能就好。
- 使用组件样式：尽量少使用全局样式和样式层叠，组件样式应该只对该组件有效。
- 重用组件：利用组件的可重用性，避免重复编写和维护代码。
SPA 开发
1. 创建 Angular 项目
使用 Angular CLI 快速创建项目：
ng new my-project cd my-project ng serve --open
--open 参数会在浏览器中打开项目的默认页面。
2. 创建组件
在 src/app 目录下创建一个新的组件：
ng generate component my-component
这将创建一个新的 my-component 组件，包含所有必要的 TypeScript、HTML 和 CSS 文件。
3. 路由
在 app.module.ts 文件中，导入路由模块 RouterModule，并在 imports 数组中添加：
-- -------------------- ---- ------- ------ - ------------- ------ - ---- ------------------ ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
这将配置两个路由：
- 根路由
/，映射到HomeComponent组件 /about路由，映射到AboutComponent组件
在 app.component.html 中添加路由链接：
<nav> <a routerLink="/">Home</a> <a routerLink="/about">About</a> </nav> <router-outlet></router-outlet>
这将在页面的顶部添加导航链接，并将路由连接到 router-outlet 组件中。当用户单击链接时，Angular 会自动更新路由以显示相应的组件。
4. 服务
创建一个服务可以帮助组件之间共享数据和逻辑。创建一个新的服务：
ng generate service my-service
这将创建一个新的 my-service 服务，并将其添加到 app.module.ts 中的 providers 数组中。
在组件中导入该服务，并将其注入组件的构造函数：
import { MyService } from './my-service.service';
export class SomeComponent {
constructor(private myService: MyService) { }
}现在你就可以在组件中使用该服务了。
5. 表单
使用 Angular 表单可以轻松地处理表单功能。将表单模块导入到 app.module.ts 文件中：
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule],
...
})在模板 HTML 文件中，使用 Angular 的表单指令:
<form> <input type="text" name="name" [(ngModel)]="username"> <button type="submit">Go</button> </form>
上面的例子创建了一个包含一个文本域和一个提交按钮的表单。当用户在文本域中输入文本时，该值将与组件中的 username 属性双向绑定。
6. 拦截器和守卫
拦截器（Interceptors）和守卫（Guards）是用于控制和管理 HTTP 请求和响应的重要工具。
为了使用它们，需要导入 HttpInterceptor 和 CanActivate 类。然后创建一个拦截器类并实现 HttpInterceptor 接口：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
-------------
------ ----- ------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
-- -- --------- ----
------ -----------------
-
-以及一个路由守卫类并实现 CanActivate 接口：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- ------------------- - ---- ------------------
-------------
------ ----- ------- ---------- ----------- -
------------------ ----------------------- ------ -------------------- -
-- -- --------- ----
------ -----
-
-最后，在 app.module.ts 文件中注册拦截器和守卫：
-- -------------------- ---- -------
------ - ----------------- - ---- -----------------------
------ - ------------- - ---- -------------------
------ - ------- - ---- -------------
-----------
---
---------- -
- -------- ------------------ --------- -------------- ------ ---- --
-------
--
---
--
------ ----- --------- - -现在，MyInterceptor 拦截器和 MyGuard 守卫就可以在项目中使用了。
总结
本文详细介绍了开发 SPA 的完整指南，重点介绍了 SPA 的架构和设计原则，并针对 Angular 框架进行了实践。希望本指南对您开发 SPA 应用有所帮助。
全文示例代码请查看 GitHub。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483ee8248841e98943248a6