Как разместить приложение Angular 6 в Python Django?
Ответы 2
Предположение: этот сайт django уже запущен
Что нужно для локальной установки Angular 6
- Установите Node Js.
- Установить Angular cli глобально
npm install -g @angular/cli
- Перейдите к angular в репо
dir\angular
- Установите [библиотеки] npm
npm install
- Обслуживать сайт
npm serve [-o]
- Перейдите на размещенный сайт
Библиотеки Angular, необходимые для поддержки Django
npm install @angular-devkit/custom-webpack --save
npm install @angular-builders/custom-webpack --save
npm install webpack-bundle-tracker --save
Библиотеки Django, необходимые для поддержки Angular
pip install django-webpack-loader
Файловая архитектура - я поместил свой проект angular в djangodir вне root
корень> djangodir> угловой
корень> djangodir> статический
корень> djangodir> шаблоны
корень> djangodir> webpack-stats-angular.json
Настройте Angular для Django
1) Измените angular.json, чтобы включить настраиваемую конфигурацию веб-пакета и изменить тип сборки на строитель.
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js"
},
"outputPath": "../static/angular",
2) код extra-webpack.config.js
const BundleTracker = require('webpack-bundle-tracker');
module.exports = {
plugins:[
new BundleTracker({filename: '../webpack-stats-angular.json'})
],
output: {
path: require('path').resolve('../static/angular'),
filename: "[name]-[hash].js"
}
};
Настройте Django для Angular
1) settings.py - добавлен webpack_loader в installed_apps
INSTALLED_APPS = [
'webpack_loader'
]
2) settings.py - добавлен webpack_loader
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'angular/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-angular.json'),
}
}
3) requirements.txt - у нас есть скрипт, который извлекает из текстового файла и включает зависимости - к нему мы добавляем
django-webpack-loader==0.6.0
4) urls.py - настроить маршрутизацию инициализации для приложения hello world angular
from . import views as djangodir_views
urlpatterns = [
# path('', include(router.urls)),
path('', djangodir_views.serve_angular, name='serve_angular')
]
5) views.py - укажите путь к URL-адресу
def serve_angular(request):
return render(request, 'angular.html')
Angular.html Страница:
{% load render_bundle from webpack_loader %}
<!doctype html>
<html lang = "en">
<head>
<base href = "/">
<title>Angular/TypeScript Hello World Project</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "description" content = "Angular Hello World Starter">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel = "stylesheet" />
<!-- <link href = "assets/styles/styles.css" rel = "stylesheet" /> -->
</head>
<body>
<header class = "navbar navbar-inner navbar-fixed-top">
<nav class = "container">
<div class = "navbar-header">
<span class = "app-title"></span>
</div>
</nav>
</header>
<main class = "container">
<app-root>
Loading...
</app-root>
<br /><br />
</main>
<footer>
<div class = "navbar navbar-fixed-bottom">
<div class = "navbar-inner footer">
<div class = "container">
<footer>
</footer>
</div>
</div>
</div>
</footer>
{% render_bundle 'runtime' %}
{% render_bundle 'polyfills' %}
{% render_bundle 'styles' %}
{% render_bundle 'vendor' %}
{% render_bundle 'main' %}
</html>
Использованная литература:
- Учебник по Angular 6 | 5: интеграция Angular с Django
- Настройка сборки Angular CLI 6 - альтернатива ng eject
- Развитие вашего интерфейса Django
- Используемый пример Angular Hello World
Маршрутизация:
Чтобы угловая маршрутизация работала, необходимо
1) app-routing.module.ts - Добавить маршрутизацию в angular
const routes: Routes = [
{ path: '', component: TestComponent, data: { title: 'Home' }},
{ path: 'test', component: Test2Component, data: { title: 'Test' }}
];
2) urls.py - добавьте маршрутизацию в Django - просто укажите на то же представление
urlpatterns = [
path('', djangodir_views.serve_angular, name='serve_angular'),
path('test', djangodir_views.serve_angular, name='serve_angular')
]
Я сделал именно то, что вы написали. А в браузере я вижу только "Идет загрузка ..."? Стоит ли настраивать для него маршруты?
повторил все шаги в соответствии с предписаниями, результат тот же, что и выше,
@shlomoa тот же результат, что и долидод?
@DolidodTeethtard Да, нужны маршруты.
Да @Demodave, у меня действительно получилось значительно более простое решение, см. Мой ответ ниже
Обновление всей страницы будет происходить при изменении URL-адреса, как этого избежать?
Интеграция Угловой 8 и django 2.2
Используется Visual Studio для Django 2.2 и Visual Studio Code для Угловой 8
Я изменил вышеуказанное решение, и в конечном итоге оно сработало. разработал более простое решение, используя некоторые дополнительные ссылки (перечисленные в конце) поверх вышеуказанного решения.
Предполагая:
- angular настраивается по адресу: example / angular
- django настроен по адресу: example / django
Распространение файлов angular прямо в статическую папку django
Это ключ №1, остальное - клейкий (несколько уродливый) код, позволяющий максимально безболезненно сшить фреймворки.
На консоли:
cd example/angular
ng build --prod --output-path ..\django\mysite\mysite\app\static\angular --output-hashing none --watch
Проверьте Угловой / CLI на наличие переключателей командной строки и их использования, ключ здесь в том, что вывод угловой компиляции идет непосредственно в Django, посредник не нужен.
Поддержка независимых FE и BE для разработки и тестирования
Примечание: это необязательно, вы можете «испортить» свою среду разработки angular и поместить все теги и атрибуты django непосредственно в angular, за счет потери независимости FE - BE.
Index.html, распространяемый в angular, не может использоваться в Django "как есть".
Вот такой пример, назовите его angular.html:
{% load static %}
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>mysite</title>
<base href = "/">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "icon" type = "image/x-icon" href = "{% static 'angular/favicon.ico' %}">
<link rel = "stylesheet" href = "{% static 'angular/styles.css' %}">
</head>
<body>
<app-root></app-root>
<script src = "{% static 'angular/runtime.js' %}"></script>
<script src = "{% static 'angular/polyfills-es5.js' %}"></script>
<script src = "{% static 'angular/polyfills.js' %}"></script>
<script src = "{% static 'angular/main.js' %}"></script>
</body>
</html>
Примечание: с использованием только родного языка Django
Обслуживайте его в django, как и любой другой html
Что еще
- Двусторонняя маршрутизация между django и angular
- Совместное использование пакетов, таких как bootstrap
- Настоятельно рекомендую Джанго-отдых-фрейм-работа в качестве отправной точки
- СОЗДАНИЕ ВЕБ-ПРИЛОЖЕНИЯ С ANGULAR, DJANGO И DJANGO REST - более сложный пример, объединяющий все вместе, я бы сохранил вышеупомянутый упрощенный механизм django и angular склейки.
Опубликуйте свое решение.
Блестящее решение. Ваше здоровье.
Спасибо, это помогло. Дополнительные пояснения. Файлы html должны находиться в папке templates / angular, а остальные - в папке angular / static. Вот как мой был настроен для обслуживания шаблонов.
Это было добавлено, поскольку я не мог легко найти ответ. Надеюсь, мой ответ поможет другим.