Hello everyone,

In today’s blog post ill teach you how to consume a RESTful web service with angular.js. We can use the previous api which we created for this exercise as well.

API -> API Mongoose + expressJS

Create an AngularJS Controller

First, we will create the AngularJS controller module that will consume the REST service:

angular.module('demo', [])
.controller('myUsers', function($scope, $http) {
    $http.get('http://localhost:3000/user').
        then(function(response) {
            $scope.users= response.data;
        });
});

and save it as Users.js

This controller module is represented as a simple JavaScript function that is given AngularJS’s $scope and $http components. It uses the $http component to consume the REST service at “/user”.

If successful, it will assign the JSON returned back from the service to $scope.users, effectively setting a model object named “users”. By setting that model object, AngularJS can bind it to the application page’s DOM, rendering it for the user to see.

Update the Application Page

angu2.PNG

Note the following two script tags within the head section.

 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js">
 src="Users.js">

The first script tag loads the minified AngularJS library (angular.min.js) from a content delivery network (CDN) so that you don’t have to download AngularJS and place it in your project. It also loads the controller code (Users.js) from the application’s path.

The AngularJS library enables several custom attributes for use with standard HTML tags. In index.html, two such attributes are in play,

  • The tag has the ng-app attribute to indicate that this page is an AngularJS application.
  • The

    tag has the ng-controller attribute set to reference myUser, the controller module.

Also note the two

 

tags which use placeholders (identified by double-curly-braces).

The ID is {{users.id}}
The name is {{users.name}}

The placeholders reference the id and nameproperties of the greeting model object which will be set upon successfully consuming the REST service.

Lets run the code and see.

Open cmd in you project location as before and run your server. In my case ill type node server.js in my cmd.

Once the app starts, open localhost:3000 n your browser, and check the result.                     You will see your detail which are fetched in to the database are shown in the body of the html.

If in any case you want to display all the data in your database in to html body we can use ng-repeat.

angu.PNG
 

Done & Dusted :). In my next blog post ill share how to create an api with Spring boot :O Till then good bye and happy coding =)

Brought to you by Yinza’s Class Room

Advertisements