Интеграция 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 <ваша 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.
<script type="type/javascript" src="{% static 'frontend/dist/runtime-es2015.js' %}"></script> <script type="type/javascript" src="{% static 'frontend/dist/polyfills-es2015.js' %}"></script> <script type="type/javascript" src="{% static 'frontend/dist/styles-es2015.js' %}"></script> <script type="type/javascript" src="{% static 'frontend/dist/vendor-es2015.js' %}"></script> <script type="type/javascript" src="{% static 'frontend/dist/main-es2015.js' %}"></script>

И теперь, почти закончив, просто добавьте в файл angular_index.html:

<body> <app-root></app-root> <!-- your script files here in JS block --> </body>

А затем запустите 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 и включить туда следующие файлы:

<script type="type/javascript" src="{% static 'frontend/dist/runtime.js' %}"></script> <script type="type/javascript" src="{% static 'frontend/dist/polyfills.js' %}"></script> <script type="type/javascript" src="{% static 'frontend/dist/styles.js' %}"></script> <script type="type/javascript" src="{% static 'frontend/dist/vendor.js' %}"></script> <script type="type/javascript" src="{% static 'frontend/dist/main.js' %}"></script>

Для лучшей конфигурации можно взять окружение из файла settings.py. Тогда при помощи условия if вы сможете устанавливать все файлы в соответствии с этим окружением.

На всякий случай: если вы добавите поддержку IE, то будет сгенерирован дополнительный файл. Чтобы все отображалось идеально, вам нужно будет внести и этот файл.