Implementing a Simple Application That Uses All Four Types of Services
In this example you will build constant, value, factory, and service services. The purpose is to give a chance to see how each can be implemented, as well as the perspective of using multiple types of services in your applications.
The code in Listing 10.1 shows an example of integrating value, constant, factory, and service services into a single module. The example is very basic and easy to follow. Notice that censorWords and repString are injected into and used in the factory and service definitions.
Lines 4–13 implement a factory service that returns a function that censors a string. Notice that line 26 calls the factory directly to censor the string.
Lines 14–25 implement a service service by first defining the CensorObj object constructor and then, on line 26, registering the service to the application. The CensorObj object defines two functions: censor(), which censors the words in a string, and censoredWords(), which returns the words that will be censored.
In lines 27 and 28 the censorS and censorF services are injected into a controller. The controller then can utilize the custom services by calling censorF() directly in line 34 and calling censorS.censor() in line 35.
The code in Listing 10.2 implements an AngularJS template that displays the censored words and provides a text input to type in a phrase. The phrase is displayed twice, once censored by censorF and once by censorS. Figure 10.1 shows the AngularJS application in action.
Listing 10.1 service_custom_censor.js: Implementing and Consuming Multiple Custom Services in an AngularJS Controller
01 var app = angular.module('myApp', []);
02 app.value('censorWords', ["can't", "quit", "fail"]);
03 app.constant('repString', "****");
04 app.factory('censorF', ['censorWords', 'repString',
05 function (cWords, repString) {
06 return function(inString) {
07 var outString = inString;
08 for(i in cWords){
09 outString = outString.replace(cWords[i], repString);
10 }
11 return outString;
12 };
13 }]);
14 function CensorObj(cWords, repString) {
15 this.censor = function(inString){
16 var outString = inString;
17 for(i in cWords){
18 outString = outString.replace(cWords[i], repString);
19 }
20 return outString;
21 };
22 this.censoredWords = function(){
23 return cWords;
24 };
25 }
26 app.service('censorS', ['censorWords', 'repString', CensorObj]);
27 app.controller('myController', ['$scope', 'censorF', 'censorS',
28 function($scope, censorF, censorS) {
29 $scope.censoredWords = censorS.censoredWords();
30 $scope.inPhrase = "";
31 $scope.censoredByFactory = censorF("");
32 $scope.censoredByService = censorS.censor("");;
33 $scope.$watch('inPhrase', function(newValue, oldValue){
34 $scope.censoredByFactory = censorF(newValue);
35 $scope.censoredByService = censorS.censor(newValue);
36 });
37 }]);
Listing 10.2 service_custom_sensor.html: AngularJS Template That Illustrates the Interaction of Multiple Custom Services in an AngularJS Controller
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Custom Censor Service</title>
05 <style>
06 p { color: red; margin-left: 15px; }
07 input { width: 250px; }
08 </style>
09 </head>
10 <body>
11 <div ng-controller="myController">
12 <h3>Custom Censor Service:</h3>
13 Censored Words:<br>
14 <p>{{censoredWords|json}}</p>
15 <hr>
16 Enter Phrase:<br>
17 <input type="text" ng-model="inPhrase" /><hr>
18 Filtered by Factory:
19 <p>{{censoredByFactory}}</p>
20 Filtered by Service:
21 <p>{{censoredByService}}</p>
22 </div>
23 <script src="http://code.angularjs.org/1.3.0/angular.min.js"></script>
24 <script src="js/service_custom_censor.js"></script>
25 </body>
26 </html>
