By kswaughs | Thursday, June 9, 2016

AngularJS Rest Service Example

Use Case
1. Display the list of topics available in www.kswaughs.com
2. Allows user to enter the topic and prints error message if topic is not available
3. Make a rest service call with GET method and print titles of requested topic blog posts

HTML & AngularJS code
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
    var app = angular.module('AngularRestApp', []);
    app.controller('restExample', function($scope, $http) {

        $scope.topics = [ 'Java', 'Camel', 'Apache-CXF', 'Junit', 'REST', 'spring' ];

        $scope.submit = function() {

            if ($scope.topics.indexOf($scope.topic) == -1) {
                $scope.error = 'Entered Topic is Not available.' +
                               ' Also, It is a Case sensitive';
            } else {
                $scope.error = '';
                $scope.getBlogPosts();
            }
        };

        $scope.getBlogPosts = function() {

            $http.get(
                    "http://www.kswaughs.com/feeds/posts/summary/-/"
                            + $scope.topic + "?alt=json").then(
                    function(response) {
                        $scope.myData = response.data.feed.entry;
                        $scope.myPost = $scope.topic;
                    });

        };

    });
</script>
</head>
<body>
    <div ng-app="AngularRestApp" ng-controller="restExample">
        <b>List of topics available in www.kswaughs.com</b>
            <ul>
                <li ng-repeat="x in topics">{{$index+1}} {{x}}</li>
            </ul>
            <br/>    
            <label>Topic:</label>
            <input type="text" ng-model="topic" placeholder="Enter topic here"> 
            <input type="button" value="Get Posts" ng-click="submit()" />

        <p ng-bind="error" style="color:red"></p>
        <hr />
        <p>
            <b>Posts of {{myPost}} </b>
        </p>
        <ul>
            <li ng-repeat="entry in myData">
                <a ng-repeat="link in entry.link | filter:{rel: 'alternate'}"
                href="{{link.href}}">{{entry.title.$t}}</a>
            </li>
        </ul>
    </div>
</body>
</html>

DEMO


List of topics available in www.kswaughs.com
  • {{$index+1}} {{x}}

 


Posts of {{myPost}}


Recommend this on


12 comments:

  1. The blog you presented was very nice and interesting which helped me to get update on the recent technologies.
    Angularjs training in chennai | Angularjs course in Chennai

    ReplyDelete
  2. Your examples looking like expert advice buddy. Thanks for the post. AngularJS Training in Chennai | AngularJS Training

    ReplyDelete
  3. Your Blog is really amazing with smart content..Thanks for sharing this interesting Blog..
    ITIL Certification Exam Center in Chennai | ITIL Certification Training in Chennai

    ReplyDelete
  4. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
    Web Designing Training Institute in Chennai | DotNet Training Institute in Chennai | Java Training Institute in Chennai

    ReplyDelete
  5. There are so many useful information in your post, I like it all the time. And I want to share this boost app ranking with you, you can take a look. This is very useful.

    ReplyDelete
  6. I am really enjoying reading your well-written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.
    VMware Training in Chennai
    VMware Training
    Vmware cloud certification
    R Training in Chennai
    RPA Training in Chennai
    DevOps certification in Chennai
    VMWare Training in Anna Nagar
    VMWare Training in T Nagar
    VMWare Training in Adyar

    ReplyDelete
  7. Good job! Fruitful article. I like this very much. It is very useful for my research. It shows your interest in this topic very well. I hope you will post some more information about the software. Please keep sharing!!
    SEO Training in Chennai
    SEO Training in Bangalore
    SEO Training in Coimbatore
    SEO Training in Madurai
    SEO Course in Chennai
    SEO Course in Chennai
    SEO Course in Bangalore
    SEO Course in Coimbatore

    ReplyDelete
  8. Nice article. I liked very much. All the informations given by you are really helpful for my research. keep on posting your views.
    ccna course in Chennai
    ccna Training in Chennai
    ccna Training institute in Chennai
    ccna institute in Chennai
    Best CCNA Training Institute in Chennai

    ReplyDelete
  9. Nice article. I liked very much. All the informations given by you are really helpful for my research. keep on posting your views.
    ccna training in bangalore
    ccna training in coimbatore
    ccna training institute in coimbatore
    ccna course in Madurai
    ccna training in madurai

    ReplyDelete