Consuming Restful Web Services In AngularJS

This is a very small Illustration of calling web service (APIs) in angularJS. we are going to use a readily available API for this example. www.omdbapi.com is providing few APIs to get movie details, we are using one of their api in our AngularJS Api application.

Web API: http://www.omdbapi.com/?s=spiderman

<div ng-app="myRouteApp" ng-controller="RandomMovieList" class="content-area">
      <input type="text" ng-model="localList.search" class="search-query" id="projects_search" placeholder="Filter">
      <div>
          <ul class="list-group">
              <li class="list-group-item" ng-repeat="item in localList.Search | filter:localList.search">
                  <span class="badge">{{item.Year}}</span>
                  <!--<a href="{{item.Poster}}" target="_blank">
                      <span class="glyphicon glyphicon-picture"></span></a>-->
                  <img src="{{item.Poster}}" class="sml-poster" />

                  <a style="color: #808080" target="_blank" href="http://www.imdb.com/title/{{item.imdbID}}">{{item.Title}}</a>
              </li>
          </ul>
      </div>

Javascript

var mapp = angular.module("myRouteApp",[]);

mapp.controller("RandomMovieList",
            function($scope, $http) {
                $scope.pageno = 1;
                var names = ["batman", "superman", "kungfu", "fast", "love", "transporter", "x-men", "pirate"];
                var randNo = Math.floor((Math.random() * names.length) + 1);

                $http.get("http://www.omdbapi.com/?s=" + names[randNo - 1] + "&page=" + $scope.pageno)
                    .success(function(data) {
                        $scope.localList = data;
                    });
            });

Complete Code

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
        .content-area {
            width: 600px;margin: 0px auto;
        }
        .search-query {
            -ms-border-radius: 15px;
            border: solid 3px #0094ff;
            border-radius: 15px;
            margin: 10px 0px;
            padding: 5px 10px;
            width: 100%;
        }
        img.sml-poster {
            border-radius: 50%;
            height: 30px;
            width: 30px;
        }
    </style>
</head>
<body>
    <div ng-app="myRouteApp" ng-controller="RandomMovieList" class="content-area">
        <input type="text" ng-model="localList.search" class="search-query" id="projects_search" placeholder="Filter">
        <div>
            <ul class="list-group">
                <li class="list-group-item" ng-repeat="item in localList.Search | filter:localList.search">
                    <span class="badge">{{item.Year}}</span>
                    <!--<a href="{{item.Poster}}" target="_blank">
                        <span class="glyphicon glyphicon-picture"></span></a>-->
                    <img src="{{item.Poster}}" class="sml-poster" />

                    <a style="color: #808080" target="_blank" href="http://www.imdb.com/title/{{item.imdbID}}">{{item.Title}}</a>
                </li>
            </ul>
        </div>
    <script>
        var mapp = angular.module("myRouteApp",[]);
        mapp.controller("RandomMovieList",
            function($scope, $http) {
                $scope.pageno = 1;
                var names = ["batman", "superman", "kungfu", "fast", "love", "transporter", "x-men", "pirate"];
                var randNo = Math.floor((Math.random() * names.length) + 1);

                $http.get("http://www.omdbapi.com/?s=" + names[randNo - 1] + "&page=" + $scope.pageno)
                    .success(function(data) {
                        $scope.localList = data;
                    });
            });

    </script>
        </div>
</body>
</html>

If you need any assistance for this please contact me.