簡単な通知をトースト表示する - AngularJS Toaster
トーストとは、アプリからの通知を表示するための小さなウィンドウのことです。ダイアログにも似ていますが、トーストは（明示的に閉じなくても）一定時間で自動的に消えるという性質を持ちます。新着のメール／返信が届いた、など、比較的重要度の低いイベントを通知するのに利用するのが一般的です。
そして、このようなトースト機能を実装するためのライブラリがAngularJS Toasterです。
AngularJS Toasterは、Bowerを利用することで、以下のコマンドでインストールできます。
> bower install --save angularjs-toaster
では、具体的な例を見ていきます。以下は、ボタンクリックのタイミングでトーストを表示する例です。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<!-- （1）ライブラリ／スタイルシートをインポート -->
<link rel="stylesheet" href="bower_components/angularjs-toaster/toaster.min.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angularjs-toaster/toaster.min.js"></script>
<script src="scripts/toast.js"></script>
</head>
<body ng-controller="MyController">
<!--（3）トースト領域を宣言-->
<toaster-container toaster-options="{
'close-button': true,
'position-class':'toast-bottom-center' ,
'time-out': 5000
}"></toaster-container>
<button ng-click="onclick()">現在日時</button>
</body>
</html>
angular.module('myApp', ['toaster', 'ngAnimate'])
.controller('MyController', ['$scope', 'toaster', function($scope, toaster) {
// （4）トーストをポップアップ
$scope.onclick = function() {
toaster.pop('note', '現在の日時は', new Date());
};
}]);
AngularJS Toasterを利用するには、ライブラリ（toaster.min.js）／スタイルシート（toaster.min.css）のほか、AngularJSのngAnimateモジュール（angular-animate.min.js）をインポートしておく必要があります（1）。また、アプリモジュール（myApp）からtoasterモジュールへの依存関係を宣言します（2）。
AngularJS Toasterを有効化できたら、<toaster-container>要素（ディレクティブ）でトースト領域を宣言しておきます（3）。<toaster-container>ディレクティブではtoaster-options属性を利用して、トーストの挙動も設定できます。利用できるパラメーターには、以下のようなものがあります。
| パラメーター | 概要 |
|---|---|
| time-out | トーストを閉じるまでの時間（ミリ秒） |
| position-class | トーストを表示する位置（toast-top-full-width／toast-bottom-full-width／toast-top-left／toast-top-center／toast-top-right／toast-bottom-left／toast-bottom-center／toast-bottom-right） |
| close-button | ［×］ボタンを表示するか |
あとは、ボタンクリックのタイミングで、toasterサービスのpopメソッドを呼び出すだけです（4）。popメソッドの引数は、先頭から
- トーストの種類（success／error／warning／note）
- タイトル
- 本文
の順で指定します。トーストの種類によって、表示色が変化します。
