1. 什么是 aurelia-skeleton-navigation
aurelia-skeleton-navigation 是 Aurelia 框架的一个官方 starter-kit，是一个使用 Aurelia 框架构建单页面应用程序（SPA）的最佳实践的脚手架。
该工具包括了一个简单的应用程序，包含了常见的导航、路由和页面结构。通过该包，您可以快速开始使用和学习 Aurelia 框架，构建自己的应用程序，特别适用于前端开发人员。
2. 如何安装 aurelia-skeleton-navigation
使用 npm 安装 aurelia-skeleton-navigation:
--- ------- ----------- -- -- --- ------ -- ------ -- --- -------
3. 如何使用 aurelia-skeleton-navigation
1. 添加路由和页面
要开始使用 aurelia-skeleton-navigation，首先需要添加新的页面。
为此，在 src/ 文件夹下创建一个新文件夹，命名为 pages/customer，并在该文件夹下创建 customer.html 和 customer.ts 两个文件:
---------- ----------------- ----------------- -----------
------ ----- -------- - ----- - --------- ------ ------- - ----- -- --- -------- ------ -
接下来，在 src/app.html 中添加一个导航链接和路由：
---------- -------- --------------------------- -------- ------------------------------- --------------------------- -----------
------ - ------- ------------------- - ---- -----------------
------ ----- --- -
------- -------
----------------------- -------------------- ------- ------- -
----------- - -------
------------ - ----------
------------
- ------ ------------ ----- ------- --------- ------- ---- ----- ------ ------ --
- ------ ----------- ----- ----------- --------- -------------------------- ---- ----- ------ ----------- -
---
-
-现在，我们就可以看到在应用程序上方添加了一个导航栏，并且在导航栏中，您可以看到一个 Customers 链接。当单击该链接时，将会打开 customer.html 页面。
2. 使用自定义元素和组件
aurelia-skeleton-navigation 支持自定义元素和组件，例如我们可以添加一些在所有页面上都可见的组件。
为此，可以在 src/ 文件夹下创建一个新的文件夹，命名为 components/navbar，并在该文件夹下创建 navbar.html 和 navbar.ts 两个文件。
----------
-----
-- -----------------
-- ------------------------------
------
----------------- ----- ------ - -
现在，在 src/app.html 中添加 <require from="./components/navbar/navbar"></require>，并将其添加到 <nav-bar> 标记中，如下所示：
----------
-------- ---------------------------
-------- --------------------------------------------
-------- ---------------------
-----------------
----------
---------------------------
-----------现在我们可以在页面上看到一个新的导航栏链接，其中包含所有 navbar.html 页面上的链接和 <nav-bar> 标记。
3. 添加 HTTP 服务
在应用程序中为了获取远程数据，需要使用 HTTP 服务。
在 src/ 目录下新建一个文件夹，命名为 services，其中创建一个名为 customer.service.ts 的 TypeScript 文件:
------ - ---------- - ---- ----------------------
------ - ---------- - ---- --------------------
-----------
------ ----- --------------- -
------------------- ----- ----------- - -
-------- -
------ ----------------------------
-
-添加 HTTP 服务后，我们将会使用 aurelia-fetch-client 或者 aurelia-http-client 这些插件进行服务的调用。例如，在您的 customer.html 文件中，可以这样使用：
------ - --------------- - ---- ----------------------------------
------ - ---------- - ---- --------------------
-----------
------ ----- -------- -
----- - --------- ------
---------- ------
------------------- ---------------- ---------------- - -
---------- -
------ ------------------------------------------- -- -
-------------- - -----------------
---
-
-4. 结论
aurelia-skeleton-navigation 是一个非常方便，易于使用的 starter-kit 和应用程序模板，它有助于加速您使用 Aurelia 框架构建 SPA 的过程，并帮助管理整个应用程序的页面布局、导航、路由和组件的模式。在学习 Aurelia 时，它还是一个非常好的参考示例，建议您尝试使用并将其用于您的实际项目中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055aac81e8991b448d83cc