AngularJS Tutorial - 2

Now we will provide some real content!

The ContactsListController

We should now create a controller to fill the list of contacts, the 'ContactsListController'. It will need:

A way to invoke the contacts api. This will be achieved through the Angular $http service.
The access to the variable that will be rendered on the page. The $scope will fit for this.

Our controller will become:

app.controller('ContactsListController', function($scope, $http) {
    $http.get('api/contacts').success(function(data) {
        $scope.contacts = data.data;
    });
});

The $scope is the global...scope that will be visible inside the template that will be associated with the controller. We are invoking then the $http service telling that we are invoking with a get request the api 'http://myweb/api/contacts' and that the result will be put on the $scope in the contacts variable.

The contactsList.html

Now we should bind the ContactListController data to the contactList partial page. The $scope contain now the variable 'contacts'.

ng-repeat="contact in contacts": Given the $scope.contacts variable, the ng-repeat directive tells to iterate throguh the contacts and to setup for each <tr> the variable contact.
{{contact.name}}: This is the binding from the scope to the visualization. This must be corresponding to the data initialized through the controller and the ng-repeat.

<h2>Contacts</h2>
<table class="table table-condensed">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="contact in contacts">
            <td>{{contact.name}}</td>
            <td>{{contact.surname}}</td>
        </tr>
    </tbody>
</table>
<a class="btn btn-primary" >Add New Contact</a>

The routing

A route must then be associate the view and the controller, so we will modify the routing adding the the new ContactsListController. Note that we changed the controller from the previously used 'EmptyController'.

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {templateUrl: 'assets/partials/contactsList.html',controller: 'ContactsListController'})
        .otherwise({redirectTo: '/'});
});

The detail route

We should add a new route for the detail. This route will pass a parameter too, the 'contactId'. This is done specifying a value prepended with a colon (:). Of course we should create a controller and a partial view.

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {templateUrl: 'assets/partials/contactsList.html',controller: 'ContactsListController'})
        .when('/detail/:contactId', {
            templateUrl: 'assets/partials/contactsDetail.html',
            controller: 'ContactDetailController'})
        .otherwise({redirectTo: '/'});
});

Now when we require the page #/detail/[something] we will show the detail of a contact like in the image. Note that we use the :id thing in the path, this means that we will pass a parameter inside the url.

Note that the urls managed by the routing engine will be in the format

    #/[URL CALLED]

The ContactDetailController

We will then add the ContactDetailController as the controller for the detail view. Just to add some complexity. It will act exactly as the list controller. But we will call a different api. Another service is injected, the $routeParams. It contains all the data passed into the route, in our situation will contain the 'contactId' specified in the route declaration.

The 'contact' variable will be added on the $scope.

app.controller('ContactDetailController', function($scope, $http, $routeParams) {
    $http.get('api/contacts/?id='+$routeParams.contactId).success(function(data) {
        $scope.contact = data.data;
    });
});

The contactDetail.html

And now the detail for the contact, note the usage of the bindings like {{contact.name}} The contact variable, set on the scope will be used to fill the bindings.

<h2>Contact Detail</h2>
<label for="name">First Name:</label>
{{contact.name}}<br>
<label for="surname">Last Name:</label>
{{contact.surname}}<br>
<label for="address">Address:</label>
{{contact.address}}<br>
<label for="phone">Phone:</label>
{{contact.phone}}<br>

<a class="btn btn-primary" href="#/" >Back to list</a>

Note the link, of the button. It will handle the AngularJS routes, redirecting to the "root" aka the ContactListController and the associated partial page.

Screenshot

The new contactsList.html linked wit the details

Now we should add the link to the Details page to the contacts list, thus we will obtain the following:

<h2>Contacts</h2>
<table class="table table-condensed">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Go to detail</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="contact in contacts">
            <td>{{contact.name}}</td>
            <td>{{contact.surname}}</td>
            <td><a class="btn" href="#/detail/{{contact.id}}" >Detail</a></td>
        </tr>
    </tbody>
</table>
<a class="btn btn-primary" >Add New Contact</a>

Note the link, of the button. It will handle the AngularJS routes, redirecting to the "detail page" aka the ContactDetailController and the associated partial page.

Screenshot

Download the sample source

Last modified on: September 05, 2014