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
App.js
SearchController.js
SearchService.js
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>
var iTunesSearchApp = angular.module('iTunesSearchApp', []);
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;
});
});
};
}
);
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