AngularJS: Alerts Service

by Sajeetharan Sinnathurai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<div ng-controller="FooCtrl">
    <a class="btn btn-success" ng-click="doGood()">Do Good</a>
    <a class="btn btn-danger" ng-click="doEvil()">Do Evil</a>
    <a class="btn pull-right" ng-click="reset()">Reset</a>
</div>
<hr>
<div ng-controller="AlertsCtrl">
    <div ng-repeat="(key,val) in alerts" class="alert {{key}}">
        <div ng-repeat="msg in val">{{msg}}</div>
    </div>
</div>

CSS

body {padding-top:20px;}

JavaScript

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

function AlertsCtrl($scope, alertsManager) {
    $scope.alerts = alertsManager.alerts;
}

function FooCtrl($scope, alertsManager) {
    $scope.doGood = function() {
        alertsManager.addAlert('Yay!', 'alert-success');
    };
    $scope.doEvil = function() {
        alertsManager.addAlert('Noooo!', 'alert-error');
    };
    $scope.reset = function() {
        alertsManager.clearAlerts();
    };
}

App.factory('alertsManager', function() {
    return {
        alerts: {},
        addAlert: function(message, type) {
            this.alerts[type] = this.alerts[type] || [];
            this.alerts[type].push(message);
        },
        clearAlerts: function() {
            for(var x in this.alerts) {
           delete this.alerts[x];
        }
        }
    };
});