服务器

@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

客户端

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>

现在，当我使用jsbin.com访问上面的代码时，我可以看到我的api被调用但在jsbin的输出屏幕上看不到任何内容。这是空白的。但是当我在eclipse中使用相同的代码时，我发现没有api调用发生。我是否需要做更多工作才能使angularJS工作？目前，我只是使用Web浏览器打开index.html，并希望它能够点击api并获得结果。

如果有人能够使用我的代码片段为我提供api调用的工作演示，那就太棒了。我想知道我错过了什么。

Answer 1

TL; DR

运行烧瓶服务器时，需要从@ app.route（＆＃34; /＆＃34;）返回index.html。更新脚本src为你的烧瓶配置。

服务器

使用Flask-SQLAlchemy

更好

而不是创建响应使用jsonify

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

<强>客户端

结帐resource

什么是http://10.62.XX.XX:8083/data？使用http://127.0.0.1:5000/data

不要错误。至少添加console.log（错误）进行调试

<强>运行

你如何打开index.html？作为档案？您需要一个http服务器来为来自maincontroller.js中的get请求的同一域中的html和js服务器。使用Flask。 Flask假定项目的某些结构。这是种子https://github.com/rxl/angular-flask

Answer 2

查看我为一起使用AngularJS和Flask编写的本系列教程 - http://tutsbucket.com/tutorials/building-a-blog-using-flask-and-angularjs-part-1/

那个教程，Flask应用程序和AngularJS是分开的。本教程有很多关于AngularJS应用如何在后端（Flask应用程序）中获取数据的演示。

AngularJS + Flask：从Flask Backend获取数据到AngularJS

服务器

客户端

maincontroller.js

的index.html

2 个答案: