Share This
Связаться со мной
Крути в низ
Categories
//Интеграция Django и Angular

Интеграция Django и Angular

08.11.2020Category : Python

На тот случай, когда вам надо делать то, что не хочется.

Требования: 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, то будет сгенерирован дополнительный файл. Чтобы все отображалось идеально, вам нужно будет внести и этот файл.

    Проходите тест по Python и поймите, готовы ли вы идти на курсы
  • 5 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Связаться со мной
Close