Creating a Customized Service

In the previous posts on promises, we created a function "onceValuePromise" that would have to be repeated across multiple controllers in a more complete app (yuck).  The solution it to move this function into a customized AngularJS service <https://docs.angularjs.org/guide/services> and inject it into the controllers.

This amounts to creating the following customized service:

JavaScript

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// app/services/myFirebase.js (function() { angular.module('myApp') .factory('myFirebase', ['$q', function($q) {     return {         onceValuePromise: function (ref) {             var deferred = $q.defer();             ref.once('value', function(snapshot) {                 deferred.resolve(snapshot);             }, function(error) {                 deferred.reject(error);             });             return deferred.promise;         }     }; }]); })(); // EOF

And then injecting it into the updated controller as follows (also deleting the unused $q injection and "onceValuePromise" function).

JavaScript

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// app/controllers/wineriesCtrl.js (function() { angular.module('myApp') .controller('WineriesCntrl', ['$location','$window', 'myFirebase', function($location, $window, myFirebase) {       var ctrl = this;     var myDataRef;     ctrl.wineries;     ctrl.navigate = function(path) {         $location.path(path);            };     myDataRef = new $window.Firebase('https://wineapp.firebaseio.com');     myFirebase.onceValuePromise(myDataRef.child('wineries'))     .then(function(snapshot) {         ctrl.wineries = Object.keys(snapshot.val()).map(function(key) {             return {key: key, val: snapshot.val()[key]};         });     })     .catch(function() {     }); }]); })(); // EOF