angular-notifier's Introduction

Angular Notifier

AngularJS simple notifications service

Live demo

See demo

Getting started

Dependencies

The only required dependencies are:

AngularJS (tested with version 1.2.7)
AngularAnimate (tested with version 1.2.7) No dependencies on jQuery!

Download

Manually

The files can be downloaded from:

Minified JS and CSS for production usage
Un-minified JS and CSS for development

With BowerJS

$ bower install angular-notifier

Installation

Include the JS and CSS file in your index.html file:

<link rel="stylesheet" href="angular-notifier.min.css">
<script src="angular-notifier.min.js"></script>

Declare dependencies on your module app like this:

angular.module('myModule', ['llNotifier']);

Usage

Simple usage

Inject the notifier service and notify by supplying with a String as a parameter like this:

app.controller('demoCtrl', function($scope, notifier) {
    $scope.demoText = 'foobar';
    $scope.notify = function() {
        notifier.notify($scope.demoText);
    };
});

Custom notifications

Inject the notifier service and notify by supplying with a config Object as a parameter like this:

app.controller('demoCtrl', function($scope, notifier) {
    $scope.demoNotification = {
        template: 'Custom notification',
        hasDelay: true,
        delay: 3000,
        type: 'info',
        position: 'top center'
    };
    $scope.customNotify = function() {
        notifier.notify($scope.demoNotification);
    };
});

Defining your own scope

You can put your own scope in the config object like this:

app.controller('demoCtrl', function($scope, notifier) {
    var notification = {
        template: '<h3 ng-click="openNestedNotification()">Click me!</h3>',
        scope: {
            openNestedNotification: function() {
                notifier.notify({template: 'I am a nested notification!', type: 'success'});
            }
        },
        hasDelay: false
    };
    $scope.nestedNotification = function() {
        notifier.notify(notification);
    };
});