AngularJS and Codeigniter - Combination & Data Transfer

Question

I\'ve recently started learning AngularJS and I was thinking about creating an application using codeigniter as the backend (as an API to insert, update and delete data to a

Answer 1

Combination of CodeIgniter and AngularJS would help you to build new range of HTML5 Applications.

Unlike JQuery, AngularJS is a front-end framework, which depends on the data from backend, all communications from the front-end happen through a Controller Methods, there are operations for get and post in Angular.

CodeIgniter will act as an API which will output an json response to the Angular controller.

I believe json_encode(data) will output the required JSON string, which upon receipt by front-end, the data presentation layer of Angular takes care of the things /or if you'd like to perform any operation over the data, Angular can do that also.

I don't hold any links for this combination, because most people have shifted towards Ruby on Rails and AngularJS combination, fearing the stop of new release of CodeIgniter

Regret for not having any satisfactory links/blog post. If time allows me to make a proof of concept, I would be very happy to post the link.

Hope this helps.

EDIT

JSON

    [
        {"title": "t1"},
        {"title": "t2"}
        ....
     ]

HTML

 
   

    

      
{{m.title}}
    
   
 

JS

 var app = angular.module("app", []);

 app.controller("MsgCtrl", function($scope, $http) {
    $http.get('/index.php/ctrlname/methodname').
    success(function(data, status, headers, config) {
     $scope.msg = data;
    }).
    error(function(data, status, headers, config) {
     // log error
    });
 });

---

UPDATE

For Insert, Delete, Update using CodeIgniter and AngularJS

CodeIgniter Controller

class Msg extends CI_Controller {

    public function retrieveall() { .. } // Retrieves all Content from the DB
    public function create(){ .. } // Inserts the given data to DB
    public function retrieve($id){ .. } // Retrieves specific data from the DB
    public function update($id, $title){ .. } // Updates specific data from the DB
    public function delete($id){ .. } // Deletes specific data from the DB

    ...

}

CodeIgniter Routing

$route['m'] = "msg";
$route['m/(:any)'] = "msg/$1";

HTML

   

    

      

           {{m.title}}

           Delete
           Edit
      
    

    
     Submit 

     
     Submit 
   
 

JS

var app = angular.module("app", []);

 app.controller("MsgCtrl", function($scope, $http) {
    $http.get('/index.php/m/retrieveall').
    success(function(data, status, headers, config) {
     $scope.msg = data;
    }).
    error(function(data, status, headers, config) {
     // log error
    });

    $scope.delete = function($id) {
        $http.get('/index.php/m/delete/' + $id).
        success(function(data, status, headers, config)       {
        $scope.result = data;
    }

    $scope.edit = function($id) {
        $http.get('/index.php/m/retrieve/' + $id).
        success(function(data, status, headers, config)       {
        $scope.editc = data;
    }

    $scope.editsubmit = function($id) {
       $http.get('/index.php/m/update/' + $id +'/' + $scope.editc.title).
        success(function(data, status, headers, config)      {
        $scope.result = data;
    }
    }

    $scope.formsubmit = function($id) {
               $http.post('/index.php/m/create', {data: create}).
                success(function(data, status, headers, config)      {
                $scope.result = data;
         }
     }
 });

I believe this would help you understand. It's a bare example