jQueryでのトースト通知に便利なのが Toastr というライブラリ
これが本当に便利なんです、超簡単にトースト表示できるので
▼この記事で紹介したのがそれ
それでこの Toastr 、実は AngularJS にも対応してます。
ただ少し導入手順が分かりにくいので、
ここでは Toastr を導入してAngularJSでトースト表示する手順をまとめました。
では早速、その手順について詳しく紹介していきます。
このページの目次
手順１．まず Toastr 自体を読み込み
まずやることは Toastr 自体を読み込みすること
動かすのに最低限必要なのが次の２つ
- angular-toastr.tpls.min.js
- angular-toastr.min.css
この２つをトースト表示したいページで読み込んでおく必要があります。
一番簡単なのは、CDN経由で読み込みしてあげることです。
例えば次コードみたいな感じで
|
1 2 |
<script src="https://unpkg.com/angular-toastr/dist/angular-toastr.tpls.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/angular-toastr/dist/angular-toastr.min.css" /> |
あとちなみに・・・
もし手元（サーバー）から読み込みしたい場合、zipでのダウンロードも可能です。
DL先 ： https://github.com/Foxandxss/angular-toastr/releases
解凍したら dist ディレクトリを開き、
angular-toastr.tpls.min.js と angular-toastr.css を適当な場所に配置
そして次みたいに任意のパスから読み込んであげればいいだけです。
|
1 2 |
<script src="/path/to/angular-toastr.tpls.min.js"></script> <link rel="stylesheet" href="/path/to/angular-toastr.min.css" /> |
これで下準備は完了
手順２．angular-animate の読み込み（任意）
もしトースト表示時にアニメ効果をつけたい・・・
そういう場合は angular-animate の読み込みも必須になります。
もしアニメ効果が要らないというなら、ここは飛ばして問題ありません。
読み込み方はCDNを使うなら、次みたい感じです。
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.js"></script> |
ちなみにバージョン1.6.6 以上だと変な不具合が出る模様
なので 1.6.5 より下のバージョンを使うのが安全だと思います。
手順３．モジュールに Toastr を追加する
最後の大事な作業がコレ
モジュールに Toastr を追加しておくこと
これをしないと、トースト表示できないので気を付けましょう。
具体的なコードは次の通り
|
1 2 |
/* angular-animate と Toastr を追加 */ angular.module('app', ['ngAnimate', 'toastr']); |
こういう風に書いとけば間違いないです。
実際にトーストを表示してみよう＆表示例
Toastr では４つのタイプ（ success , info , warning , error ）ごとにトースト表示できます。
そのトースト表示のやり方とか見た目は次の通り
まず大大大前提として、
トースト表示したいコントローラーに toastr を追加しておく必要があります。
つまり次コードのように書く必要があるってこと
|
1 2 3 4 5 6 7 8 9 |
angular.module('myApp') .controller('HogeController', ['$scope', 'toastr', function( $scope, toastr ){ /// トースト表示 toastr.success('Hello World!'); }] ); |
必ず toastr を宣言しておく必要があるので要注意！
あとは好きなタイミングで、次の４つのタイプでトースト表示できます。
１つめは簡単な情報表示ができる info 型のトースト、
|
1 |
toastr.info('これが info型 のトースト'); |
２つめは成功時などに表示できる success 型のトースト、
|
1 |
toastr.success('これが success型 のトースト') |
３つめは警告メッセージが表示できる warning 型のトースト、
|
1 |
toastr.warning('これが warning型 のトースト'); |
４つめはエラーメッセージが表示できる error 型のトースト
|
1 |
toastr.error('これが error型 のトースト') |
以上の４つから好きなタイプを選んで表示可能
デザインもシンプルで無駄がないので、どんな環境でも違和感なく使えそう
JavaScript標準の（ダサすぎる）ダイアログからは完全におさらばできます。
トースト表示をカスタマイズするには・・・
トースト表示はこれだけですが、
位置とか表示時間とかをカスタマイズしたいこと ってありますよね。
もちろん Toastr にも色々なオプションが用意されてます。
詳しくは次のデモページからどうぞ
ここでどういうオプションがつけられて、どういう表示になるかが確認可能
タイトルやメッセージにHTMLを使ったり、閉じるボタンとかも付けれるみたいです。
ここまでのまとめ
以上、Toastr をAnuglarJSで導入する手順でした。
普通のjQuery版は上手く表示できないので、必ずコッチを使いましょう。
