代码之家 › 专栏 › 技术社区 › Demodave

如何在PythonDjango中托管Angular 6应用程序?

angular6 django

-1

Demodave · 技术社区 · 6 年前

我想在Django中托管Angular 6应用程序,我该怎么做?

1 回复 | 直到 6 年前

1

2

Demodave 6 年前

假设:django站点已经在运行

需要在本地设置Angular 6的内容

安装节点Js。

https://nodejs.org/en/download/
全局安装Angular cli

npm安装-g@angular/cli
方向\角度
安装npm的[库]

npm安装
服务现场
导航到托管站点

http://localhost:4200/

npm安装@angular devkit/自定义网页包--保存

Django库需要支持

文件体系结构-我将我的angular项目放在djangodir的根目录中

根>djangodir>有棱角的

根>djangodir>静止的

根>djangodir>模板

根>djangodir>webpack-stats-angular.json

为Django设置角度

 "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"
    }
};

1) settings.py-向已安装的应用程序添加了网页包\u加载器

INSTALLED_APPS = [
    'webpack_loader'
]

2) settings.py-添加了网页包加载程序

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) url.py-设置到hello world应用程序的初始路由

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>

路由:

1) app-routing.module.ts-将路由添加到

const routes: Routes = [
  { path: '', component: TestComponent, data: { title: 'Home' }},
  { path: 'test', component: Test2Component, data: { title: 'Test' }}  
];

urlpatterns = [
    path('', djangodir_views.serve_angular, name='serve_angular'),
    path('test', djangodir_views.serve_angular, name='serve_angular')
]

2

Community Justin Hirsch 4 年前

整合和

将VisualStudio用于 Django 2.2 和VisualStudio代码 Angular 8

我对上述解决方案进行了调整,最终成功了。在上述解决方案的基础上,设计了一个更简单的解决方案,使用了一些额外的参考资料(在末尾列出)。

假设:

django设置在:example/django

这是#1关键,其余的是胶水(有点难看)代码,以尽可能轻松地将框架缝合在一起。

在控制台上:

cd示例/角度

ng build--prod--output path..\django\mysite\mysite\app\static\angular--output hashing none--watch

Angular/CLI 对于命令行开关及其使用,这里的关键是angular编译的输出直接进入Django,不需要中间人。

注:

在Django中不能“按原样”使用angular中分发的index.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-rest-frame-work
BUILDING A WEB APP WITH ANGULAR, DJANGO AND DJANGO REST 一个更复杂的例子,把它放在一起,我会保留上面简化的django和角粘合机制。

angular8 django

如何在PythonDjango中托管Angular 6应用程序?

整合 和

还有什么

整合和