angular-web-notifications

Web Notifications implementation for AngularJS


Keywords
Angular, HTML5, Web, Notifications, API
License
MIT
Install
bower install angular-web-notifications

Documentation

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);
  }
}]);