AngularJSでもトースト表示!Toastrの導入手順まとめ

jQueryでのトースト通知に便利なのが Toastr というライブラリ

これが本当に便利なんです、超簡単にトースト表示できるので

▼この記事で紹介したのがそれ

それでこの Toastr 、実は AngularJS にも対応してます。

ただ少し導入手順が分かりにくいので、
ここでは Toastr を導入してAngularJSでトースト表示する手順をまとめました。

では早速、その手順について詳しく紹介していきます。

手順1.まず Toastr 自体を読み込み

まずやることは Toastr 自体を読み込みすること

動かすのに最低限必要なのが次の2つ

  • angular-toastr.tpls.min.js
  • angular-toastr.min.css

この2つをトースト表示したいページで読み込んでおく必要があります。

 

一番簡単なのは、CDN経由で読み込みしてあげることです。

例えば次コードみたいな感じで

 

あとちなみに・・・

もし手元(サーバー)から読み込みしたい場合、zipでのダウンロードも可能です。

DL先 : https://github.com/Foxandxss/angular-toastr/releases

解凍したら dist ディレクトリを開き、
angular-toastr.tpls.min.js と angular-toastr.css を適当な場所に配置

そして次みたいに任意のパスから読み込んであげればいいだけです。

これで下準備は完了

手順2.angular-animate の読み込み(任意)

もしトースト表示時にアニメ効果をつけたい・・・

そういう場合は angular-animate の読み込みも必須になります。

もしアニメ効果が要らないというなら、ここは飛ばして問題ありません。

 

読み込み方はCDNを使うなら、次みたい感じです。

ちなみにバージョン1.6.6 以上だと変な不具合が出る模様

なので 1.6.5 より下のバージョンを使うのが安全だと思います。

手順3.モジュールに Toastr を追加する

最後の大事な作業がコレ

モジュールに Toastr を追加しておくこと

これをしないと、トースト表示できないので気を付けましょう。

 

具体的なコードは次の通り

こういう風に書いとけば間違いないです。

実際にトーストを表示してみよう&表示例

Toastr では4つのタイプ( success  , info  , warning  , error  )ごとにトースト表示できます。

そのトースト表示のやり方とか見た目は次の通り

 

まず大大大前提として、
トースト表示したいコントローラーに toastr を追加しておく必要があります

つまり次コードのように書く必要があるってこと

必ず toastr  を宣言しておく必要があるので要注意!

あとは好きなタイミングで、次の4つのタイプでトースト表示できます。

 

1つめは簡単な情報表示ができる info  型のトースト、

AngularToastr - 簡単な情報表示できる info型 のトースト例

 

2つめは成功時などに表示できる success  型のトースト、

AngularToastr - 成功時にメッセージ表示できる success型 のトースト

 

3つめは警告メッセージが表示できる warning  型のトースト、

AngularToastr - 警告メッセージが表示できる warning型 のトースト例

 

4つめはエラーメッセージが表示できる error  型のトースト

AngularToastr - エラーメッセージが表示できる error型 のトースト例

 

以上の4つから好きなタイプを選んで表示可能

デザインもシンプルで無駄がないので、どんな環境でも違和感なく使えそう

JavaScript標準の(ダサすぎる)ダイアログからは完全におさらばできます。

トースト表示をカスタマイズするには・・・

トースト表示はこれだけですが、
位置とか表示時間とかをカスタマイズしたいこと ってありますよね。

もちろん Toastr にも色々なオプションが用意されてます。

詳しくは次のデモページからどうぞ

ここでどういうオプションがつけられて、どういう表示になるかが確認可能

タイトルやメッセージにHTMLを使ったり、閉じるボタンとかも付けれるみたいです。

ここまでのまとめ

以上、Toastr をAnuglarJSで導入する手順でした。

普通のjQuery版は上手く表示できないので、必ずコッチを使いましょう。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください