AngularJS with Slim PHP Micro Framework

AngularJS is a popular front-end framework that can be used with many server-side technologies. In many AngularJS web applications, each web page is really a single-page application (SPA), so the role of the server-side is really an API consisting of a set of web services to interact with the server-side databases.


A recent web application that I constructed with AngularJS, has a master-detail structure consisting of two pages:

  1. master - list of items
  2. detail - item

Items can be edited and saved in the details screen. Limited editing of items can be done in the master screen.

The application structure was built starting from the angular-seed project, with two pages at the root, respectively:

  1. list.html
  2. index.html

Each page was an SPA. There were separate services for interacting with the server-side for the two pages, respectively.

The Server-Side

The server-side is to provide a set of REST web services that fetch data from a server-side database.

The Slim PHP micro framework was chosen to construct the server-side because it lends itself to simple construction of REST web services (see Writing a RESTful Web Service with Slim that we I used as basis).

The NotORM ORM was used to do the database calls in an abstract way that could be ported different types of database servers.

We have two tables list and item, corresponding to the master and detail, respectively.

AngularJS HTTP Calls

AngularJS services use $http to make web service calls for CRUD operations using GET, POST, PUT and DELETE. These calls fetch and send JSON data. Here is an example POST call to create a new item:

      \\ constantService store application configuration constants
var url = constantsService.baseUrl + "createItem";

var update = {
             "company" : "Twitter",
        "status" : "public",
     "country" : "USA"

var promise = $, update);

promise.success(function(data, status, headers, config){

                if (status == 200 && data["code"])
               $window.alert("Item created")    
                     $window.alert("Unable to create the item");


   promise.error(function(data, status, headers, config){

              $window.alert("Unable to create the item");


Web Services

The construction of the web services was just a few lines of code.

Slim Configuration

First, the Slim configuration:

require 'vendor/autoload.php';

$dsn = '';
$username = 'johndoe';
$password = 'secret';

$pdo = new PDO($dsn, $username, $password);
$db = new NotORM($pdo);

$app = new \Slim\Slim();
        'MODE' => 'production'

// this comes at the bottom of the file after all the web services were defined


A straightforward GET call that will fetch an item in a JSON format:

$app->get("/list", function () use ($app, $db) {

    $list = array();
    foreach ($db->items() as $item) {
        $item[]  = array(
           "itemNo" => $item["itemNo"],
           "company" => $item["company"],
           "country" => $item["country"],
           "status" => $item["status"]

    $app->response()->header("Content-Type", "application/json");
    echo json_encode(
        array("code" => true, "data" => $list)


A POST call transmitting data at the body required a conversion to the right format, using get_object_vars to convert the JSON at the body of the request into a PHP associative array:

$app->post("/item", function () use($app, $db) {

    $app->response()->header("Content-Type", "application/json");

       \\ obtain the JSON of the body of the request
    $post = json_decode($app->request()->getBody());

        \\ make it a PHP associative array
    $postArray = get_object_vars($post);

    $result = $db->list->insert($postArray);

    if ($result){ // send the id of the newly stored item
        echo json_encode(
            array("code" => true, "itemNo" => $result["id"])
       echo json_encode(array("code" => false));