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:
Bower install angular-route
With that install add the new script tag into your main.html file.
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
We need to update the app.js file to use the new angular route functionality. Make the following changes in the app.js file:
angular.module('contactsApp',['ngRoute'])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/contacts', {
controller: 'ListController',
templateUrl: 'views/list.html'
});
$locationProvider.html5Mode(true);
});
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:
<!DOCTYPE html> <html lang="en" ng-app="contactsApp"> <head> <title>Contacts</title> <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" /> <base href="/"> </head> <body> <div class="container"> <div class="page-header"> <h1>Contacts</h1> </div> <div class="row"> <div class="col-sm-12" ng-view> </div> </div> </div> </body> <script src="lib/jquery/dist/jquery.min.js"></script> <script src="lib/bootstrap/dist/js/bootstrap.min.js"></script> <script src="lib/angular/angular.min.js"></script> <script src="lib/angular-route/angular-route.min.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> </html>
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:
angular.module(‘contactsApp’)
.controller(‘ListController’, function($scope) {
$scope.contacts = ["dummy contact 1", "dummy contact 2"];
});
Now lets go ahead and create the content of the list.html by adding the following into a list.html file under the public/views directory:
<table class="table table-hover table-bordered">
<tr ng-repeat="contact in contacts">
<td>
{{contact}}
</td>
</tr>
</table>
To test out application so far make sure you have added the new controller.js file into main.html to be loaded as well.
Run the application and go to http://localhost:9000/contacts to test your application.
Angular js Tutorial
Although it is just a table with dummy data but we will be sending data to Angular JS using REST API that we going to develop on the backend using node JS.
The way angular reacts with a REST database is through Angular Resource library, so we need to develop a REST API on the backend and then write some Angular Resource code to interact with backend.
So in next tutorial (Part 3) I will show you how to develop a simple REST API using Node JS and Express JS, which are connected to an actual database such as MySQL or PostgreSQL.
Find the source code on Github:
