Amitav Roy
Blog on web and travel
Single page app Angular JS $http inside Code Igniter using Twitter Bootstrap
Posted on 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.
You can download the code on this link on github: Code