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.
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 }]);
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>