angular js single page application part 2

Continuing our project from part 1, before create more features for this Angular application we need to make some application configurations such as routings. Angular routing comes in a separate package, so lets install this first:

Looking at the code you can see that we use ‘ngRoute’ as one of the dependencies tell angular that we loaded Angular Route js file and use it.
Then we have our configuration block as config function. This is where we setup different routes that the application going to accept and respond. The config function takes couple of parameters, here we use $routeProvider and $locationProvider for now. After that we are using the $routeProvider to setup that when the browser calls “/contacts” from URL the application will responds by sending the list.html file and control the content of the html file dynamically as it passed through the controller function that here we called “ListController”.

Next update the main.html file to add a place to render the list.html file, in other words you can view the main.html file as the main frame of the application where the content within the page are dynamically replaced by different template that in this case is our list.html file content. So add the following inside the main.html file:

Next it is necessary to create the controller function that takes care of list.html file data content. Under the public/js directory create controllers.js file so we can add all the different controllers into a separate file to keep the code neat, then add the following in the file: