На тот случай, когда вам надо делать то, что не хочется.
Требования: 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-команда>
.
angular_index.html
, находящийся в каталоге шаблонов Django.ng new frontend
.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, то будет сгенерирован дополнительный файл. Чтобы все отображалось идеально, вам нужно будет внести и этот файл.
Pydantic - это мощная библиотека проверки данных и управления настройками для Python, созданная для повышения…
Python предлагает набор библиотек, удовлетворяющих различные потребности в визуализации, будь то академические исследования, бизнес-аналитика или…
В Python для представления данных в двоичной форме можно использовать байты. Из этой статьи вы…
В этой статье рассказывается о том, что такое Werkzeug и как Flask использует его для…
При работе с датами часто возникает необходимость прибавлять к дате или вычитать из нее различные…
В этом руководстве мы рассмотрим, как добавить социальную аутентификацию с помощью GitHub и Google в…