Calling the Web API with Angular and expressjs

We’ll add an HTML page that uses AJAX to call the web API. We’ll use AngularJS to make the AJAX calls using $http module and also to update the page with the results.

But in order to be able to serve our html file we must add express.static Middleware let’s do it.

Configure a express.static to server index.html
Update the app.js file to add express.static:

  app.use(express.static(__dirname + '/www'));

Create index.html
Create www directory, then add index.html:

Now add studentApp.js file:

var uri = 'api/student/';

var app = angular.module("studentApp", []);

app.controller("studentCtrl", studentCtrl);

function studentCtrl($scope, $http) {

    $http.get(uri).then( getAll, fail);

    $scope.find = find;

    function find(id) {
        $http.get(uri + id).then(getStudent, fail);
    }

    function getAll(result) {
        $scope.students = result.data;
    }

    function getStudent(result) {
        $scope.result = result.data.name + ': ' + result.data.age;
    }

    function fail(error) {
        $scope.result = error.data;
    }

}

Getting a List of students
To get a list of students, send an HTTP GET request to “/api/student”.

The $http get function sends an AJAX request. For response contains array of JSON objects. The then function specifies a callback that is called if the request succeeds.

 $http.get(uri).then( getAll, fail);

    function getAll(result) {
            $scope.students = result.data;
        }

    function fail(error) {
        $scope.result = error.data;
    }

Getting a student By ID
To get a student by ID, send anHTTP GET request to /api/student/id, where id is the student ID.

function find(id) {
        $http.get(uri + id).then(getStudent, fail);
    }

    function getStudent(result) {
        $scope.result = result.data.name + ': ' + result.data.age;
    }

    function fail(error) {
        $scope.result = error.data;
    }

Running the Application
Run the app:

   $ node app.js

Load http://localhost:3000/ in a browser to see the output.

Search for a student with Id 01.