AngularJS – Describe Typical JS workflow (with Python Flask)?

 AngularJS – Describe Typical JS workflow (with Python Flask)?
Asked on October 16, 2018 in AngularJs.
Add Comment


  • 3 Answer(s)

    It begins, by sorting out the Flask application in the standard structure as

    app
    |-- app.py
    |-- static
    |-- css
    |-- img
    |-- js
    |-- templates
    

             Besides completing an Angular application, It  is necessary  to center around utilizing Angular customer side layouts and avoid server-side formats.

             Utilizing render_template(‘index.html’) will make Flask decipher formats as jinja layouts, so they won’t render accurately. Rather, it requires  the accompanying:

    @app.route("/")
    def index():
    return send_file('templates/index.html')
    

       Note that utilizing send_file() implies that the documents will be reserved, To utilize make_response() rather, in any event for advancement:

    return make_response(open('templates/index.html').read())
    

        Later, form out the AngularJS part of  application, altering the application structure so it would seem that this:

    app
    |-- app.py
    |-- static
    |-- css
    |-- img
    |-- js
    |-- app.js, controllers.js, etc.
    |-- lib
    |-- angular
    |-- angular.js, etc.
    |-- partials
    |-- templates
    |-- index.html
    

         Ensure your index.html incorporates AngularJS, and some other records:

    <script src="static/lib/angular/angular.js"></script>
    

         Now, it doesn’t yet built  RESTful API, so that js controllers return predefined test information (just a transitory setup).  execute the RESTful API and connect it.

    Answered on October 16, 2018.
    Add Comment

    For Angular, it really doesn’t matter what technology is used for building REST API whether it is Java Springboot, ASP.NET Web API, Node.js, Python or any other

    import { HttpClient } from '@angular/common/http';
    export class AppComponent {
      serverData: JSON;
      employeeData: JSON;
      constructor(private httpClient: HttpClient) {
      }
      sayHi() {
        this.httpClient.get('http://127.0.0.1:5002/').subscribe(data => {
          this.serverData = data as JSON;
          console.log(this.serverData);
        })
    }
    getAllEmployees() {
      this.httpClient.get('http://127.0.0.1:5002/employees').subscribe(data => {
        this.employeeData = data as JSON;
         console.log(this.employeeData);
          })
        }
    }
    
    Answered on December 18, 2018.
    Add Comment

    I think it is important to determine at what end you want to do most of your data processing – front end or back end.
    If it’s front end, then go with the angular workflow, which means your flask app will function as more of an api where an extension like flask-restful will come end.

    But if like me, you are doing most work on the backend, then go with the flask structure and only plug angular ( or in my case vue.js) to build the front end (when neccessary)

    Answered on January 18, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.