Default styling shows messages fixed at the bottom left corner of the window.
Download the files from above or install via Bower
bower install --save angular-cog-alert
Add references to angular-cog-alert.css & angular-cod-alert.js.
<link rel="stylesheet" href="css/angular-cog-alert.css"> <script src="js/angular-cog-alert.js"></script>
Add dependency to your angular module
var myApp = angular.module('app', ['cogAlert']);
Add the cog-alerts directive to your page.
<cog-alerts></cog-alerts>
Inject the Alerting factory anywhere you want to add alerts, and then add them as necessary.
myApp.controller('myController', function ($scope, Alerting) {
$scope.doSomething = function () {
//do something
Alerting.addDanger('Danger Will Robinson!');
};
});
Use the errorHandler function on the Alerting factory to gracefully handle exceptions from rejected promises.
myApp.controller('serviceController', function ($scope, someService, Alerting) {
$scope.callService = function () {
someService.getSomePromise().then(function () {
//it worked!!
Alerting.addSuccess('Hooray for not sucking!');
})
.catch(Alerting.errorHandler('A promise has been broken, and I have died a little inside.'));
};
});
addAlert(type, message)
Add an alert of the given type to the list with the given message. Will apply the class .alert-[type] to the alert.
addInfo(message)
Add an info alert with the given message to the list. Uses the bootstrap class .alert-info.
addSuccess(message)
Add a success alert with the given message to the list. Uses the bootstrap class .alert-success.
addWarning(message)
Add a warning alert with the given message to the list. Uses the bootstrap class .alert-warning.
addDanger(message)
Add a danger alert with the given message to the list. Uses the bootstrap class .alert-danger.
errorHandler(message)
Returns a function that can be consumed by the catch method of a $q promise. Will add the given message as a danger alert.