Switching from AngularJS to vanilla JavaScript or integrating AngularJS and Flask on a single server

Question

Switching from AngularJS to vanilla JavaScript or integrating AngularJS and Flask on a single server

It is common knowledge that angular has the ability to create a project and convert it into pure HTML, CSS, and js code. Similarly, I am looking to do the same for my AngularJS application. When I execute the app using npm start it works perfectly fine. My goal is to incorporate this app into my backend as an index.html template, eliminating the need for a separate front end server.

As depicted below, the backend represents a flask app while the frontend signifies an angular JS app.

I would appreciate any suggestions or solutions on:

How can I convert the code into pure HTML, CSS, and JavaScript?
How can I integrate the angular JS frontend directly into the 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

javascript angularjs flask

Answer 1

Answer №1

After a whole day of trying, I stumbled upon a solution by accident while using the VS Code live server extension.

So, what should you do next?

index.html serves as the starting point. Therefore, copy and paste it into the templates folder (I am placing it inside the app folder within templates).

The next step involves copying all other files and folders such as components, app.config.js, app.css, app.module.js, etc. to the `static` folder.

Now, update paths in index.html within the templates folder following Flask rules using url_for.

Make changes to 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>

Also, make small adjustments to components located in the static folder.

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

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

Answer 2

After a whole day of trying, I stumbled upon a solution by accident while using the VS Code live server extension.

So, what should you do next?

index.html serves as the starting point. Therefore, copy and paste it into the templates folder (I am placing it inside the app folder within templates).

The next step involves copying all other files and folders such as components, app.config.js, app.css, app.module.js, etc. to the `static` folder.

Now, update paths in index.html within the templates folder following Flask rules using url_for.

Make changes to 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>

Also, make small adjustments to components located in the static folder.

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

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

Switching from AngularJS to vanilla JavaScript or integrating AngularJS and Flask on a single server

Answer №1

Final directory structure

Similar questions

What is the best way to enable a DOM element's height to be resized?

Component built in ReactJS for file uploads to a server running on Spring MVC/Data-REST

AJAX (Vanilla JavaScript): Sending Image through HTTP Request

Implementing a dynamic update of an HTML element's content with JSON data - Learn how!

Is it possible to adjust the color of the iOS status bar using NativeScript, Angular 2, and TypeScript?

Create 3000 unique squares using a procedural generation method

Enabling communication between App.js and a separate class in React

The lifecycle of XMLHTTPRequest objects in JavaScript - from creation to destruction

Exploring the internet with Internet Explorer is like navigating a jungle of if statements

What is the best way to insert a React component or raw HTML into another React component?

Include personalized headers to the 'request'

Tips for utilizing code submitted by a user to extract meaningful errors

Retrieve the scope object using angular.element and the $ID parameter

What is the best way to send two mongoose find queries to the correct GET route?

Issue with Firefox compatibility in Backbone.js

Angular 2 - Graphic Representation Tool for Visualizing Workflows and Processes - Resource Center

Ways to properly release file descriptors in write streams

An effective method for retrieving the version from package.json

Add a new component to a Vue.js instance that is already in use

Exploring the significance of a super in Object-Oriented Programming within JavaScript