The document outlines the process of building a robust platform using Flask as the backend and AngularJS for the frontend, providing a REST API architecture. It includes installation steps, code snippets for creating a basic application, as well as methods for integrating with a MySQL database. Additionally, it touches on advanced topics such as object-relational mapping and adding security features to Flask applications.

1. Flask & Angular - An
Approach to Build Robust
Platforms
A Rest API Architecture with FLASK
&
UI Interface in AngularJS
By : Ayush Sharma @ayusharma_

3. REST APIs
● Representational state transfer Architecture
● GET
● PUT
● POST
● PATCH
● DELETE

4. GIT Repository
Clone the existing repository of git:
https://github.com/ayusharma/flask-angular

5. What is FLASK ?
Flask is a microframework for Python based on Werkzeug, Jinja 2 and good
intentions. And before you ask: It's BSD licensed!
It is easy to learn and Simple to implement.
It is absolutely right that “Flask is Fun”

6. Requirements
● Python
● Database (MySQL)
● An IDE (Sublime Text Editor)
● A Browser
● REST API Browser (POSTMAN)

7. Let’s START !
Installing Essential Packages
apt-get install python-setuptools
apt-get install pip
Creating Virtual Environment
virtualenv venv
Activate Virtual Environment
source venv/bin/activate

8. HELLO WORLD !
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!"
if __name__ == "__main__":
app.run()

9. Running Your Application
Install Flask
pip install flask
Run App
python app.py
Visit in Browser
http://localhost:5000

10. Your First API - Route
@app.route(“/myapi”):
def myapi():
my_obj = {}
my_obj[‘name’] = ‘Ayush’
my_obj[‘city’] = ‘Jaipur’
return json.dumps(my_obj)
//add import json

11. Integrating MySQL
// pip install flask-mysqldb
mysql = MySQL(app)
app.secret_key = 'superzoman'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'test'

12. Methods = GET/PUT/POST/DELETE
@app.route("/db",methods=['GET'])
def db_info():
k = cur.execute('''SQL Query Here”)
return <Values>
// You can perform many ops like JSON.dumps and Validations

13. Angular JS
● Javascript Framework
● developed in 2009 by Misko Hevery and Adam Abrons
● maintained by Google
● Support MVC
● Modularize Codebase
● AngularJS is cross-browser compliant
● Opensource and Free

14. Let’s Move to Front End - AngularJS

15. Angular JS HTML - GET
<div
ng-model="main.tabledata">
<div ng-repeat=" x in
main.tabledata">
ID: {{ x.id }}
Name: {{ x.name }}
City: {{ x.city }}
</div>
</div>
.controller('MainCtrl',functio
n($scope,MainService){
MainService.getTables().then(f
unction(res){
$scope.main.da
tabase = res.data.name;
$scope.main.ta
bledata = res.data.table_data;
})
})
.factory('MainService',
function($http) {
var mainService = {};
mainService.getTables =
function() {
var req = {
method:'GET',
url:<API URL>,
};
return
$http(req).then(function(res){
return res;
});
};
return mainService;
})

16. ANGULAR JS - POST
<input type="text"
class="form-control"
placeholder="Name"
ng-model="main.personname">
<input type="text"
class="form-control"
placeholder="City"
ng-model="main.personcity">
<button class="btn btn-default"
type="button"
ng-click="post();">Submit!</but
ton>
.controller('MainCtrl',functi
on($scope,MainService){
$scope.post = function(){
MainService.insert(
$scope.main.personname,$scope
.main.personcity).then(functi
on(res){
console.log(“inserted”)
})
.factory('MainService',
function($http) {
var mainService = {};
mainService.insert =
function(name,city) {
var req = {
method:'POST',
url:<API URL>,
data:{
'name':name,
'city':city}
};
return
$http(req).then(function(res){
return res;});};
return mainService;
})

17. What You’ve learned
● REST API Architecture
● Flask
● Angularjs
● Mysql

18. Explore More
● ORM - Object Relation Mapping
● Flask Security
● Contribution to community - http://flask.pocoo.org/community/

19. ORM
Object-relational mapping (ORM, O/RM, and O/R mapping) in computer science is
a programming technique for converting data between incompatible type systems
in object-oriented programming languages. This creates, in effect, a "virtual object
database" that can be used from within the programming language. There are
both free and commercial packages available that perform object-relational
mapping, although some programmers opt to create their own ORM tools.

20. Flask Security
Flask-Security allows you to quickly add common security mechanisms to your Flask application. They include:
1. Session based authentication
2. Role management
3. Password encryption
4. Basic HTTP authentication
5. Token based authentication
6. Token based account activation (optional)
7. Token based password recovery / resetting (optional)
8. User registration (optional)
9. Login tracking (optional)
10. JSON/Ajax Support

21. Questions
It’s been a great learning with all of you. I would be happy to
answer your questions.
Thanks !