angular-ui-notification
Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animations
Features
- No dependencies except of angular.js.
- CSS3 Animations.
- Small size.
- 5 message types.
- Use HTML in your messages.
- Configure options globally py the provider
- Use custom options by the message
- Use custom template
Install
To install the package using bower and save as a dependency use...
bower install angular-ui-notification --save
To install via NPM:
npm install angular-ui-notification --save
Usage
In your html/template add
...
<link rel="stylesheet" href="angular-ui-notification.min.css">
...
<script src="angular-ui-notification.min.js"></script>
...
In your application, declare dependency injection like so..
angular.module('notificationTest', ['ui-notification']);
...
You can configure module by the provider
angular.module('notificationTest', ['ui-notification'])
.config(function(NotificationProvider) {
NotificationProvider.setOptions({
delay: 10000,
startTop: 20,
startRight: 10,
verticalSpacing: 20,
horizontalSpacing: 20,
positionX: 'left',
positionY: 'bottom'
});
});
...
And when you need to show notifications, inject service and call it!
angular.module('notificationTest').controller('notificationController', function($scope, Notification) {
Notification.primary('Primary notification');
// or simply..
Notification('Primary notification');
// Other Options
// Success
Notification.success('Success notification');
// Message with custom type
Notification({message: 'Warning notification'}, 'warning');
// With Title
Notification({message: 'Primary notification', title: 'Primary notification'});
// Message with custom delay
Notification.error({message: 'Error notification 1s', delay: 1000});
// Embed HTML within your message.....
Notification.success({message: 'Success notification<br>Some other <b>content</b><br><a href="https://github.com/alexcrack/angular-ui-notification">This is a link</a><br><img src="https://angularjs.org/img/AngularJS-small.png">', title: 'Html content'});
// Change position notification
Notification.error({message: 'Error Bottom Right', positionY: 'bottom', positionX: 'right'});
// Replace message
Notification.error({message: 'Error notification 1s', replaceMessage: true});
}
Service
Module name: "ui-notification"
Service: "Notification"
Configuration provider: "NotificationProvider"
Options
Options can be passed to configuration provider globally or used in the current message.
The options list:
| Option | Possible values | Default value | Description |
|---|---|---|---|
| delay | Any integer value | 5000 | The time in ms the message is showing before start fading out |
| startTop | Any integer value | 10 | Vertical padding between messages and vertical border of the browser |
| startRight | Any integer value | 10 | Horizontal padding between messages and horizontal border of the browser |
| verticalSpacing | Any integer value | 10 | Vertical spacing between messages |
| horizontalSpacing | Any integer value | 10 | Horizontal spacing between messages |
| positionX | "right", "left", "center" | "right" | Horizontal position of the message |
| positionY | "top", "bottom" | "top" | Vertical position of the message |
| replaceMessage | true, false | false | If true every next appearing message replace old messages |
| templateUrl | Any string | "angular-ui-notification.html" | Custom template filename (URL) |
| onClose | Any function | undefined | Callback to execute when a notification element is closed. Callback receives the element as its argument. |
| closeOnClick | true, false | true | If true, messages are closed on click |
| maxCount | Any integer | 0 | Show only [maxCount] last messages. Old messages will be killed. 0 - do not kill |
| priority | Any integer | 10 | The highier the priority is, the higher the notification will be |
Also 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
Methods
Notification service methods
| Method name | Description |
|---|---|
| Notification(), Notification.primary() | Show the message with bootstrap's primary class |
| Notification.info() | Show the message with bootstrap's info class |
| Notification.success() | Show the message with bootstrap's success class |
| Notification.warning() | Show the message with bootstrap's warn class |
| Notification.error() | Show the message with bootstrap's danger class |
| Notification.clearAll() | Remove all shown messages |
Notification service options
| Option | Possible values | Default value | Description |
|---|---|---|---|
| title | String | "" |
Title to appear at the top of the notification |
| message | String | "" |
Message to appear in the notification |
| templateUrl | String | "angular-ui-notification.html" |
URL of template to be used for notification |
| delay | Int (?) | 5000 or configured global delay |
Number of ms before notification fades out. If not an integer, notification will persist until killed. |
| type | "primary", "info", "success", "warning", "error" | "primary" |
Bootstrap flavoring |
| positionY | "top", "bottom" | "top" |
|
| positionX | "right", "left", "center" | `"right" | |
| replaceMessage | Boolean | false |
If true this message will replace old(er) message(s) |
| closeOnClick | true, false | true | If true, the message is closed on click |
Returning value
Every "show" method returns a promise that resolves a notification scope with these methods:
| Method name | Description |
|---|---|
| notificationScope.kill(isHard) | Remove the specific message isHard - if false or omitted kill message with fadeout effect (default). If true - immediately remove the message |
Custom Templates
Custom template can be provided.
<div class="ui-notification">
<h3 ng-show="title" ng-bind-html="title"></h3>
<div class="message" ng-bind-html="message"></div>
</div>
Default existing scope values is "title" - the title of the message and "message".Also any custom scope's properties can be used.
-
组件类型1：纯函数功能，而没有视图部分，即Factory(类似于$http) promise.component.html 常见的有内置的$http，$q之类的。一般使用promise与作用域进行交互 组件类型2：不是常驻于视图，而是动态插入的、有UI的一类组件，有输入交互、不常被调用(类似于Model对话框) factory.component.html 并发性。这里收到es6的启发。在fact
-
官网API: 点击打开链接 一、JS代码示例 define([ '{angular}/angular' ], function(angular) { 'use strict'; var optionList = angular.module('OptionList', [ 'ngResource' ]); optionList.controller('Dictiona
-
ionic UI(4)ionic2 framework - basic and components and native Just create a tutorial project with TypeScript > ionic start myionic2project2 tutorial --v2 --ts > ionic serve Visit the page http://local
-
Mobile Angular UI 是个 HTML5 移动端 UI 框架，允许使用 Angular JS 和 Bootstrap 3 来开发移动端应用。 Mobile Angular UI 集成了： Angular 1.2+ Bootstrap 3 Angular 的 Bootstrap 3 指令集 一系列重要的移动端 Bootstrap 3 组件 (navbars, sidebars, swit
-
angular-swagger-ui angular-swagger-ui is an angularJS implementation of OpenAPI UI OpenAPI (aka Swagger) helps you documenting your RESTful API. OpenAPI UI helps developers discovering your RESTful AP
-
Angular UI Tree Angular UI Tree is an AngularJS UI component that can sort nested lists, provides drag & drop support and doesn't depend on jQuery. If you are a user who uses angular-nestedSortable, t
-
angular-semantic-ui 是 AngularJS 为 Semantic UI 设计的原生指令集。 指令 accordion checkbox dimmer dropdown modal popup rating sidebar 构建 获取 repo： git clone https://github.com/angularify/angular-semantic-ui.git 然后转
-
Semantic-UI-Angular是一个纯粹的Semantic-UI组件的AngularJS1.x指令集。我们正在考虑未来Angular 2支持。我们决定使用Angular 2友好环境的TypeScript作为步骤。 状态 工作正在进行 我们正在努力建设适当的环境，贡献指导方针和其它所有的一切只为一个更舒适的社会。 一旦我们发布第一alpha.0我们很高兴能够得到社会的帮助。 支持 我们支持
-
MDB 5 Angular Angular 12 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBAngular 5 Demo 500+ material UI components Super simple, 1 minute installation Detailed docs & multi