Geek Answers Handbook

AngularJS and Codeigniter - Combination and Data Transfer

I recently started learning AngularJS, and I was thinking of creating an application using codeigniter as a backend (as an API for inserting, updating, and deleting data into a MySQL database) and AngularJS as an interface environment. So my questions are: how do I do this? Would I pass data between them?

I want to find out a few details about this with examples, because I cannot find a good video tutorial in which they combine the two. (found some tutorial about laravel and angular, Ruby on rails and angular, but not in them yet). If someone knows a good video tutorial or even a blog post explaining this, provide a link.

I found several combo projects on GitHub, but without any explanation as to what and how to do it, they are not very useful.

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

Thanks!

+7
angularjs php codeigniter
source share
1 answer

The combination of CodeIgniter and AngularJS helps you create a new range of HTML5 applications .

Unlike JQuery, AngularJS is an interface map that depends on data from the backend, all messages from the front-end come through Controller Methods , there are operations for receiving and publishing in Angular.

CodeIgniter will act as an API that will output a json response to an Angular controller.

I suppose that json_encode(data) will output the required JSON string, which, after the interface receives the Angular data presentation layer, will take care of things / or if you want to perform any operation on the data, Angular can also do this.

I have no references to this combination, because most people switched to a combination of Ruby on Rails and AngularJS , for fear of stopping the new version of CodeIgniter

I regret that you do not have satisfactory blog links / posts. If time allows me to make a proof of concept, I would be very happy to publish 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 with 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 will help you understand. This is a simple example.

+21
source share

More articles:


All Articles