How to Build Database driven RESTFUL API Applications with Flask, Flask-RESTFUL and Angularjs’s $resource service

In this tutorial I will describe how you can Build a RESTFUL API CRUD(Create, Read, Update and Delete) application with the Flask Python Micro-framework, and the Angularjs $resource Service. I
be will using the Flask-RESTFUL API extension to create an API backend
and then use Angularjs’s $resource service to communicate with it.Prerequisites
This Tutorial is for users who are familiar with the Flask Python and Angularjs Javascript Web frameworks.
Minimum System/Software Requirements that you need to have are:Ubuntu Linux 14.04 Python 3.4 Flask 0.10 Angularjs 1.4 PostgreSQL 9+ or MySQL/Mariadb 5+Part 1: Installing and Configuring a Flask RESTFUL API Server.
The first step is to download Flask, Flask-RESTFUL and Flask-SQLAlchemy
along with their dependencies into a virtual environment and configure
them to connect to your database.

In the above code example I have also included the Schema class from
the ‘marshmallow_jsonapi’ python module to send JSON formatted data as
per the JSON specification at jsonapi.org and the validation class from
the ‘marshmallow’ python module to validate Data. Refer to the links at
the bottom of this article to learn more about these modules.
Next create a ‘controller.py’ file and define the CRUD Classes and
API endpoints using the Flask-RESTful flask extension as follows:

The above code will first validate incoming data using the
‘Marshmallow Schema Class’ that was defined in our model and only then
read or update data in the database. Next initialize the Flask
Application with the SQLAlchemy database object.
vim app/__init__.py

In the above file I have also defined the API URL ‘/api/v1/users’.
This URL is as per the WhiteHouse RESTFUL API guidelines on Github where
‘v1’ is the version number and ‘users’ is the resource. The CRUD API
calls need to be to made to /api/v1/users.json and
/api/v1/users/{id}.json for all and single user respectively.
Finally create the database tables and columns with the Flask-Migrations extension as follows:
vim migrate.py

Below is a small demo video using the PostMan API client of the REST API callsPart 2 : Making CRUD RESTFUL API calls with the Angularjs $Resource Service
The Angularjs $Resource Service provides an easy way to make RESTFUL API
calls without having to define each method. It has the HTTP methods
defined and available by default, you can also define your own method if
required.

$scope.loadUser = function() { //Issues a GET request to /api/v1/users/{user-id}.json. Fetches a single user

$scope.user = User.get({ id: $stateParams.id },

function() {}, function(error) {

toaster.pop({

type: 'error',

title: 'Error',

body: error,

showCloseButton: true,

timeout: 0

});

});

};

$scope.loadUser();

});

//Tutorial at Techarena51.com

Along with $resource service I have also used the ‘ui-router’ module for routing.
With ‘ui-router’ I can define states for each of the CRUD routes except
for DELETE and then use them to transition between states. You can check
the demo on my Application for a live example of how they work. You can also refer to the link at the end of this article for more information
Lastly create the relevant HTML pages to Add, View and Update your Application.

Restart the Flask server and you should be able to view your CRUD application at http://localhost:5000

python run.py

Below is a video of a working Application
The complete code is available at https://github.com/Leo-G/Flask-Scaffold/.
An easier way to build CRUD Applications with Flask and Angularjs is
with Flask-Scaffold. Just provide your Database definitions in a YAML
file and it will generate all the code including the valiadations for
you. The instructions are at https://github.com/Leo-G/Flask-Scaffold/blob/master/README.md
You can also add Authentication to your API Application with JSON Token Based Authentication.
Reference:
https://docs.angularjs.org/api/ngResource/service/$resource
https://github.com/angular-ui/ui-router
https://github.com/WhiteHouse/api-standards
http://flask-restful-cn.readthedocs.io/en/0.3.4/
http://marshmallow.readthedocs.io/en/latest/