【问题标题】:Understand the Angular way to import JS and CSS files了解 Angular 导入 JS 和 CSS 文件的方式
【发布时间】:2019-05-17 02:09:13
【问题描述】:

我刚开始使用 Angular,有些概念对我来说非常模糊:

  1. 如果我可以直接从https://jquery.com/ 下载jquery.js 并添加到assets 文件夹并在添加到@987654326 之后,为什么我需要安装jquery (npm install jquery) 并在angular.json 文件中导入@?

  2. 关于 angular.json 样式和脚本标签,我们在 Angular 文档中有以下内容:

    您想要添加的任何 CSS 文件,您不会从您的 直接模块,以及您不会导入的任何 JavaScript 文件 进入你的 TypeScript 文件

    所以,如果我需要在 car.component.html 中使用一些 CSS 类,我不应该将这个 CSS 放在 angular.json 中吗?如果我需要在像 (car.service.ts) 这样的 TypeScript 类中使用 jQuery,我也不应该把它放在 angular.json 中吗?我看到很多教程在 angular.json 中添加 jQuery 并在 TypeScript 服务类中导入之后。

  3. 据我了解,Angular 的工作只是将模块、指令、打字稿等所有 Angular 内容转换为 HTML+Javascript 单页。当我查看 dist 文件夹时,我的想法是这样的,我应该只看到 HTML+javascript,没有 Angular 的东西。但是在 dist 文件夹中查看 index.html 我看到了 <app-root> 对我来说这是 Angular 的东西,应该被翻译成一段 HTML 代码,不是吗?

  4. 1234563此文件将在运行时插入?

【问题讨论】:

    标签: angular


    【解决方案1】:

    1) 两种方式都可以,但是,通过 NPM 安装包是一个很好的做法,因为它会安装任何额外的依赖项。此外,通过 NPM 安装/更新似乎比手动下载库更实用。

    2) 您应该在 car.component.css 样式表中编写 CSS。无需在 angular.json 中添加 CSS,因为您不希望它在全局范围内应用,而是在组件内应用。

    3) 你的理解是正确的!但是,请记住,您可以在 HTML 中创建任何自定义标记。 <app-root> 实际上是一个自定义的 HTML 标签,而不是一个有角度的东西。

    4) 这些 JS 库在构建时插入到主 JS 文件中。尝试在 uglified JS 文件中搜索它们 (ctrl + f) 以获得想法。

    【讨论】:

    • 对于答案 2),对于 JavaScript ?当我不应该在 angular.json 中添加 .js 时?
    • 当您想要包含实际上并非设计用于使用 angular 的全局脚本时,您可以将脚本添加到 angular.json(例如,您不必为已安装的模块接触 angular.json通过 npm 安装)。另一种方法是将它们添加到 index.html 的 head 部分(传统方式)。但是,这样它们就不会被捆绑在构建中,因此通过 angular.json 添加它们是更可取的方式。附言否决者能否解释原因?
    猜你喜欢
    • 2011-10-30
    • 1970-01-01
    • 2016-12-25
    • 2016-11-20
    • 1970-01-01
    • 2018-06-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多