AngularJS + Flask : getting data from Flask Backend to AngularJS

Question

I am trying to call an api from AngularJS and render the response on the web browser.

Server

@app.route("/data")
def getDataFromDB():
      cur.execute("select * from employee")
      rows = cur.fetchall()
      columns = [desc[0] for desc in cur.description]
      result = []
      for row in rows:
          row = dict(zip(columns, row))
          json_row=json.dumps(row)
          result.append(json_row)
          json_response=json.dumps(result)
     response=Response(json_response,content_type='application/json; charset=utf-8')
     response.headers.add('content-length',len(json_response))
     response.status_code=200
     return response

Client

maincontroller.js

  var app=angular.module('myApp',[]);
  app.controller("MainController", function($scope,$http){

  var done=function(resp){

  $scope.lists=resp.data;
  };
  var fail=function(err){

  };

 $http.get('http://10.62.XX.XX:8083/data')
 .then(done,fail);

});

index.html

<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"     
type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="maincontroller.js" type="text/javascript"></script>

</head>
<body ng-app="myApp">

<div id='content'  ng-controller='MainController'>

 <div>
   {{lists}}
 </div>

 </div>
 </body>
 </html>

Now, when I access the above code using jsbin.com, I can see my api getting called but nothing is visible on the output screen in jsbin. It is blank. But when I put the same code in eclipse, I see no api call happening. Do I need to do something more to make angularJS work? Currently, I just open the index.html with web browser and expecting it to hit the api and get the result.

It would be great if someone could provide me a working demo of the api call using my code snippet. I want to know what I am missing out.

duplicate stackoverflow.com/questions/24792831/…

Nava
– Nava

2014-07-17 07:56:43 +00:00
Commented Jul 17, 2014 at 7:56 — Nava
– Nava, Commented Jul 17, 2014 at 7:56

Lukasz Madon · Accepted Answer · 2014-07-16 23:04:36Z

1

TL;DR

You need to return index.html from @app.route("/") when you run your flask server. Update the script src to mach your flask config.

Server

It's better to use Flask-SQLAlchemy

instead of creating response use jsonify

from flask import jsonify
@app.route("/data")
....
    return jsonify(result), 200

Client

Checkout resource
What is http://10.62.XX.XX:8083/data? Use http://127.0.0.1:5000/data
Don't shallow error. Add at least console.log(err) to debug

Running

How do you open index.html? As a file? You need an http server will server for html and js from the same domain that you make the get request in maincontroller.js. Use Flask for that. Flask assumes certain structure of the project. Here is a seed https://github.com/rxl/angular-flask

answered Jul 16, 2014 at 23:04

Lukasz Madon

15.1k16 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Kenn · Accepted Answer · 2015-03-08 04:21:33Z

0

Check this tutorial series that I wrote for using AngularJS and Flask together - http://tutsbucket.com/tutorials/building-a-blog-using-flask-and-angularjs-part-1/

It that tutorial, the Flask application and AngularJS is separated. The tutorial has a lot of demos on how an AngularJS app fetches data in the backend (Flask application).

answered Mar 8, 2015 at 4:21

John Kenn

1,6952 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

AngularJS + Flask : getting data from Flask Backend to AngularJS

Server

Client

maincontroller.js

index.html

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Server

Client

maincontroller.js

index.html

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related