Pogo and Angular

Introduction

Here we are going to compare two approaches to developing in Pogo. First is pure Pogo Stack, and the second is Pogo with Angular.

In Pogo approach there are three files:

  • Page shell
  • Table of customers (in HTML)
  • JavaScript
# Pogo page shell

list_customers

<?
?><%
%>
<html>
<head>
   <title>Customers</title>
   <%= psp_js_functions('-', CU) %>
</head>

<body>
   <p>Filter: <input type="text" size="10"
      onkeyup="current_filter = this.value; return f_load_table('id_customers_table');"
      autofocus></p>

   <div id="id_customers_table">
   <%= psp_list_customers_table('-', CU) %>
   </div>
</body>
</html>
# Pogo table

list_customers_table

p_filter varchar -

<?
   r record;
?><%
%>
<table>
<tr>
   <th>Number</th>
   <th>First</th>
   <th>Last</th>
</tr>
<%
   for r in
   (
      select * from customers
      where
      (
         p_filter = '-'
         or first_name ilike '%' || p_filter || '%'
         or  last_name ilike '%' || p_filter || '%'
      )
   )
   loop
%>
<tr>
   <td><%= r.customer_number %></td>
   <td><%= r.first_name      %></td>
   <td><%= r.last_name       %></td>
</tr>
<%
   end loop;
%>
</table>
# Pogo js functions

js_functions

<?
?><%
%>
<script>
"use strict";

var current_filter = "";

function f_load_table(p_id)
{
   var request = new XMLHttpRequest();
   var parameters_string = "p_filter=" + current_filter;

   request.onreadystatechange = function()
   {
      if (request.readyState == 4 && request.status == 200)
      {
         document.getElementById(p_id).innerHTML = request.responseText;
      }
   };

   request.open("POST", "list_customers_table", true);
   request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   request.send(parameters_string);
}

</script>

In Angular, there are four files:

  • Page shell
  • Table of customers (in JSON)
  • Angular app
  • Angular controller
# Angular page shell

list_customers

<?
?><%
%>
<html>
<head>
   <title>Customers</title>
   <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>

   <div ng-app="customers_app" ng-controller="customers_controller">

   <p>Filter: <input type="text" size="10" ng-model="filter"
      ng-change="f_show_results();" value=""
      autofocus></p>

   <table>
      <tr>
         <th>Number</th>
         <th>First</th>
         <th>Last</th>
      </tr>
      <tr ng-repeat="r in records">
         <td>{{ r.customer_number }}</td>
         <td>{{ r.first_name      }}</td>
         <td>{{ r.last_name       }}</td>
      </tr>
   </table>

   </div>

<script src="customers_app.js"></script>
<script src="customers_controller.js"></script>

</body>
</html>
# Angular JSON

list_customers_table_json

p_filter varchar -

<?
   j json;
?><%

   j := (
      select array_to_json(array_agg(row_to_json(x)))
      from
      (
         select * from customers
         where
         (
            p_filter = '-'
            or first_name ilike '%' || p_filter || '%'
            or  last_name ilike '%' || p_filter || '%'
         )
      ) x 
   );

   return pogo_return_OK('{ "records": ' || j || ' }');
%>
# Angular app customers_app.js

var app = angular.module("customers_app", []);
# Angular controller customers_controller.js

app.controller
(
   "customers_controller",
   function($scope, $http)
   {
      $scope.filter = "";

      $scope.f_show_results = function()
      {
         $http.get("list_customers_table_json?p_filter=" + $scope.filter)
            .success(function (response)
            {
               $scope.records = response.records;
            });
      };

      $scope.f_show_results();
   }
);