{"id":13674114,"url":"https://github.com/alexcrack/angular-ui-notification","last_synced_at":"2025-05-15T23:05:21.229Z","repository":{"id":20037158,"uuid":"23305305","full_name":"alexcrack/angular-ui-notification","owner":"alexcrack","description":"Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating","archived":false,"fork":false,"pushed_at":"2018-12-04T05:29:50.000Z","size":240,"stargazers_count":534,"open_issues_count":42,"forks_count":166,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-10T09:34:26.643Z","etag":null,"topics":["angular","bootstrap","bootstrap3","html","javascript","notifications"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexcrack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-25T07:15:26.000Z","updated_at":"2025-05-02T12:48:51.000Z","dependencies_parsed_at":"2022-08-27T02:43:56.493Z","dependency_job_id":null,"html_url":"https://github.com/alexcrack/angular-ui-notification","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcrack%2Fangular-ui-notification","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcrack%2Fangular-ui-notification/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcrack%2Fangular-ui-notification/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcrack%2Fangular-ui-notification/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexcrack","download_url":"https://codeload.github.com/alexcrack/angular-ui-notification/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254364215,"owners_count":22058875,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","bootstrap","bootstrap3","html","javascript","notifications"],"created_at":"2024-08-02T11:00:41.113Z","updated_at":"2025-05-15T23:05:16.209Z","avatar_url":"https://github.com/alexcrack.png","language":"JavaScript","readme":"angular-ui-notification\n=======================\n\n[![Dependency Status](https://david-dm.org/alexcrack/angular-ui-notification.png)](https://david-dm.org/alexcrack/angular-ui-notification)\n[![devDependency Status](https://david-dm.org/alexcrack/angular-ui-notification/dev-status.png)](https://david-dm.org/alexcrack/angular-ui-notification#info=devDependencies)\n[![Build Status](https://travis-ci.org/alexcrack/angular-ui-notification.svg?branch=master)](https://travis-ci.org/alexcrack/angular-ui-notification)\n[![Dependency Status](https://www.versioneye.com/user/projects/54f96af44f3108e7800000e4/badge.svg?style=flat)](https://www.versioneye.com/user/projects/54f96af44f3108e7800000e4)\n[![Code Climate](https://codeclimate.com/github/alexcrack/angular-ui-notification/badges/gpa.svg)](https://codeclimate.com/github/alexcrack/angular-ui-notification)\n\nAngular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animations\n\n## Features\n* No dependencies except of angular.js.\n* CSS3 Animations.\n* Small size.\n* 5 message types.\n* Use HTML in your messages.\n* Configure options globally py the provider\n* Use custom options by the message\n* Use custom template\n\n## Install\n\nTo install the package using bower and save as a dependency use...\n```bash\nbower install angular-ui-notification --save\n```  \n\nTo install via NPM:\n```bash\nnpm install angular-ui-notification --save\n```\n\n## Usage\n [Heres a plunker demo](http://plnkr.co/edit/h08qQF2qlVE3arERpdfi?p=preview)\n\n  \nIn your html/template add \n```html\n...\n  \u003clink rel=\"stylesheet\" href=\"angular-ui-notification.min.css\"\u003e\n...\n  \u003cscript src=\"angular-ui-notification.min.js\"\u003e\u003c/script\u003e\n...\n\n```\n\nIn your application, declare dependency injection like so..\n\n```javascript\n  angular.module('notificationTest', ['ui-notification']);\n...\n```\n\nYou can configure module by the provider\n```javascript\nangular.module('notificationTest', ['ui-notification'])\n    .config(function(NotificationProvider) {\n        NotificationProvider.setOptions({\n            delay: 10000,\n            startTop: 20,\n            startRight: 10,\n            verticalSpacing: 20,\n            horizontalSpacing: 20,\n            positionX: 'left',\n            positionY: 'bottom'\n        });\n    });\n...\n```\n\n\nAnd when you need to show notifications, inject service and call it!\n\n```javascript\nangular.module('notificationTest').controller('notificationController', function($scope, Notification) {\n \n  Notification.primary('Primary notification');\n  // or simply..\n  Notification('Primary notification');\n  \n  // Other Options\n  // Success\n  Notification.success('Success notification');\n  \n  // Message with custom type\n  Notification({message: 'Warning notification'}, 'warning');\n\n  // With Title\n  Notification({message: 'Primary notification', title: 'Primary notification'});\n  \n  // Message with custom delay\n  Notification.error({message: 'Error notification 1s', delay: 1000});\n  \n  // Embed HTML within your message.....\n  Notification.success({message: 'Success notification\u003cbr\u003eSome other \u003cb\u003econtent\u003c/b\u003e\u003cbr\u003e\u003ca href=\"https://github.com/alexcrack/angular-ui-notification\"\u003eThis is a link\u003c/a\u003e\u003cbr\u003e\u003cimg src=\"https://angularjs.org/img/AngularJS-small.png\"\u003e', title: 'Html content'});\n\n  // Change position notification\n  Notification.error({message: 'Error Bottom Right', positionY: 'bottom', positionX: 'right'});\n  \n  // Replace message\n  Notification.error({message: 'Error notification 1s', replaceMessage: true});\n}\n```\n\n## Service\n\nModule name: \"ui-notification\"\n\nService: \"Notification\"\n\nConfiguration provider: \"NotificationProvider\"\n\n\n## Options\n\nOptions can be passed to configuration provider globally or used in the current message.\n\nThe options list:\n\n|       Option      |      Possible values      |         Default value          |                               Description                                |\n| ----------------- | ------------------------- | ------------------------------ | ------------------------------------------------------------------------ |\n| delay             | Any integer value         | 5000                           | The time in ms the message is showing before start fading out            |\n| startTop          | Any integer value         | 10                             | Vertical padding between messages and vertical border of the browser     |\n| startRight        | Any integer value         | 10                             | Horizontal padding between messages and horizontal border of the browser |\n| verticalSpacing   | Any integer value         | 10                             | Vertical spacing between messages                                        |\n| horizontalSpacing | Any integer value         | 10                             | Horizontal spacing between messages                                      |\n| positionX         | \"right\", \"left\", \"center\" | \"right\"                        | Horizontal position of the message                                       |\n| positionY         | \"top\", \"bottom\"           | \"top\"                          | Vertical position of the message                                         |\n| replaceMessage    | true, false               | false                          | If true every next appearing message replace old messages                |\n| templateUrl       | Any string                | \"angular-ui-notification.html\" | Custom template filename (URL)                                           |\n| onClose           | Any function              | undefined                      | Callback to execute when a notification element is closed. Callback receives the element as its argument. |\n| closeOnClick      | true, false               | true                           | If true, messages are closed on click                                    |\n| maxCount          | Any integer               | 0                              | Show only [maxCount] last messages. Old messages will be killed. 0 - do not kill |\n| priority          | Any integer               | 10                             | The highier the priority is, the higher the notification will be         |\n\nAlso you can pass the \"scope\" option. This is an angular scope option Notification scope will be inherited from. This option can be passed only in the methods. The default value is $rootScope\n\n## Methods\n\n#### Notification service methods\n\n|              Method name               |                   Description                   |\n|----------------------------------------|-------------------------------------------------|\n| Notification(), Notification.primary() | Show the message with bootstrap's primary class |\n| Notification.info()                    | Show the message with bootstrap's info class    |\n| Notification.success()                 | Show the message with bootstrap's success class |\n| Notification.warning()                 | Show the message with bootstrap's warn class    |\n| Notification.error()                   | Show the message with bootstrap's danger class  |\n| Notification.clearAll()                | Remove all shown messages                       |\n\n#### Notification service options\n\n|     Option     |                 Possible values                  |           Default value           |                                              Description                                               |\n| -------------- | ------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ |\n| title          | *String*                                         | `\"\"`                              | Title to appear at the top of the notification                                                         |\n| message        | *String*                                         | `\"\"`                              | Message to appear in the notification                                                                  |\n| templateUrl    | *String*                                         | `\"angular-ui-notification.html\"`  | URL of template to be used for notification                                                            |\n| delay          | *Int* (?)                                        | `5000` or configured global delay | Number of ms before notification fades out. If not an integer, notification will persist until killed. |\n| type           | \"primary\", \"info\", \"success\", \"warning\", \"error\" | `\"primary\"`                       | Bootstrap flavoring                                                                                    |\n| positionY      | \"top\", \"bottom\"                                  | `\"top\"`                           |                                                                                                        |\n| positionX      | \"right\", \"left\", \"center\"                        | `\"right\"                          |                                                                                                        |\n| replaceMessage | *Boolean*                                        | `false`                           | If true this message will replace old(er) message(s)                                                   |\n| closeOnClick      | true, false               | true                           | If true, the message is closed on click                                  |\n\n#### Returning value\n\nEvery \"show\" method returns a promise that resolves a notification scope with these methods:\n\n|          Method name           |                                                   Description                                                    |\n|--------------------------------|------------------------------------------------------------------------------------------------------------------|\n| notificationScope.kill(isHard) | Remove the specific message\u003cbr\u003eisHard - if false or omitted kill message with fadeout effect (default). If true - immediately remove the message|\n\n\n\n## Custom Templates\n\nCustom template can be provided.\n\n```html\n\u003cdiv class=\"ui-notification\"\u003e\n    \u003ch3 ng-show=\"title\" ng-bind-html=\"title\"\u003e\u003c/h3\u003e\n    \u003cdiv class=\"message\" ng-bind-html=\"message\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\nDefault existing scope values is \"title\" - the title of the message and \"message\".\nAlso any custom scope's properties can be used.\n","funding_links":[],"categories":["UI Components","HTML"],"sub_categories":["Notification"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexcrack%2Fangular-ui-notification","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexcrack%2Fangular-ui-notification","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexcrack%2Fangular-ui-notification/lists"}