Contact Manager – written in AngularJS, Express and MongoDB – Episode 3

This is the final article explaining how to view certain contacts inside the Contact Manager. In order to achieve this certain bit of functionality, we need to introduce routing at the AngularJS side as well followed by the routing introduced in the first part of this article.

Routing in AngularJS cannot be any simpler - everything is achieved via the $route service. There are lots of great articles out there that explain to you how you can use this particular service as well as how you can configure your routes under the $routeProvider service.

In light of all the above (I, of course assume, that you've read all the documentation) we need to extend our script from the example in the previous post:

angular.module('contactmanager', ['filters']).config(function ($routeProvider) {
  $routeProvider
    .when('/', { controller: ListController, templateUrl: 'list.html' })
    .when('/contacts/', {
      controller: ListController,
      templateUrl: 'list.html',
    })
    .when('/contacts/:id', {
      controller: ViewController,
      templateUrl: 'contact.html',
    })
    .when('/add/', { controller: AddController, templateUrl: 'add.html' })
    .otherwise({ redirectTo: '/' });
});

We are instructing Angular which controller and template to load for each of the paths mentioned above.

Each and every controller that we have will allow us to call separate actions and their scopes will be valid for the particular html files only. As a start, let's have a look at the ViewController - that is, if you remember from the first article, will allow you to look at only one contact.

function ViewController($scope, $http, $routeParams) {
  $http({
    method: 'jsonp',
    url:
      'http://host:1222/contacts/' +
      $routeParams.id +
      '?callback=JSON_CALLBACK',
  })
    .success(function (data, status, headers, config) {
      $scope.contact = data;
    })
    .error(function (data, status, headers, config) {
      //do something to handle the error
    });
}

Any URL that matches the /contacts/:id pattern (where :id is effectively our _id coming from MongoDB) will be handled by the ViewController and load the contact.html.

A sample call to view a contact could look similar to this:

<a href="#/contacts/"></a>

We store the returned jsonp object against the contact scope so later on we can call that in our html file. Here's (a rather plain) file that uses the aforementioned contact scope:

<div>You are looking at : </div>

We have already setup the save method when we discussed the backend of this application, that function is responsible for receiving all the information and storing it in the backend mongo database. However, we need to handle the data addition from the frontend as well. As you can see above, we have another controller, namely AddController. This is the controller that will collect all the data from our form and submit that to the right backend route that will, in turn, write our data into the database.

function AddController($scope, $http, $location) {
  $scope.form = {};
  $scope.addContact = function () {
    $http.post('/contact', $scope.form).success(function (data) {
      $location.path('/');
    });
  };
}

And the representative html should look something similar:

<input input ng-model="form.name" name="name" />
<input ng-model="form.phone" name="phone" />
<button ng-click="addContact()">Add Contact</button>

$scope.form will collect all the information from the representative model via the html form that we have just created. We assign the addContact() method to a button that will call the post method from our API (again, please refer back to the first article). If we get a successful addition, we can redirect the user to our root path, which we can do via the $location service.

Well, that's it. I will leave you to figure out how to make the edit/delete controllers - trust me they are not that complicated at all. You'd just have to extend your routes, add methods and add further html templates as well that will allow you to manipulate the models you've created.