title: How do I use Angular JS with my Restful API
body: <p>I have developed a restful api using flask and python. I have created an html page that will display my groups table and allow me to add and delete a group. I want to use Angularjs to take the data from my restful api and display it on my html page and allow me to Add, Update, Delete and view my groups from my group table. Below is my Restful API</p>
  
  <pre><code>import mysql.connector
  from flask import Flask, abort, jsonify, request
  
  # Global Constants
  VERSION = 'v1'
  BASE_URI = '/api/' + VERSION
  GROUPS = '/groups'
  GROUP = '/group'
  URI_FOR_ALL_GROUPS = BASE_URI + GROUPS
  MYSQL_USER = 'root'
  MYSQL_PASS = ''
  MYSQL_HOST = 'localhost'
  MYSQL_DB = 'football'
  
  # Creating an instance of Flask
  app = Flask(__name__)
  
  
  def create_connection():  # Method to Create Connection to Database
      return mysql.connector.connect(user=MYSQL_USER,
                                     password=MYSQL_PASS,
                                     host=MYSQL_HOST,
                                     database=MYSQL_DB)
  
  
  # POST: Adding a new Group
  @app.route(URI_FOR_ALL_GROUPS, methods=['POST'])
  def add_group():
      # Method to add Group
      if not request.json:
          abort(400)
      conn = create_connection()
      cursor = conn.cursor()
      query = "INSERT INTO groups(group_name, team_a," \
              "team_b, team_c, team_d)" \
              "values (%s, %s, %s, %s, %s)"
      cursor.execute(query, (request.json['group_name'],
                             request.json['team_a'],
                             request.json['team_b'],
                             request.json['team_c'],
                             request.json['team_d']))
      id = cursor.lastrowid
      conn.commit()
      query = "SELECT * FROM groups WHERE group_id=" + str(id)
      cursor.execute(query)
      row = cursor.fetchone()
      group = {}
      for (key, value) in zip(cursor.description, row):
          group[key[0]] = value
      conn.close()
  
      return jsonify(group), 201
  
  
  # GET: Get a single groups information
  @app.route(URI_FOR_ALL_GROUPS + '/&lt;int:id&gt;', methods=['GET'])
  def get_group(id):
      # Method to retrieve the information of a single group
      conn = create_connection()
      cursor = conn.cursor()
      query = "SELECT * FROM groups WHERE group_id=" + str(id)
      cursor.execute(query)
      row = cursor.fetchone()
      group = {}
      for (key, value) in zip(cursor.description, row):
          group[key[0]] = value
      conn.close()
  
      return jsonify(group), 200
  
  
  # GET Retrieve all the groups
  @app.route(URI_FOR_ALL_GROUPS, methods=['GET'])
  def get_groups():
      # Method to retrieve all groups
      conn = create_connection()
      cursor = conn.cursor()
      query = "SELECT * FROM groups"
      cursor.execute(query)
      rows = cursor.fetchall()
      groups = []
      for row in rows:
          dict = {}
          for (key, value) in zip(cursor.description, row):
              dict[key[0]] = value
          groups.append(dict)
      conn.close()
  
      return jsonify({'groups': groups}), 200
  
  
  # PUT: Updating a group
  @app.route(URI_FOR_ALL_GROUPS + '/&lt;int:id&gt;', methods=['PUT'])
  def update_group(id):
      # Method to update a group
      conn = create_connection()
      cursor = conn.cursor()
      query = "UPDATE groups SET group_name=%s, team_a=%s," \
              "team_b=%s, team_c=%s, team_d=%s " \
              "WHERE group_id=%s"
      cursor.execute(query, (request.json['group_name'],
                             request.json['team_a'],
                             request.json['team_b'],
                             request.json['team_c'],
                             request.json['team_d'], id))
      conn.commit()
      query = "SELECT * FROM groups WHERE group_id=" + str(id)
      cursor.execute(query)
      row = cursor.fetchone()
      group = {}
      for (key, value) in zip(cursor.description, row):
          group[key[0]] = value
      conn.close()
  
      return jsonify(group), 200
  
  
  # DELETE: Deleting a group
  @app.route(URI_FOR_ALL_GROUPS + '/&lt;int:id&gt;', methods=['DELETE'])
  def delete_group(id):
      # Method to delete a single group
      conn = create_connection()
      cursor = conn.cursor()
      query = ("DELETE FROM groups WHERE group_id = %d" % id)
      cursor.execute(query)
      conn.commit()
  
      return jsonify('Group Deleted'), 200
  
  if __name__ == '__main__':
      app.run(debug=True)
  </code></pre>
  
  <p>And this is the html page I created</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"&gt;&lt;/script&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Groups&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div ng-app = "app" ng-controller = "getGroups"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;th&gt;Group Name&lt;/th&gt;
              &lt;th&gt;Team A&lt;/th&gt;
              &lt;th&gt;Team B&lt;/th&gt;
              &lt;th&gt;Team C&lt;/th&gt;
              &lt;th&gt;Team D&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tbody ng-repeat = "groups in allGroups"&gt;
              &lt;tr ng-repeat = "item in groups"&gt;
                  &lt;td ng-bind = "item.group_name"&gt;&lt;/td&gt;
                  &lt;td ng-bind = "item.team_a"&gt;&lt;/td&gt;
                  &lt;td ng-bind = "item.team_b"&gt;&lt;/td&gt;
                  &lt;td ng-bind = "item.team_c"&gt;&lt;/td&gt;
                  &lt;td ng-bind = "item.team_d"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button ng-click = "deleteGroup(item.group_id)"&gt;Delete Group&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;br&gt;
  
      &lt;form name = "addGroup" ng-submit = "submit()"&gt;
          &lt;label&gt;Group Name: &lt;/label&gt;&lt;input type = "text" name = "Group Name" ng-model = "form.group_name" required ng-pattern = "[a-zA-z]*"&gt;&lt;br&gt;
          &lt;label&gt;Team A: &lt;/label&gt;&lt;input type = "text" name = "Team A" ng-model = "form.team_a"&gt;&lt;br&gt;
          &lt;label&gt;Team B: &lt;/label&gt;&lt;input type = "text" name = "Team B" ng-model = "form.team_b"&gt;&lt;br&gt;
          &lt;label&gt;Team C: &lt;/label&gt;&lt;input type = "text" name = "Team C" ng-model = "form.team_c"&gt;&lt;br&gt;
          &lt;label&gt;Team D: &lt;/label&gt;&lt;input type = "text" name = "Team D" ng-model = "form.team_d"&gt;&lt;br&gt;
          &lt;input type = "submit"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var app = angular.module('app',[]);
  
      app.controller('getGroups', function($scope, $http)
      {
          $http({
              method: "GET",
              url: "http://127.0.0.1:5000/api/v1/groups"
          }).then(function onSuccess(response) {
              $scope.allGroups = response.data;
          }, function error(response) {
              $scope.allGroups = response.statusText;
              alert("Something went wrong: Error No. 1")
          });
  
          $scope.submit = function()
          {
              $http({
                  method: "POST",
                  url: "http://127.0.0.1:5000/api/v1/groups",
                  data: $scope.form,
                  headers: { 'Content-Type' : 'application/json' }
              }).then(function onSuccess(response) {
                  alert("Group has been added");
              }, function error() {
                  alert("Something has gone wrong: Error No. 2");
              });
          };
  
          $scope.deleteGroup = function(id)
          {
              $http({
                  method: "DELETE",
                  url: ("http://127.0.0.1:5000/api/v1/groups" + id)
              }).then(function onSuccess() {
                  alert("Group has been deleted");
              }, function error() {
                  alert("Something went wrong: Error No. 3");
              });
          };
      });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I run my webpage, my alert displays with Error 1 and my groups are not shown on my table. Im not sure if I have left something out. My restful api works correctly and I can view the table contents on api/v1/groups.</p>
  
  <hr>
  
  <p>Sorry my bad, this is the error I get on the browser console</p>
  
  <blockquote>
    <p>Error: [$parse:ueoe] <a href="https://errors.angularjs.org/1.7.5/$parse/ueoe?p0=%5Ba-zA-z%5D*" rel="nofollow noreferrer">https://errors.angularjs.org/1.7.5/$parse/ueoe?p0=%5Ba-zA-z%5D*</a> at angular.js:99 at p.consume (angular.js:16101) at primary (angular.js:15976) at p.unary (angular.js:15960) at p.multiplicative (angular.js:15950) at p.additive (angular.js:15938) at p.relational (angular.js:15929) at p.equality (angular.js:15920) at p.logicalAND (angular.js:15912) at p.logicalOR (angular.js:15904) "" </p>
  </blockquote>
  
  
  
  <blockquote>
    <p>Access to XMLHttpRequest at '127.0.0.1:5000/api/v1/groups' from origin 'localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.</p>
  </blockquote>