angular jsで、通知を出す方法には色々あります。
このうち、ポップアップでふわっと表示され、
一定時間経過で自動で消える通知を「トースター」（toaster)と
言います。
上記の写真のような感じですね。(オレンジ色のポップアップ）
ふわっと表示されて、すーっっと消えていく通知です。
パンが焼けるみたいに、トースターがチンっってお知らせするイメージ
なのでしょうか？名前の由来はわかりませんが、
ユーザに一方的に通知し、返信を受ける必要もなく、
勝手に消えるポップアップのお知らせなので、
使い勝手は良いです。
toasterの通知
Angular JSでは、標準でトースター機能はついていないので、
外部のプラグインを使うことになります。
その中でもおすすめなのが、angular-toastrです。
おすすめの理由は
- 実装が簡単
- 使い方が簡単
- 見た目がおしゃれ
- 警告や通知、エラーによってトースターのデザインが変わる
実装
簡単に実装できます。
angular
.module('yourApp', ['ngAnimate','toastr',])
まずあたまでtoastrの取り込み
.controller('SampleCtrl', function ($scope , toastr) {
toastr.success('こんにちは' , 'さようなら');
});
toaster.success()を実行するだけでトースターが表示されます。
toaster.success()//緑 toaster.info() //青 toaster.error()// 赤 toaster.warning()// 黄
の種類が用意されています。
使い方も全部同じです。
詳しくはangular-toastr公式ページにわかりやすく書いてあります（英語）
デフォルトでは５秒程度で自動で消えますが、設定で変更可能です。
動作サンプル
日報クラウドnipoにて使用しています。
nipoで実際にゲストでログインして、動作を確認できます
nipo起動
プラグインのインストール
やっぱりbowerを使えば簡単でした
コマンドラインから
bower install angular-toastr
と入力するだけです。他の必要なひも付けは全部自動で
やってくれます
