Amitav Roy
Blog on web and travel
Single page app Angular JS $http inside Code Igniter using Twitter Bootstrap
Posted on 27 Sept 2012 by Amitav Roy

Angular JS is picking up a lot of appreciation for its powerful features. A javascript framework which makes HTML smarter. Following a MVC patter, this framework can not only reduce a hell lot of java script code in your application, but also give an very powerful user experience. In this tutorial, I will explain, how we can use Angular JS $http to get ajax data in JSON format and then quickly use that in our application inside Codeigniter environment using Bootstrap.
In this tutorial, I am starting with a very basic Code Igniter setup where I have included the Bootstrap CSS files and also, I am using the third party Code Igniter code which helps me create modular code. If you are not familiar with Code Igniter and it’s working, I would suggest you follow my tutorials on Code Igniter.
I have created a module named “Demo1”. The controller has two functions index and json_get_user. The index is being used to display the table of data which I am fetching through Ajax. And json_get_user is the function which simply takes the returned result from the model, converts it into a json_encoded string and returns to the ajax call.
class Demo1 extends CI_Controller { function __construct() { parent::__construct(); } function index() { $data['pagetitle'] = 'Demo page for Angular JS'; $data['viewname'] = 'index_v'; $data['scripts']['demo1'] = 'demo1'; $this-$gt;load-$gt;view('master',$data); } function json_get_user() { $this-$gt;load-$gt;model('Demo1_m','demo'); $data = $this-$gt;demo-$gt;get_json_data(); print json_encode($data); } }
Inside the mode, I have a function which queries the ‘temp’ table and returns all the records in the table.
class Demo1_m extends CI_Model { function __construct() { parent::__construct(); } function get_json_data() { $this-$gt;db-$gt;select(); $this-$gt;db-$gt;from('temp'); $this-$gt;db-$gt;order_by('name'); $query = $this-$gt;db-$gt;get(); return $query-$gt;result(); } }
Now comes the view page. In this right on the first line, I have declared the div to be an ng-app which tells the Angular framework to parse data from this div. And also, I have mentioned that this div is being controlled by a controller ‘demo_home’ using the Angular tag ng-controller.
Next, I have a line of text inside a p tag which prints out “My name is” and then the name inside curly brackets means I am using an angular js variable. If you see my controller, you will find that I have declared the variable value inside the controller as “Amitav”.
After that, I started a table tag with first tr being the table head. And then if you see, I have used the ng-repeat function from Angular JS which is similar to a foreach loop. Here I am printing out the details of the user like user.name, user.city as I have declared ng-repeat=”user in users”.
<div class="span6" ng-app ng-controller="demo_home"> My name is <em>{{name}}</em> <table class="table table-striped table-condensed table-bordered"> <tr> <th>Name</th> <th>Age</th> <th>City</th> <th>State</th> </tr> <tr ng-repeat="user in users"> <td>{{user.name}}</td> <td>{{user.age}}</td> <td>{{user.city}}</td> <td>{{user.state}}</td> </tr> </table> </div>
And last but not the least the javascript file. Here I have a single function demo_home as I have declared in the view template. Inside this, $scope.name is where I have initialized the value of name as ‘Amitav’ and used that variable to print out my name.
The next is using $http to get ajax data. I have passed base_url as a javascript variable in my master template which is helping me shorten the url. As you can see, the url is pointing to the second function inside the Demo1 controller ‘ json_get_user’ which is providing the json output. On success, I am assigning the JSON data to users variable inside the scope which is looped through inside the view using ng-repeat.
function demo_home($scope, $http) { $scope.name = 'Amitav'; // Initialising the variable. $scope.users = []; // Getting the list of users through ajax call. $http({ url: base_url + '/demo1/json_get_user', method: "POST", }).success(function (data) { $scope.users = data; }); }
And here is my end result a simple table with 5 user data.
