Translate

Wednesday, August 28, 2013

JQuery Ajax using AngularJS example (AngularJS Jquery Ajax)

In this example I will call the webservice http://itunes.apple.com/search using jquery ajax to search itunes. This application will be built using angularJS.

The entire app can be downloaded here

This is how the page would look like after the search.















The folder that contains the html looks like this








This is what is inside the scripts folder









If you just open the html by double clicking, it should work.

The angularjs version I used was v1.0.7. The code for other files are shown below.

iTunesSearch.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="iTunesSearchApp">
<head>
    <title></title>
</head>
<body>
    <div ng-controller="SearchController">
        <input type="text" ng-model="searchTerm" />
        <button type="button" ng-click="Search()">iTunes Search</button>
        <div ng-bind-html-unsafe="searchResults"></div>
    </div>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="Scripts/app.js"></script>
    <script type="text/javascript" src="Scripts/SearchControllers.js"></script>
    <script type="text/javascript" src="Scripts/SearchServices.js"></script>

</body>
</html>




App.js

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


SearchController.js

iTunesSearchApp.controller('SearchController', function SearchController($scope, searchService) {

    $scope.Search = function () {

        $scope.searchResults = "Please Wait";
        var searchFor = $scope.searchTerm;
        searchService.CallWebService(searchFor,function (results) {
           
            $scope.$apply(function() {
                $scope.searchResults = results;
               
            });

        });
      
        };
    }
);

SearchService.js

var factory = iTunesSearchApp.factory('searchService', function () {


    return {

        CallWebService: function (searchTerm,callBack) {

            var webMethod = "http://itunes.apple.com/search?term=" + searchTerm;
            var displayHTML = "<br/>";

            $.ajax({
                type: "GET",
                url: webMethod,
                contentType: "application/x-www-form-urlencoded"
                dataType: "jsonp"
                success: function (msg) {


                    $.each(msg.results, function () {

                        $.each(this, function (key, value) {

                            displayHTML = displayHTML + key + ":" + value + "<br/>";
                        });
                        displayHTML = displayHTML + "<br/><br/>";
                    });
               
                    callBack(displayHTML);
            

                }, //success function ends here
                error: function (xhr, msg) {
                    callBack(msg);
                }
            }); //ajax function ends here


        }
    };
});

No comments:

Post a Comment

Comments will appear once they have been approved by the moderator