convert angularjs to pure js or how to use single server for angular JS and Flask

user_8507296 0
Viewed 1842

As we know angular can build a project and convert to pure HTML, CSS, and js code. Similarly, I want my AngularJS application. When I run that app using npm start It works. I want to put that app in my backend as index.html as template so that no need for a separate front end server.

As shown below backend is a flask app and frontend is angular JS app.

Please suggest me the solution

  1. How to convert code to pure Html CSS js? or
  2. How to use angular JS frontend directly in flask backend as a template?
.
├── 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
angularjs flask javascript
1 Answers

When I tried the whole day and finally found a solution accidentally in vs code live server extension. it is running there.

So what to do.

index.html is the starting point. So copy and paste it in the templates folder. (i am pasting inside the app folder which is in templates.

Next step, copy all other files and folders like components, app.config.js,app.css,app.module.jsetc tostatic` folder.

Now change paths in index.html inside templates folder accordingly flask rules using url_for.

Changed code samples.

<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>

And also small changes to component which are in static folder

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

Final folder structure

.
└── 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
user_85072960
Related