Я покажу, как можно добавить внешнюю библиотеку JavaScript, в которой есть файлы JavaScript, файлы CSS и файлы изображений.
В качестве примера мы добавим chessboard.js и JQuery в новый проект Angular.
Создайте проект Angular:
ng new js-lib-example
Войдите в каталог js-lib-example
cd js-lib-example
Установите chessboard.js
npm install chessboardjs --save
В вашем проекте Angular откройте файл angular.json и найдите разделы «активы», «стили» и «сценарии». Он появляется в двух местах в файле angular.json.
Первая локация находится в этом разделе:
Вторая локация находится в этом разделе:
Добавьте путь к файлам JavaScript, CSS и изображений chessboard.js в оба раздела:
Затем нам нужно добавить библиотеку JQuery, потому что chessboard.js зависит от JQuery.
Установить JQuery
npm install jquery --save
В файле angular.json снова найдите разделы «активы», «стили» и «сценарии». Добавьте файл JQuery JavaScript в оба раздела, как вы это делали выше:
И добавьте его в другой раздел вашего файла angular.json:
Мы готовы использовать chessboard.js в нашем проекте. Откройте свой app.component.ts и добавьте следующий код:
Затем откройте свой app.component.html, добавьте этот html:
Если вы еще не запустили npm start или ng serve, запустите его сейчас:
npm start
or
ng serve
В браузере перейдите по адресу http: // localhost: 4200, и вы увидите шахматную доску. Вы можете перетаскивать части:
К вашему сведению, шахматная логика не входит в состав библиотеки chessboard.js. Это всего лишь интерфейс. Если вы хотите добавить шахматную логику, посетите chess.js.
