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