Click here to load reader

AngularJS with Slim PHP Micro Framework

Embed Size (px)

DESCRIPTION

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 database

Citation preview

  • 1. www.backand.com 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
  • 2. www.backand.com Each page was a SPA. There were separate services for interacting with the server-side for the two pages, respectively. If you know of other sites offering free Bootstrap templates, feel free to send me a link and I will add it to this growing list. 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:
  • 3. www.backand.com 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:
  • 4. www.backand.com 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: Contact Information Backand Inc. [email protected] www.backand.com Notice This document has been carefully compiled. The information in this guide does not constitute a warranty of performance. Furthermore, Backand reserves the right to revise this publication and make changes from time to time in the content thereof, without obligation to notify any person of such revisions or changes. Backand assumes no liability for losses incurred as a result of out-of-date or incorrect information in this guide. The software described in this guide is furnished under a license agreement and may be used only according to the terms of that agreement.