HTML5 Web Notifications for AngularJS
Demo
http://codedistillery.github.io/angular-web-notifications
Usage
HTML:
<!DOCTYPE html>
<html ng-app="angularWebNotificationsDemo">
<head lang="en" >
<meta charset="UTF-8">
<title>Angular Web Notifications Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="js/angular-web-notifications.min.js"></script>
</head>
<body ng-controller="demoController">
<label>Title: <input ng-model="notificationTitle" placeholder="Title" type="text"/></label><br>
<label>Body: <input ng-model="notificationOptions.body" placeholder="Body" type="text"/></label><br>
<label>Icon Url: <input ng-model="notificationOptions.icon" placeholder="Icon URL" type="text"/></label><br>
<label>Timeout (ms): <input ng-model="notificationOptions.timeout" placeholder="Timeout" type="number"/></label><br>
<button class="btn" ng-click="showNotification()">Show notification</button>
</body>
</html>
JS:
var angularWebNotificationsDemo = angular.module("angularWebNotificationsDemo",['webNotifications']);
angularWebNotificationsDemo.controller('demoController', ['$scope','webNotifications', function($scope, webNotifications) {
$scope.notificationTitle = "Demo Title";
$scope.notificationOptions = {
body: "This is body",
icon: "http://storage.googleapis.com/fiilis/static_resources/square_logo.png",
timeout: 5000
};
$scope.showNotification = function(){
webNotifications.create($scope.notificationTitle, $scope.notificationOptions);
}
}]);