Узнайте, как загружать и использовать код JavaScript в вашем проекте Angular.

Следите за новостями в Твиттере: Codeible (@codeible) / Twitter.

Посмотреть статью на Codeible.com.



Загрузка и использование JavaScript в Angular
Здесь укажите путь к каждому файлу JavaScript, который вы хотите загрузить в массив. Вы можете щелкнуть правой кнопкой мыши файл в…codeible.com



Здравствуйте, в этом руководстве вы узнаете, как загружать и использовать код JavaScript в вашем проекте Angular.

Добавление файлов JavaScript в ваш проект

Чтобы добавить файлы JavaScript, найдите файлы на своем компьютере и поместите их в папку ресурсов проекта.

Затем откройте файл angular.json и найдите внутри свойство scripts.

Здесь укажите путь к каждому файлу JavaScript, который вы хотите загрузить в массив.

Вы можете щелкнуть правой кнопкой мыши файл на панели проводника, чтобы получить путь к документу и вставить каждый путь внутрь массива.

Не забудьте заменить обратную косую черту на прямую косую черту.

"scripts": [
   "src/assets/ExampleJS1.js"
]

Папка с ресурсами находится внутри папки src, поэтому мы делаем «src/assets/» и имя нашего файла.

Когда мы запускаем наше приложение, оно загружает и выполняет код в файлах JavaScript.

Вот что находится внутри файла ExampleJS1.js:

function greet(){
   alert("Hello");
}
alert("Pop up");

Результат:

Использование функций в файле JS

Чтобы использовать функции или переменные в файлах JavaScript, объявите ссылку в файле TypeScript, введя declare, а затем переменную или функцию, на которую вы хотите сослаться.

import { Component } from '..'
declare function greet(): void;
@Component({
   ....
})
export class AppCompoent {
}

Затем вызовите его в коде.

import { Component } from '..'
declare function greet(): void;
@Component({
....
})
export class AppCompoent {
   constructor(){
      greet();
   }
}

Использование CDN

Если у вас есть CDN или ссылка на онлайн-репозиторий для файла JavaScript, вы можете просто поместить теги script на страницу index.html для загрузки ваших файлов.

<!doctype html>
<html lang="en">
<head>
   <script src="..."></script>
</head>
<body>
<app-root></app-root>
</body>
</html>

Однако вы не можете добавлять элементы скрипта на html-страницу ваших компонентов.

Чтобы загрузить файлы JavaScript в компонент, вы должны сделать это вручную внутри файла TypeScript.

Перейдите в файл TypeScript компонента приложения и создайте объект элемента сценария.

Затем установите значение свойства src на путь к файлу JavaScript, который вы хотите загрузить. Это может быть URL-адрес или локальный путь в проекте.

Наконец, добавьте элемент скрипта в тело HTML-страницы.

import { Component } from '..'
declare function greet(): void;
@Component({
   ....
})
export class AppCompoent {
myScriptElement: HTMLScriptElement;
   constructor(){
      greet();
      this.myScriptElement = document.createElement("script");
      this.myScriptElement.src = ".....";
      document.body.appendChild(this.myScriptElement);
   }
}

Рекомендуемые:

Загрузите и попробуйте новое приложение Auto Clicker / Click Assistant в магазине Google Play:

Приложения в Google Play: Циклический кликер