AngularJS and Codeigniter - Combination & Data Transfer
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