I am currently developing a site that uses Angular JS for the frontend and Flask for the RESTful API. I use vagrant to host the LAMP server where my application is located. The API has been tested with curl and it works exactly the way I want.
When starting the application, the following error appears:
`*GET http://localhost:5000/choreographer/api/v1.0/choreographers net::ERR_CONNECTION_REFUSED (anonymous function) @ angular.js:10722 sendReq @ angular.js:10515 serverRequest @ angular.js:10222 processQueue @ angular.js:14745 (anonymous function) @ angular.js:14761 Scope.$eval @ angular.js:15989 Scope.$digest @ angular.js:15800 Scope.$apply @ angular.js:16097 (anonymous function) @ angular.js:12226 eventHandler @ angular.js:3298*`
Initially, I thought this might be a CORS problem, so I tried using $http.jsonp() . This led to the same error. I know that there is something that interferes with my ability to access the API, but I do not know what and how to fix it.
My AngularJS module is as follows:
angular.module('myApp.choreographer', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/choreographer', { templateUrl: 'choreographer/choreographer.html', controller: 'choreographerCtrl' }); }]) .factory('choreographerService', function($resource) { return $resource('http://localhost:5000/choreographer/api/v1.0/choreographers'); }) .controller('choreographerCtrl', function($scope, choreographerService) { var choreographers = choreographerService.query(function() { console.log(choreographers); });
The flags API is as follows:
\#!env/bin/python from flask import Flask, jsonify from flask import abort from flask import request app = Flask(__name__) @app.route('/') def index(): return "Hello World!" choreographers = [ { "id":1, "firstName": "Danny", "lastName": "Boy", "email": " email@email.edu ", "bio": "Biography for Danny." }, { "id":2, "firstName": "Jessica", "lastName": "Martin", "email": " helloworld@smu.edu ", "bio": "Biography text for Jessica" }, { "id":3, "firstName": "John", "lastName": "Doe", "email": " test@pleasework.com ", "bio": "Biography text for John" } ] @app.route('/choreographer/api/v1.0/choreographers', methods=['GET']) def get_choreographers(): return jsonify({'choreographers': choreographers}) @app.route('/choreographer/api/v1.0/choreographer/<int:choreographer_id>', methods=['GET']) def get_choreographer(choreographer_id): choreographer = [choreographer for choreographer in choreographers if choreographer['id'] == choreographer_id] if len(choreographer) == 0: abort(404) return jsonify({'choreographer':choreographer[0]}) @app.route('/choreographer/api/v1.0/choreographer', methods=['POST']) def add_choreographer(): if not request.json or not 'firstName' in request.json: abort(400) choreographer = { 'id': choreographers[-1]['id'] + 1, 'firstName': request.json['firstName'], 'lastName': request.json.get('lastName',""), 'email': request.json['email'], 'bio': request.json['bio'], } choreographers.append(choreographer) return jsonify({'choreographers': choreographer}),201 @app.route('/choreographer/api/v1.0/choreographers/<int:choreographer_id>', methods=['PUT']) def update_choreographer(choreographer_id): choreographer = [choreographer for choreographer in choreographers if choreographer['id'] == choreographer_id] if len(choreographer) == 0: abort(404) if not request.json: abort(400) if 'firstName' in request.json and type(request.json['firstName']) != unicode: abort(400) if 'lastName' in request.json and type(request.json['lastName']) is not unicode: abort(400) choreographer[0]['firstName'] = request.json.get('firstName', choreographer[0]['firstName']) choreographer[0]['lastName'] = request.json.get('lastName', choreographer[0]['lastName']) choreographer[0]['email'] = request.json.get('email', choreographer[0]['email']) choreographer[0]['bio'] = request.json.get('bio', choreographer[0]['bio']) return jsonify({"choreographer": choreographer[0]}) @app.route('/choreographer/api/v1.0/choreographers/<int:choreographer_id>', methods=['DELETE']) def delete_choreographer(choreographer_id): choreographer = [choreographer for choreographer in choreographers if choreographer['id'] == choreographer_id] if len(choreographer) == 0: abort(404) choreographers.remove(choreographer[0]) return jsonify({'result':True}) if __name__ == '__main__': app.run(debug=True)
My Angular validates the first GET method in the API