【问题标题】:How do I implement HTML+CSS Templates into my angular project?如何在我的 Angular 项目中实现 HTML+CSS 模板?
【发布时间】:2023-03-15 16:34:01
【问题描述】:

我正在尝试将此网站 https://colorlib.com/wp/css3-table-templates/ 中的表格模板添加到我的 Angular 应用程序中,但无法确定我需要将文件存储在哪里才能从我的 Angular 应用程序中访问它们。

首先,如果我的问题似乎相当基本,我想提前道歉。这是我第一次编写任何与 Web 相关的代码,也是我第一次使用 Angular。

在我的项目中,我使用 asp.net 设置了一个 Web API 来处理数据库访问。您可以发送获取请求,服务器将根据您的请求回复一堆员工数据。这工作得很好。

为了显示数据,我决定编写一个 Angular 应用程序。从服务器获取数据不是问题。由于我以前从未使用过 html 或 css,因此以一种看起来不错的方式显示数据被证明是相当困难的。我写的表格看起来很伤心(我知道有角度的材料,也在使用它,只是不想要他们的表格)。

这是我决定将其他人的表格添加到我的应用程序的时候。这个自定义表显然有一堆文件夹,它在 html 文件中引用。当应用程序运行时,它会在 localhost:4200/filepath 中查找那些文件,其中文件路径引用 css 文件、脚本或 html 文件。现在它正在抛出一个

404 未找到异常

因为我不知道将我的文件放在哪里才能使它们在这个 localhost 文件夹中可见。首先,我尝试通过检查浏览器中显示的脚本以及它们的存储位置来跟踪 localhost 文件夹。不幸的是,这些脚本存储在几个不同的文件夹中,很明显,我对这个单个 localhost 文件夹的想法太天真了?接下来,我尝试将模板数据放入我的应用程序的 src/assets 中,因为我读到这样它们将可以公开访问。

当我在localhost:4200 访问我的应用程序并检查源时,我希望这些文件会显示出来。什么都没有显示,这就是 404 错误有意义的原因,它根本找不到文件。

我不知道此信息是否相关,但我通过在 Visual Studio 2017 中创建 Web API 来设置我的 Angular 项目,然后使用命令行转到该项目的位置并生成 Angular 项目(与web API 项目)与 Angular CLI。

如果有人能帮助我并告诉我如何将这些文件从模板中获取到我的应用程序的源代码中,以便我的 HTML 表格模板可以访问必要的文件并显示出来,我将不胜感激。

感谢您的宝贵时间

编辑: 我的资产文件夹如下所示

+-- assets
|   +-- table
|   |   +--css
|   |   +--fonts
|   |   +--images
|   |   +--js
|   |   +--vendor

在我的 angular.json 文件中,资产数组看起来像这样

"assets": [
          "src/favicon.ico",
          "src/assets"
        ]

阅读有关资产的角度文档后,我希望能够构建项目并在我的 outputPath 文件夹 dist 下查看复制的文件。但是,我仍然无法生成这些文件。

【问题讨论】:

    标签: angular asp.net-web-api angular7


    【解决方案1】:

    将文件放入 assets 文件夹并在 angular.json 文件中提及该文件夹,例如:

    "assets": [
                  "src/favicon.ico",
                  "src/assets",
                  "src/manifest.json"
                ]
    

    【讨论】:

    • 我在尝试解决我的问题时仍然遇到问题。我编辑了我的问题以提供一些额外的信息。我希望你能帮助我,也许这是我的一个概念错误?
    • 你是如何在 index.html 文件中调用的?
    • 我将 index.html 文件放入一个名为 table.component.html 的组件的 html 文件中,以便将表格呈现为组件,然后将 dist/projectname/assets/table 放在 src 前面- 和 href 属性。举个例子:我把href="images/icons/favicon.io"改成href="dist/projectname/assets/table/images/icons/favicon.io"
    • 在执行 ng build 时尝试添加 base href
    猜你喜欢
    • 2023-04-06
    • 2019-09-13
    • 1970-01-01
    • 1970-01-01
    • 2018-10-12
    • 1970-01-01
    • 2017-01-29
    • 1970-01-01
    • 2019-04-15
    相关资源
    最近更新 更多