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

Please read the following tutorials before reading this tutorial

Working with RESTful services in Codeigniter – GET example

Working with RESTful services in Codeigniter – POST example

Working with RESTful services in Codeigniter – PUT example

Working with RESTful services in Codeigniter – DELETE example

You can also check AngularJS PHP REST CRUD Example

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/contactService.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/contactController.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.

Now create ContactController class under <project root directory>/application/controllers directory

Update the <project root directory>/application/config/routes.php file to point the ContactController

$route['default_controller'] = 'contactcontroller';

Create below view file contact_crud.php under <project root directory>/application/views directory

Now run the Codeigniter 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.