TinyCon module for AngularJS


Added by: Sam Deering





Stars: 1

Watchers: 1

Forks: 0

Module Description

Tinycon Angularjs

This nothing more than an Angular service for tommoor's TinyCon, who obviously deserves all credits.


From the TinyCon README:

A small library for manipulating the favicon, in particular adding alert bubbles and changing images. Tinycon gracefully falls back to a number in title approach for browers that don't support canvas or dynamic favicons.


Install angular-tinycon via Bower.

bower install tinycon-angularjs--save-dev

Include angular-tinycon.min.js in your application. The minified version already includes a version of Tincon so there is no need to include that file too.

<script src="components/tinycon-angularjs/dist/angular-tinycon.min.js"></script>

Add the module angularTinycon as a dependency to your application module.

var app = angular.module('app', ['angularTinycon']);

You can set Tinycon's options in the app config.

        width: 7,
        height: 9,
        font: "10px arial",
        colour: "#ffffff",
        background: "#549A2F",
        fallback: true

Take a look at Tinycon's README for all options

To use the API methods you have to call the anTinycon service in (for example) your controller.

API Documentation

###setBubble Change the value of the bubble

Usage: anTinycon.setBubble(number)

app.controller('MainCtrl', function($scope, anTinycon) {

###bind Bind a $scope key to the bubble.

Usage: anTinycon.bind(scope, key)

app.controller('MainCtrl', function($scope, anTinycon) {
    // Define
    $scope.number = 10;

    // Bind
    anTinycon.bind($scope, 'number');

Tinycon will automatically update the bubble's value when your key's value changes.


All credits for Tinycon go to tommoor.

Module stats last updated: 2015-05-28 10:23:02

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!