AngularJS Tutorial - 1

First we will create a small REST service to store the data. Actually it will be simply a text file.

The Contacts API

The API is located at /api/contacts

The allowed verbs are:

GET: To retrieve all contacts. Accept a parameter "id" to get a specific contact.
POST: To save a new contact. Require a Contact item inside the POST data.
PUT: To update an existing contact. Require a Contact item inside the POST data and an "id" parameter to choose the Contact to modify
DELETE: To delete a specific contact. Accept a parameter "id" to specify who can be deleted.

The "id" parameter will be specified inside the query string (e.g. /api/contacts?id=123456)

As an alternative to PUT, when not available on the server, a POST can be sent adding the "request_method" parameter (e.g. /api/contacts?id=123456&request_method=PUT)

As an alternative to DELETE, when not available on the server, a GET can be sent adding the "request_method" parameter (e.g. /api/contacts?id=123456&request_method=DELETE)

The format of the Contact will be, in JSON:

    {
        "id":"21EC2020-3AEA-1069-A2DD-08002B30309D",
        "name":"James",
        "surname":"Kerr",
        "address":"28 Naughty Rd.",
        "phone":"+44-555-455-54"
    }

The format of a successful request will be, in JSON:

    {
        "result":"ok",
        "data":
        {
            ...
        }
    }

The format of a failed request will be, in JSON:

    {
        "result":"ko",
        "data":
        {
            "text":"Missing item with id: 'A920D9E4-C41E-451B-A969-5C7779F8988D'."
        }
    }

The index.html

This will be the main page or template that will be used to contain our single page application

ng-app="ContactsApp": Tells angular that the main module (that is the page application) will be ContactsApp
ng-view: The div with this attribute will be the container for the views instantiated by the routing engine
/assets/js/app.js: Our application javascirpt
angular.min.js: The Angular framework
bootstrap.min.css: Some bootstrap css to give a better appearance :P

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Contacts Application</title>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
    </head>
    <body ng-app="ContactsApp">
        <div class="container">
            <div ng-view></div>
        </div>
 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
        <script type="text/javascript" src ="assets/js/app.js"></script>
    </body>
</html>

The app.js

First the application 'ContactsApp' is created and assigned to the global variable "app". This is declared into the template with the "ng-app".

var app = angular.module('ContactsApp', []);

Then we should configure the RouteProvider. Its role is to define what should be rendered given a certain address. The address will be in the form "http://myweb/#/angular/route".

Given a route a controller must be given, to really "do something", and a view, to fill the "ng-view".

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

This means that when a page like "http://myweb/" is invoked, then the empty controller will be invoked and the contactList.html will be rendered. If no route match, then the default one will be used.

Note that the function declared within the "config" a parameter $routeProvider is declared.

Note that the controller is defined by name. So there will be no need for an already existing controller, and we could forget about the ordering of declarations inside the various Javascript functions.

The $routeProvider is an AngularJS service, and when the function is called Angular will search between its service the one matching the name "$routeProvider". This is the Dependency Injection.

Obviously we need to declare the "EmptyController", that actually does absolutely nothing. And does not need any parameter.

app.controller('EmptyController', function() {
    
});

The contactsList.html

This is for now only a stub, just to show something

    <h2>Contacts</h2>
    <table class="table table-condensed">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>James</td>
                <td>Kerr</td>
            </tr>
        </tbody>
    </table>
    <a class="btn btn-primary" >Add New Contact</a>

And for now it's done:

Screenshot

Download the sample source

Last modified on: September 04, 2014