概述
Angular 是一套用于构建 Web 应用的开源框架，由 Google 维护并发展。从 AngularJS 的成功中学到的经验以及在后来的 Web 平台上学到的更多知识，使得 Angular 在各种场景中得到了广泛应用。本文将系统地介绍如何使用 Angular 8 构建一个企业级的单页应用（Single Page Application，SPA）。
环境搭建
在开始应用程序的开发之前，我们需要按照以下步骤搭建 Angular 的开发环境：
安装 Node.js，并使用 npm 安装 Angular CLI（命令行界面）。CLI 是一个提供了很多工具命令的命令行界面，用于帮助快速生成代码和构建应用。命令行如下：
--- ------- -- ------------
使用 CLI 初始化 Angular 应用。命令行如下：
-- --- ------
这里的“my-app”是你的应用名称。这个命令将会为你自动生成所有必要的文件和目录。你将会得到一个 Angular 应用程序的基础框架。
构建一个 SPA 应用程序
我们将构建一个很简单的 SPA 应用程序，它包括一个名为“home”的页面和一个名为“about”的页面。
路由配置
首先，我们将配置应用程序的路由。路由是一种机制，用于确定在哪里以及如何显示给定 URL 的组件。
使用 CLI 生成一个名为 “routing” 的模块。命令行如下：
-- -------- ------ -------
使用 CLI 生成一个名为 “app-routing.module.ts” 的路由模块。命令行如下：
-- -------- ------ ----------- ------ ------------
这会创建一个带有路由器配置的 Angular 模块，并且这个模块会被导入到主应用程序模块中。
------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
上面的代码中定义了两个路由：主页和页面。
在应用程序的主模块中导入刚刚生成的路由模块。
------ - ---------------- - ---- ----------------------- ----------- -------- - -------------- ---------------- -- ------------- - ------------- -------------- -------------- -- ---------- -------------- -- ------ ----- --------- - -
创建组件
现在，我们将创建两个 Angular 组件：HomeComponent 和 AboutComponent。
使用 CLI 命令生成：
-- -------- --------- ---- -- -------- --------- -----
编写组件代码，在组件 HTML 文件中编写每个组件的内容。
---- ------------------ ------------ ------ ---- ------------ ---- ------------------ --------------- ------- -------- --- --------- ------ ---------- ------------------ ------------- ------ ---- ------------ ---- ------------------ ---------------- --- ------------ ------ ------
在应用程序中使用组件
最后一步是在应用程序中使用这两个组件。
在模板文件中使用路由指令定义路由链接。应放在导航/侧边栏之类的地方。
--- ---------- ----------- --- ----------------- -- ---------------- ----------------------- ----- --- ----------------- -- ---------------- ----------------------------- ----- -----在主路由模块中定义主页和页面路由的组件。
----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- --
在您要使用它们的地方添加组件，可以是主组件或其他嵌套在其中的组件。
-------------------------------
总结
Angular 8 是一个强大的填充了许多高级功能的框架，使得创建应用程序变得容易又简单。这里我们介绍了如何使用 Angular CLI 和路由功能创建一个简单的 SPA 应用程序，我们希望这个例子对你有所帮助。你可以参考这个例子来构建自己的企业级应用程序。完整的源代码可以在 https://github.com/username/my-app 找到。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654d7b0d7d4982a6eb6dac2b