Installing toastr in an AngularJS app

Question

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?

Are you sure that the module is loaded? <script type="text/javascript" src="angular-toastr.tpls.js"></script> — valverde93
– valverde93, Commented Apr 15, 2015 at 11:33
What's the instantiation of app look like? It's hard to tell from the lack of code how you're instantiating app. — George Stocker
– George Stocker, Commented Apr 15, 2015 at 11:47

George Stocker · Accepted Answer · 2015-04-15 11:47:14Z

5

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:

Download the angular-toastr distribution.
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>

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']).

answered Apr 15, 2015 at 11:47

George Stocker

58k29 gold badges184 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jordancooperman Over a year ago

I've tried exactly what you've written above, but am still having no luck. Still getting an injector error, see screenshot: dropbox.com/s/karwq1v9e498i7v/… Any idea why?

jordancooperman Over a year ago

ha, it might have had something to do with my using toastr.js and not angular.toastr.js. Whoops!

jcragun · Accepted Answer · 2015-04-15 11:37:52Z

2

No, toastr is not an Angular module. There are various ports of toastr to Angular including angular-toastr or AngularJS-Toaster.

answered Apr 15, 2015 at 11:37

jcragun

2,23812 silver badges9 bronze badges

Comments

Rajush · Accepted Answer · 2015-07-04 20:19:41Z

1

You don't need to inject it as a dependency unless you are using angular port of toastr (eg: angular-toastr). For the original toastr, just including the .js and .css, and should be fine.

answered Jul 4, 2015 at 20:19

Rajush

6656 silver badges12 bronze badges

Comments

Himanshu Mittal · Accepted Answer · 2015-04-15 14:05:10Z

0

You don't have to add toastr as a dependency in your module. You just need to include toastr.js and toastr.css files in your project and you can then toastr like this

toastr.success("This is a success message");

answered Apr 15, 2015 at 14:05

Himanshu Mittal

8047 silver badges19 bronze badges

Collectives™ on Stack Overflow

Installing toastr in an AngularJS app

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related