angular-js-frontend
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.

SPA

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 a 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 was used as the 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:

Web Services

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

Slim Configuration
First, the Slim configuration:

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

POST
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: