Using favico.js with AngularJS

Few weeks ago I’ve created javascript library called favico.js that allows to animate favicon on your website, play videos in the favicon or stream your webcam stream to favicon. Some people have difficulties to integrate my library into AngularJS app.
angular_favico

Integrating favico.js into AngularJS app is really simple. The only thing you need, is to create an AngularJS service that will “encapsulate” favico.js. Services in AngularJS are singletons and thats great because if you want to use favico.js on your site you need to create only one instance of Favico object.

Basically you need to create service like this:

/**
 * Simple favicon service
 */
angular.module('favico.service', []).factory('favicoService', [
function() {
    var favico = new Favico({
        animation : 'fade'
    });

    var badge = function(num) {
        favico.badge(num);
    };
    var reset = function() {
        favico.reset();
    };

    return {
        badge : badge,
        reset : reset
    };
}]);

Then you can use this service in your controllers:

angular.module('app.controllers', ['favico.service']).controller('homeCtrl', ['$scope', 'favicoService', /**
 * Home view controller
 * @param {Object} $scope
 */
function($scope, favicoService) {
    //initial value
    $scope.count = 3;
    //badge +1
    $scope.plusOne = function() {
        $scope.count = $scope.count + 1;
        favicoService.badge($scope.count);
    };
    //badge -1
    $scope.minusOne = function() {
        $scope.count = ($scope.count - 1 < 0) ? 0 : ($scope.count - 1);
        favicoService.badge($scope.count);
    };
    //badge reset (count will be preserved)
    $scope.reset = function() {
        favicoService.reset();
    };
    //init value
    favicoService.badge($scope.count);
}]);

I’ve created example AngularJS app with two views that use favico.js service and changes badge number according to user actions.

Source code of the example app is on GitHub.
Working demo is on http://lab.ejci.net/favico.js/example-angular/.

If you have any questions feel free to ask.

2 thoughts on “Using favico.js with AngularJS

  1. Luís Felipe de Andade

    I`m really lucky, i was looking for your plugin documentation to make work using with angularjs and the first post of the page was this! Thank u

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *