This is my second tutorial on Angular JS. In this tutorial I will show you how to get ajax data using Angular JS http service and how to use $route service – a very powerful and sleek feature where you can define multiple pages inside a single page, load different content without refreshing the page. Similar to how in gmail we can look at different mails without refreshing the page.
This is going to be a big tutorial as I am covering quite a few things so let me lay down where I am going to start from and what are the things that we are going to do in this tutorial.
The code which I will be writing is a continuation of my last tutorial. So, if you want to use something as a starting point, check this tutorial: Single page app Angular JS $http inside Code Igniter using Twitter Bootstrap and you will find the code at the bottom.
Here are the core things that we will be doing in Angular JS
- Define a module in Angular JS
- User $route service for deep linking
- Get ajax data using Angular JS $http service
To start with I have created a new module inside my Codeigniter application/modules folder called demo2. This is a fresh set of code as the last article is inside demo1 folder.
The controller has the index function which is kind of the main place holder page inside which we will use the deep linking angular js service. For example for me the urls are like:
http://localhost/tutorials/demo2#/view1 and http://localhost/tutorials/demo2#/view2.
Here demo2 uses the index function and then the rest is done using Angular JS juice. I also have view1 and view2 functions which works as partials which I will explain you in some time. And the last function is select_entries which returns a json formatter text.
The mode consist of only 1 function which is returning me a query result with a where condition where I am passing the ‘state’ to select the entries. A very simple code igniter active records query.
The view if you see is printing two links. The div container has ng-app=”demo2″ which means when I will declare a module in Angular JS, it will know which section of the application it needs to deal with. Inside this, if you see I have another div where I have set the ng-controller to “MyCtrl1”. Although it is not important but just to show that the controller’s scope is available here, I have added this and printed the base path.
As you have seen, I have two links in my view which will use two different partials (I am calling them partials, but actually they are nothing but two separate views. It’s just that while loading these two views, I am not using the master template here.
Then there are two functions which are the two controllers viz function MyCtrl1 and function MyCtrl2. In both the functions I have passed $scope and $http. The role of $http is to get the ajax data. You can compared it with $.ajax in jQuery.
I first initiated the entries. Then I made the ajax call. I have used the headers, url, method and the data parameters. And on the success I have assigned the data to entries. Remember, I have passed a json string. You can either pass HTML or JSON string.