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

Issue with Chrome extensions: encountering 'variable undefined' error in the extension despite it being defined in the console

What are the most effective techniques for utilizing JavaScript modules in both the Server and Browser environments?

What crucial element am I overlooking in the React Transition Group Component while implementing it for a carousel design?

Adding extra fields to an existing JSON response in a TypeScript REST API

Sharing a Directive across multiple AngularJS modules: Tips and Tricks

Setting up route handlers in Node.js on a pre-initialized HTTP server

What is the process for inserting a scroll bar within a div element?

Navigating the intricacies of passing a complex C# object through FromQuery

Issues with Fetch API and CORS in Web Browsers

React animation failing to render underline animation

Tips for concealing links in ui-grid post-click with AngularJS

using java to invoke a server-side function within a mapReduce operation in mongodb

Quasar Vue - Qselect component not populating with async data, showing [object Object] as default value

Learning React: Error - Unable to access the 'data' property when it is null

Why is the Angular directive '=&' value binding to the scope showing as undefined?

Setting the Height of a Fixed Element to Extend to the Bottom of the Browser Window

Trouble with serving CSS files using Express static directory

What is the best method for converting a variable with HTML content into a printable string?

Connecting node.js to a MySQL database on a WAMP/XAMPP server: A step-by-step guide

Error message occurs when creating a pie chart with invalid values for the <path> element in Plottable/D3.js