[Flask] Help with simple example using AngularJS

Mon Jan 29 19:52:08 EST 2018

Hi:

I'm new to Flask and Angular and only done a little web-based programming,
so please forgive my lack of understanding. I've just cobbled together
examples from Flask as well as some examples online to come up with the
following.

I am interested in the most basic functionality of modifying a web form and
capturing that in the back-end to prove I can get data at least in one
direction:

*static/app.js*:

var app = angular.module('myApp', []);

app.controller('formCtrl', function($scope, $log, $http) {
    $scope.firstName = "John";

    $scope.SendData = function () {
        var data = { 'foo': $scope.firstName };

        var config = {
            headers : {
                'Content-Type':
'application/x-www-form-urlencoded;charset=utf-8;'
            }
        }

        $http.post('/', data, config)
            .success(function(results) {
            $log.log(results);
        })
        .error(function(error) {
            $log.log(error);
        });
    };
});

*static/index.html*:

<!doctype html>
<html>
    <head>
        <script src="
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js
"></script>
                <script src="
http://code.angularjs.org/1.5.3/angular-route.min.js"></script>
                <script src="/static/app.js"></script>
                <link rel="stylesheet" href="/static/style.css" />
    </head>
    <body>
        <div ng-app="myApp" ng-controller="formCtrl">
        <form>
            First Name: <input type="text" ng-model="firstName">

            <button data-ng-click="SendData()">
                Send
            </button>
        </form>

        <h1>You entered: {{firstName}}</h1>

        <div>
    </body>
</html>

*app.py*:

from flask import Flask, request, send_file

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    print('Request: %s' % request.method)
    if request.method == 'POST':
        data = request.form.to_dict()
        print('First name from form is %s' % data)
        return 'OK'
    else:
        return send_file("static/index.html")

if __name__ == "__main__":
    app.run(host='0.0.0.0', debug=True)

This code (sort of) works, but the message I get from index() is kind of
weird, so maybe I'm not packaging the data payload correctly? In this
example I just populate the form with a "C":

Flask log:

Request: GET
127.0.0.1 - - [29/Jan/2018 16:40:11] "GET /? HTTP/1.1" 200 -
127.0.0.1 - - [29/Jan/2018 16:40:11] "GET /static/app.js HTTP/1.1" 200 -
127.0.0.1 - - [29/Jan/2018 16:40:11] "GET /static/style.css HTTP/1.1" 200 -
Request: POST
First name from form is {'{"foo":"C"}': ''}
127.0.0.1 - - [29/Jan/2018 16:40:16] "POST / HTTP/1.1" 200 -

I'm not not quite sure why the key/value pair is embedded in a dictionary
as the key with an empty value.

Any pointers would be much appreciated!

Thanks,

-Clint
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/flask/attachments/20180129/214e7ae7/attachment.html>