angular js toasterの実装

angular jsで、通知を出す方法には色々あります。
このうち、ポップアップでふわっと表示され、
一定時間経過で自動で消える通知を「トースター」(toaster)と
言います。

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公式ページにわかりやすく書いてあります(英語)

デフォルトでは5秒程度で自動で消えますが、設定で変更可能です。

動作サンプル

日報クラウドnipoにて使用しています。
nipoで実際にゲストでログインして、動作を確認できます
nipo起動

プラグインのインストール

やっぱりbowerを使えば簡単でした
コマンドラインから
bower install angular-toastr
と入力するだけです。他の必要なひも付けは全部自動で
やってくれます