Installing toastr in an AngularJS app

angularjs angularjs-directive toastr
Andreas Selenwall picture Andreas Selenwall · Apr 15, 2015 · Viewed 7.2k times · Source

Have been trying to use toastr in my AngularJS app:

app.module("MyApp", ['toastr']);

But it doesn't work, the module toastr can not be found! I thought toastr were a AngularJS module?

Anyone who knows how to load the module, or if there are any Angular-directives I can use?

Answer

George Stocker picture George Stocker · Apr 15, 2015

Without seeing the instantiation of app, in your example, there's no way for me to know if you're actually loading your dependencies correctly; so I'll take you through the steps to load it from scratch (Source: here).

There are a few things you have to do to get toastr working on AngularJS:

  1. Download the angular-toastr distribution.
  2. add the following to your index.html (effectively wherever you're loading all your scripts):

<link rel="stylesheet" type="text/css" href="angular-toastr.css" /> <script type="text/javascript" src="angular-toastr.tpls.js"></script>

  1. Add toastr to the app's modules (not each controller, or a service. Add it to the app). Your app.js file:

angular.module('myApp', ['toastr']).

Related questions

Angularjs-toaster always displays toast notification on top-right

I have this sample html file. Here I am using angular-toast notification. Issue I am facing here is toast messages always appear on the top-right position. script.js file contains angular.module('main', ['ngAnimate', 'toaster']).controller('myController', function($scope,toaster, $…

Read More
How to set focus on input field?

What is the 'Angular way' to set focus on input field in AngularJS? More specific requirements: When a Modal is opened, set focus on a predefined <input> inside this Modal. Everytime <input> becomes visible (e.g. …

Read More
What is the difference between '@' and '=' in directive scope in AngularJS?

I've read the AngularJS documentation on the topic carefully, and then fiddled around with a directive. Here's the fiddle. And here are some relevant snippets: From the HTML: <pane bi-title="title" title="{{title}}">{{text}}</pane> From …

Read More