Click here to Skip to main content
14,157,357 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

11.2K views
2 bookmarked
Posted 24 Dec 2015
Licenced CPOL

AngularJS: Services: Tutorial 6

, 25 Dec 2015
Rate this:
Please Sign up or sign in to vote.
AngularJS: Services: Tutorial 6

Article Series

  1. Tutorial 1: Angular JS
  2. Tutorial 2: Controllers
  3. Tutorial 3: Controllers
  4. Tutorial 4: Controllers: Advanced
  5. Tutorial 5: Models
  6. Tutorial 6: Services

Prerequisites: Angularjs tutorial 5

In today's blog, we will look at how to call a service from your AngularJS application. For the sake of simplicity, instead of creating a REST service, I am utilizing a service from w3schools:

You can as well write your complex service and expose that to be used in your Angular App.
Angular has exposed a library called as $http: The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP.

Methods that are available (source Angular website):

We will be using a simple get for our demo purpose.

Our JS file would look as below:

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

Namespace.controller('StoreController', function ($http, $log, $q, $scope) {

    $scope.name = "Aditya S";
    $scope.bookarray = [];
    $scope.greeting = null;
    $scope.servicebook = null;

    $http.get('http://www.w3schools.com/angular/customers.php').
       success(function (data) {
           $scope.greeting = data;
       });
});

From the above, we are using a $http.get to retrieve the data from the service which would be available in “data”. We could then parse this and perform further operations or for simplicity, I have filled in data in greeting.

Our html page would look as below:

<!DOCTYPE html>
<html lang="en" ng-app="Namespace">

<head>
    <meta charset="utf-8">
    <title>Book Cart</title>
    	<link rel="stylesheet" type="text/css" href="css/templates.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js">

    </script>
    <script src="javascript/app.js"></script>
</head>

<body ng-model="Namespace" ng-controller="StoreController">

Hello {{name}}
<h1>Welcome to my book store</h1>
<div style="width: 100%;       overflow: scroll;">
<div ng-repeat="data in greeting.records">

The Name is <b>{{data.Name}}</b>

The Country is <b>{{data.Country}}</b></div>
</div>
</body>

</html>

I am using ng-repeat to parse through the results and display it. The output would be as below. Further, we would look how to create a mobile Application using Ionic in our further blogs.

service

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

adityaswami89
Software Developer (Senior)
India India
Passionate about Microsoft Technologies like WPF, Windows Azure, ASP.NET, Win Phone and also on Cross platform Mobile Apps, Mongo DB's, IOT & WOT. I love learning and working with (or) Creating Design Patterns . Writer | Technology Evangelist | Technology Lover | Microsoft Developer Guidance Advisory Council Member | Cisco Champion | Speaker |

Blog : http://adityaswami89.wordpress.com/

You may also be interested in...

Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.190518.1 | Last Updated 25 Dec 2015
Article Copyright 2015 by adityaswami89
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid