前言
Angular2 是一种流行的前端框架，它可以帮助开发者构建单页面应用程序（SPA）。本文将介绍如何使用 Angular2 构建一个简单的 SPA 应用程序，并提供一些深度和学习以及指导意义。
环境
在开始之前，您需要安装以下软件：
- Node.js
- npm
创建一个新项目
首先，我们需要创建一个新的 Angular2 项目。打开命令行，输入以下命令：
ng new my-app
这将创建一个新的 Angular2 项目，并安装所有必需的依赖项。一旦安装完成，进入项目文件夹：
cd my-app
添加一个组件
接下来，我们将添加一个组件。在 Angular2 中，组件是构建应用程序的基本单元。输入以下命令：
ng generate component my-component
这将创建一个名为 my-component 的新组件，并自动将其添加到应用程序中。
编辑组件
现在，让我们编辑 my-component 组件。打开 my-component.component.ts 文件，并将其内容替换为以下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------------------- ------------ -------------------------------- ---------- -------------------------------- -- ------ ----- -------------------- - ------------- - - -
这将创建一个新的组件，并将其命名为 MyComponentComponent。我们还需要在 my-component.component.html 文件中添加一些 HTML 代码：
<p> my-component works! </p>
添加路由
现在，我们需要添加一些路由，以便我们可以在应用程序中导航到不同的页面。打开 app.module.ts 文件，并将其内容替换为以下代码：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - -------------------- - ---- ----------------------------------------
----- ---------- ------ - -
- ----- --------------- ---------- -------------------- -
--
-----------
------------- -
-------------
--------------------
--
-------- -
--------------
-------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -这将添加一个名为 appRoutes 的新路由数组，并将其添加到应用程序中。我们还需要在 app.component.html 文件中添加一些导航链接：
<nav> <a routerLink="/my-component">My Component</a> </nav> <router-outlet></router-outlet>
这将添加一个名为 routerLink 的新指令，并将其用于导航链接。我们还需要添加一个名为 router-outlet 的新指令，以便 Angular2 能够正确地渲染组件。
运行应用程序
现在，我们已经完成了应用程序的构建。运行以下命令启动应用程序：
ng serve
打开浏览器并访问 http://localhost:4200，您应该会看到一个名为 My Component 的导航链接。单击该链接，应用程序将导航到 my-component 页面，并显示 my-component works!。
总结
Angular2 是一种流行的前端框架，它可以帮助开发者构建单页面应用程序（SPA）。本文介绍了如何使用 Angular2 构建一个简单的 SPA 应用程序，并提供了一些深度和学习以及指导意义。如果您想了解更多关于 Angular2 的知识，请查看官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66387c13d3423812e46862a9