概述
Angular 是一套用于构建 Web 应用的开源框架，由 Google 维护并发展。从 AngularJS 的成功中学到的经验以及在后来的 Web 平台上学到的更多知识，使得 Angular 在各种场景中得到了广泛应用。本文将系统地介绍如何使用 Angular 8 构建一个企业级的单页应用（Single Page Application，SPA）。
环境搭建
在开始应用程序的开发之前，我们需要按照以下步骤搭建 Angular 的开发环境：
安装 Node.js，并使用 npm 安装 Angular CLI（命令行界面）。CLI 是一个提供了很多工具命令的命令行界面，用于帮助快速生成代码和构建应用。命令行如下：
npm install -g @angular/cli
使用 CLI 初始化 Angular 应用。命令行如下：
ng new my-app
这里的“my-app”是你的应用名称。这个命令将会为你自动生成所有必要的文件和目录。你将会得到一个 Angular 应用程序的基础框架。
构建一个 SPA 应用程序
我们将构建一个很简单的 SPA 应用程序，它包括一个名为“home”的页面和一个名为“about”的页面。
路由配置
首先，我们将配置应用程序的路由。路由是一种机制，用于确定在哪里以及如何显示给定 URL 的组件。
使用 CLI 生成一个名为 “routing” 的模块。命令行如下：
ng generate module routing
使用 CLI 生成一个名为 “app-routing.module.ts” 的路由模块。命令行如下：
ng generate module app-routing --flat --module=app
这会创建一个带有路由器配置的 Angular 模块，并且这个模块会被导入到主应用程序模块中。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
上面的代码中定义了两个路由：主页和页面。
在应用程序的主模块中导入刚刚生成的路由模块。
-- -------------------- ---- ------- ------ - ---------------- - ---- ----------------------- ----------- -------- - -------------- ---------------- -- ------------- - ------------- -------------- -------------- -- ---------- -------------- -- ------ ----- --------- - -
创建组件
现在，我们将创建两个 Angular 组件：HomeComponent 和 AboutComponent。
使用 CLI 命令生成：
ng generate component home ng generate component about
编写组件代码，在组件 HTML 文件中编写每个组件的内容。
<div class="jumbotron"> <h1>欢迎!</h1> </div> <div class="row"> <div class="col-md-12"> <p>在这里你将会学习如何使用 Angular 构建一个现代化的 Web 应用程序。</p> </div> </div><div class="jumbotron"> <h1>关于我们</h1> </div> <div class="row"> <div class="col-md-12"> <p>我们是一家致力于开发最好的 Web 应用程序的公司。</p> </div> </div>
在应用程序中使用组件
最后一步是在应用程序中使用这两个组件。
在模板文件中使用路由指令定义路由链接。应放在导航/侧边栏之类的地方。
<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" routerLink="/">Home</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/about">About</a> </li> </ul>在主路由模块中定义主页和页面路由的组件。
const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, ];在您要使用它们的地方添加组件，可以是主组件或其他嵌套在其中的组件。
<router-outlet></router-outlet>
总结
Angular 8 是一个强大的填充了许多高级功能的框架，使得创建应用程序变得容易又简单。这里我们介绍了如何使用 Angular CLI 和路由功能创建一个简单的 SPA 应用程序，我们希望这个例子对你有所帮助。你可以参考这个例子来构建自己的企业级应用程序。完整的源代码可以在 https://github.com/username/my-app 找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654d7b0d7d4982a6eb6dac2b