Home » Php » php – AngularJS and Codeigniter – Combination & Data Transfer

php – AngularJS and Codeigniter – Combination & Data Transfer

Posted by: admin July 12, 2020 Leave a comment

Questions:

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 MySQL database) and AngularJS as the frontend framework.
So my questions are: How would I accomplish this? I would I transfer the data between the two?

I wanna know a few details about it with examples because I can’t find a good video tutorial where they combine the two. (found some tutorial about laravel & angular, Ruby on rails and angular but not really into those yet).
If someone knows a good video tutorial or even a blog post explaining this, please provide a link.

Found a few combo projects on GitHub but without any explanation what and how it is done, they are not really useful.

The only thing I know about this is that I have to return the data as json but I am not sure how to do that.

Thanks!

How to&Answers:

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

 <body ng-app="app">
   <div ng-controller="MsgCtrl">
    <ul>
      <li ng-repeat="m in msg">{{m.title}}</li>
    </ul>
   </div>
 </body>

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

<body ng-app="app">
   <div ng-controller="MsgCtrl">
    <ul>
      <li ng-repeat="m in msg">
           {{m.title}}

           <a href="#" ng-click="delete(m.id)">Delete</a>
           <a href="#" ng-click="edit(m.id)">Edit</a>
      </li>
    </ul>

    <input type="text ng-model="create.title">
    <button type="submit" ng-click="formsubmit"> Submit </button>

     <input type="text ng-model="editc.title">
    <button type="submit" ng-click="editsubmit(editc.id)"> Submit </button>
   </div>
 </body>

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