Понять, как Angular импортировать файлы JS и CSS
Я только начинаю с Angular, и некоторые концепции для меня очень непонятны:
Почему мне нужно установить jquery (
npm install jquery) и импортировать в файлangular.json, если я могу просто загрузитьjquery.jsпрямо из https://jquery.com/ и добавить в папкуassets, а затем добавить вangular.json?О тегах стилей и скриптов
angular.jsonв документации по Angular есть следующее:Any CSS files you want to add that you won’t be referencing from your modules directly, and any JavaScript files that you won’t be importing into your TypeScript files
Итак, если мне нужно использовать какой-то класс CSS в
car.component.html, я не должен помещать этот CSS вangular.json? И если мне нужно использовать jQuery в классе TypeScript, например (car.service.ts), я не должен помещать его и вangular.json? Я вижу много руководств, которые добавляют jQuery вangular.jsonи после импорта в сервисный класс TypeScript.Насколько я понимаю, задача Angular состоит только в том, чтобы преобразовать все элементы Angular, такие как модули, директивы, машинописный текст и другие, в одну страницу HTML + Javascript. Думая так, когда я смотрю на папку dist, я должен видеть только HTML + javascript, без элементов Angular. Но заглянув внутрь
index.htmlв папке dist, я увидел<app-root>, и для меня это Angular материал, который нужно преобразовать в фрагмент кода HTML, не так ли?В завершение, глядя на
index.htmlвнутри папки dist, я не вижуjquery.js,bootstrap.jsи других JavaScript, вставленных в файлangular.json, но все работает нормально. Эти файлы будут вставлены во время выполнения?
Ответы 1
1) Вы можете сделать это обоими способами, однако установка пакетов через NPM является хорошей практикой, поскольку при этом будут установлены любые дополнительные зависимости. Кроме того, кажется более практичным устанавливать / обновлять через NPM с помощью одной команды, чем загружать библиотеки вручную.
2) Вы должны написать свой CSS в таблице стилей car.component.css. Нет необходимости добавлять CSS в ваш angular.json, поскольку вы не хотите, чтобы он применялся глобально, а внутри компонента.
3) Ваше понимание правильное! Однако имейте в виду, что вы можете создать любой собственный тег в HTML. <app-root> на самом деле является настраиваемым HTML-тегом, а не угловой вещью.
4) Эти библиотеки JS вставляются в основной файл JS при сборке. Попробуйте поискать их (ctrl + f) в урезанном JS-файле, чтобы понять.
Вы добавляете сценарии в angular.json, когда хотите включить глобальные сценарии, которые на самом деле не предназначены для работы с angular (например, вам не нужно касаться angular.json для модулей, которые вы установили через npm). Другой способ - добавить их в ваш index.html, в раздел заголовка (традиционный способ). Однако в этом случае они не будут включены в сборку, поэтому добавление их через angular.json является предпочтительным способом. P.S. Не мог бы тот, кто проголосовал против, объяснить, почему?
Для ответа 2), а для JavaScript? Когда мне не следует добавлять .js внутрь angular.json?