Implementing Simple Time Service
In this example you will build a simple time service that generates a local time object for different cities. Then in the AngularJS template you will use the time service in multiple controllers. The purpose is to give you a chance to see how easy it is to reuse an AngularJS service.
The code in Listing 10.3 implements a custom service named TimeService using the function TimeObj() to generate the service object. The code in TimeObj simply defines a list of cities with a time zone offset and provides the getTZDate() function to return a JavaScript Date object for a specific city. The getCities() function creates an array of the cities represented and returns it.
Notice that there are several controllers added to the application, including LAController, NYController, LondonController, and TimeController. These controllers are injected with the TimeService service and use it to set the current time for a city or, in the case of TimeController, all cities.
The code in Listing 10.4 implements an AngularJS template that displays the time for the LAController, NYController, LondonController, and TimeController controllers. In the case of TimeController, all times are displayed in a table using ng-repeat.
Figure 10.2 shows the resulting AngularJS application web page. Notice the different times represented.
Listing 10.3 service_custom_time.js: Implementing and Consuming a Custom AngularJS Service in Multiple Controllers
01 var app = angular.module('myApp', []);
02 function TimeObj() {
03 var cities = { 'Los Angeles': -8,
04 'New York': -5,
05 'London': 0,
06 'Paris': 1,
07 'Tokyo': 9 };
08 this.getTZDate = function(city){
09 var localDate = new Date();
10 var utcTime = localDate.getTime() +
11 localDate.getTimezoneOffset() *
12 60*1000;
13 return new Date(utcTime +
14 (60*60*1000 *
15 cities[city]));
16 };
17 this.getCities = function(){
18 var cList = [];
19 for (var key in cities){
20 cList.push(key);
21 }
22 return cList;
23 };
24 }
25 app.service('TimeService', [TimeObj]);
26 app.controller('LAController', ['$scope', 'TimeService',
27 function($scope, timeS) {
28 $scope.myTime = timeS.getTZDate("Los Angeles").toLocaleTimeString();
29 }]);
30 app.controller('NYController', ['$scope', 'TimeService',
31 function($scope, timeS) {
32 $scope.myTime = timeS.getTZDate("New York").toLocaleTimeString();
33 }]);
34 app.controller('LondonController', ['$scope', 'TimeService',
35 function($scope, timeS) {
36 $scope.myTime = timeS.getTZDate("London").toLocaleTimeString();
37 }]);
38 app.controller('TimeController', ['$scope', 'TimeService',
39 function($scope, timeS) {
40 $scope.cities = timeS.getCities();
41 $scope.getTime = function(cityName){
42 return timeS.getTZDate(cityName).toLocaleTimeString();
43 };
44 }]);
Listing 10.4 service_custom_time.html: AngularJS Template That Illustrates Injecting a Custom AngularJS Service into Multiple Controllers
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Custom Time Service</title>
05 <style>
06 span {
07 color: lightgreen; background-color: black;
08 border: 3px ridge; padding: 2px;
09 font: 14px/18px arial, serif; }
10 </style>
11 </head>
12 <body>
13 <h2>Custom Time Service:</h2><hr>
14 <div ng-controller="LAController">
15 Los Angeles Time:
16 <span>{{myTime}}</span>
17 </div><hr>
18 <div ng-controller="NYController">
19 New York Time:
20 <span>{{myTime}}</span>
21 </div><hr>
22 <div ng-controller="LondonController">
23 London Time:
24 <span>{{myTime}}</span>
25 </div><hr>
26 <div ng-controller="TimeController">
27 All Times:
28 <table>
29 <tr>
30 <th ng-repeat="city in cities">
31 {{city}}
32 </th>
33 </tr>
34 <tr>
35 <td ng-repeat="city in cities">
36 <span>{{getTime(city)}}</span>
37 </td>
38 </tr>
39 </table>
40 </div><hr>
41 <script src="http://code.angularjs.org/1.3.0/angular.min.js"></script>
42 <script src="js/service_custom_time.js"></script>
43 </body>
44 </html>
Figure 10.2 Using a custom AngularJS service in multiple controllers to display the time for different cities.