时间戳

首页 > 解决方案 > 将 angularjs 转换为纯 js 或如何将单个服务器用于 angular JS 和 Flask

javascript - 将 angularjs 转换为纯 js 或如何将单个服务器用于 angular JS 和 Flask

问题描述

正如我们所知angular，可以构建一个项目并转换为纯HTML、、CSS和js代码。同样，我想要我的AngularJS应用程序。当我使用npm start它运行该应用程序时。我想将该应用程序放在我的后端，index.html这样template就不需要单独的前端服务器。

如下图backend是一个flask app，frontend是angular JSapp。

请建议我解决方案

  1. 如何将代码转换为纯 Html CSS js？或者
  2. 如何在flask后端直接使用angular JS前端作为模板？
.
├── backend
│   ├── app.py
│   └── src
│       ├── db.py
│       ├── __init__.py
│       ├── run.py
│       └── secure.py
├── frontend
│   ├── app
│   │   ├── app.config.js
│   │   ├── app.css
│   │   ├── app.module.js
│   │   ├── home
|   |   |    ├── home.component.js
|   |   |    ├── home.component.spec.js
|   |   |    ├── home.module.js
|   |   |    └── home.template.html
│   │   ├── index.html
|   ├── package.json
│   ├── package-lock.json
│   └── README.md

标签： javascriptangularjsflask

解决方案

当我尝试了一整天，终于在vs code live server extension中意外找到了解决方案。它在那里运行。

那么该怎么办。

index.html是起点。因此，将其复制并粘贴到templates文件夹中。（我正在粘贴app在templates.

下一步，复制所有其他文件和文件夹components，例如 app.config.js ,app.css ,app.module.js etc tostatic` 文件夹。

现在使用相应的烧瓶规则更改index.html内部文件夹中的路径。templatesurl_for

更改的代码示例。

<script src="{{url_for('static', filename='lib/angular/angular.js')}}"></script>
<script src="{{url_for('static', filename='lib/angular-route/angular-route.js')}}"></script>
<script src="{{url_for('static', filename='app.module.js')}}"></script>
<script src="{{url_for('static', filename='app.config.js')}}"></script>

<script src="{{url_for('static', filename='home/home.module.js')}}"></script>
<script src="{{url_for('static', filename='home/home.component.js')}}"></script>

还有文件夹component中的小改动static

templateUrl: '/static/home/home.template.html'

最终文件夹结构

.
└── backend
    ├── app.py
    ├── src
    │   ├── db.py
    │   ├── __init__.py
    │   ├── run.py
    │   └── secure.py
    ├── static
    │   ├── app.config.js
    │   ├── app.css
    │   ├── app.module.js
    │   ├── home
    │   │   ├── home.component.js
    │   │   ├── home.component.spec.js
    │   │   ├── home.module.js
    │   │   └── home.template.html
    │   ├── img
    │   └── lib
    └── templates
        └── app
            ├── index-async.html
            └── index.html

推荐阅读