Welcome to part 4 of my AngularJS tutorial. If you haven’t seen the other videos watch them first.

This time we’ll look at AngularJS services. I’ll create custom services as well as cover built in services like $window, $document, $location, $interval, $log, $exceptionHandler, $watch, $compile, and I’ll use $http to pull in data from a language translation web service. My translation web service was built in this tutorial.

/* Services are objects that bundle together methods that serve a specific function. Angular provides many built in services, but it is also easy for us to make our own custom services.

*/

varapp13=angular.module('app13',[]);

// Creates a simple service that provides a method

// we can use in other controllers, directives and

// filters. Services unlike factories don't return

// anything, but instead provide access to a

// single object that can be used by your entire

// application

app13.service('HelloService',function(){

this.helloService=function(){

console.log('Hello Service');

};

});

// Create a factory that creates an object, adds

// a method to it and returns that object

app13.factory('HelloFactory',function(){

varfactory={};

factory.helloFactory=function(){

console.log('Hello Factory');

};

returnfactory;

});

// Pass the service into the controller to

// access its method

app13.controller('mainCtrl',function(HelloService,HelloFactory){

HelloService.helloService();

HelloFactory.helloFactory();

});

angulartut14.html

angulartut14.html

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

<!doctype html>

<html ng-app="app14"ng-cloak>

<head>

<title>AngularJS Tutorial 14</title>

<style>

[ng\:cloak], [ng-cloak], .ng-cloak {

display:none;

}

.thick {

font-weight:bold;

}

</style>

</head>

<body>

<div ng-controller="mainCtrl">

<!-- Demonstrate $window -->

<input type="text"ng-model="userName" />

<button ng-click="greetUser(userName)">Hello</button>

<br><br>

<!-- Demonstrate $location -->

URL : {{currURL}}

<br><br>

Protocol : {{theProtocol}}

<br><br>

Host : {{currHost}}

<br><br>

Port : {{currPort}}

<br><br>

Path : {{currPath}}

<br><br>

Search : {{currSearch}}

<br><br>

<!-- Updates time using $interval -->

Current Time : {{time}}

<br><br>

<!-- The $log service -->

<label>Message:

<input type="text"ng-model="message" /></label>

<button ng-click="$log.log(message)">log</button>

<button ng-click="$log.warn(message)">warn</button>

<button ng-click="$log.info(message)">info</button>

<button ng-click="$log.error(message)">error</button>

<button ng-click="$log.debug(message)">debug</button>

<br><br>

<!-- The $exceptionHandler service -->

<button ng-click="throwException()">Throw Exception</button>

<br><br>

<!-- Angular automatically replaces < and > that is entered by the user to keep them from entering dangerous HTML. <p onmouseover=alert('Doing Bad Stuff')>Do Bad Stuff</p> isn't displayed as HTML unless you use ng-bind-html, but even then onmouseover is stripped away. -->