Интеграция Django и AngularНа тот случай, когда вам надо делать то, что не хочется.
Требования: Django > 1.8, Angular 8, 9 или выше. Мы будем использовать Angular 9.
Давайте приступим непосредственно к делу. Мы надеемся, что у вас уже сделана базовая установка Django, а именно:
- Установка виртуальной среды (Vritualenv setup)
- Django проект
- Установка статичных файлов и шаблонов (Static files and template files setup)
Теперь установим Angular:
npm install -g @angular/cli
Если вы работаете под Windows, добавьте команду
ng в переменную Path. В противном случае для всех последующих команд в этой статье нужно будет вводить
npm run ng <ваша.
1. В Django создайте представление Landing и URL, указывающий на это представление. Визуализируйте шаблон, который вы собираетесь использовать с Angular. Скажем, файл
angular_index.html, находящийся в каталоге шаблонов Django.
2. Теперь из командной строки создадим новый проект angular в статическом каталоге Django.
ng new frontend.
3. Теперь базовая структура ваших приложений Angular готова. Для тестирования запустите команду
ng build. Это скомпилирует ваш код и создаст ряд файлов в каталоге dist, который, в свою очередь, будет создан в каталоге frontend вашего angular-приложения. Теперь перейдите в файл angular_index.html и включите скомпилированные файлы
runtime-es2015.js,
polyfills.js,
styles-es2015.js,
vendor-es2015.js,
main-es2015.js в JS-блок шаблона Django.
И теперь, почти закончив, просто добавьте в файл
angular_index.html:
<app-root
А затем запустите Python-сервер следующей командой:
python manage.py runserver. Перейдя по указанному URL, вы увидите ваше Angular-приложение.
Пока все работает нормально, но дело в том, что при каждом внесении изменений в код вам приходится запускать
ng build для компиляции кода angular, и лишь затем вы можете увидеть результат этих изменений в вашем браузере.
Вы можете подумать: «А почему бы не использовать
ng serve?» Да,
ng serve — отличный вариант. Но, к сожалению, он не предоставляет нам скомпилированные файлы, а сохраняет эти файлы в памяти. Поэтому для разработки нам нужно использовать опцию
watch в
ng build .
Запустите команду
ng build --watch в терминале, и при каждом изменении файла будет происходить горячая перезагрузка. Но теперь ваш браузер ничего не показывает. Дело в том, что в режиме просмотра команда
ng build --watch создает другие имена файлов, без суффикса
es2015. Поэтому вам нужно изменить имена этих файлов в файле
angular_index.html и включить туда следующие файлы:
Для лучшей конфигурации можно взять окружение из файла
settings.py. Тогда при помощи условия
if вы сможете устанавливать все файлы в соответствии с этим окружением.
На всякий случай: если вы добавите поддержку IE, то будет сгенерирован дополнительный файл. Чтобы все отображалось идеально, вам нужно будет внести и этот файл.
Сообщение Интеграция Django и Angular появились сначала на Pythonist.
Читать: https://pythonist.ru/?p=11326
@django_prog | Другие наши каналы
![[PYTHON:TODAY] Telegram Channel](/avatar/1125/1125084041.jpg)
