In this tutorial we will see the integration of AngularJS with PHP REST. We are going to create CRUD application using PHP REST API on server side and AngularJS is encapsulated within html file on client side. Thus the client will communicate with server asynchronously using AngularJS $http service.

Please read REST API CRUD Example in PHP, MySQL for server side before reading this tutorial.

If you need AngularJS with Spring MVC, you can check here http://www.jeejava.com/spring-mvc-angularjs-crud-example/

AngularJS module

The angular.module is a global place for creating, registering and retrieving AngularJS modules. A module is a collection of services, directives, controllers, filters, and configuration information. angular.module is used to configure the $injector.

A module can be used by AngularJS to bootstrap an application. AngularJS loads a module by passing the module name to ng-app directive and it is the main entry point for the application.

Create a new module using the following code snippets

<project root directory>/assets/js/app.js

'use strict' does the following

  • It catches some common coding bloopers, throwing exceptions.
  • It prevents, or throws errors, when relatively “unsafe” actions are taken (such as gaining access to the global object).
  • It disables features that are confusing or poorly thought out.

AngularJS Service to communicate with Server

<project root directory>/assets/js/departmentService.js

Note: do not forget to change the value of REST_SERVICE_URI

In AngularJS based applications, the preferred way to communicate with server is using AngularJS built-in $http Service. AngularJS $http service allows us to communicate with server endpoints using XHR [browser’s XMLHttpRequest Object] API. The $http API is based on the deferred/promise APIs exposed by the $q service(https://docs.angularjs.org/api/ng/service/$q) which is an implementation of Promise interface, which is a standardized way of dealing with asynchronous calls in JavaScript.

AngularJS Controller to handle user’s request/response

<project root directory>/assets/js/departmentController.js

Controllers are considered as the driver for Model and View changes. They are the gateway between the model (the data in our application), and the view (whatever a user sees on screen and interacts with). The core responsibilities includes, providing data to UI, managing presentation logic, such as which element to show/hide, what style to apply on them, etc, handling user input, such as what happens when a user clicks something or how a text input should be validated, processing data from user input to be sent to server etc.

View for PHP application

<project root directory>/index.html

Now run the php application and play with it.

If you need AngularJS with Spring MVC, you can check here http://www.jeejava.com/spring-mvc-angularjs-crud-example/

Thanks for reading.

 

Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.