AngularJS, Development, General, Javascript

Showing a Popup for AngularJS

Jan 27, 2016 0 Comments

AngularJSWhile working on a private project I needed a popup for my AngularJS based landingpage to show when a button was clicked containing some information. I was confident the huge AngularJS community had already invented such a thing and Googled around to look for options.

There is always the option to build things yourself, but since I didn’t want to spend my time customizing code and functionality. Besided that I believed my goal – showing a dialog after a button click that showed content with a dismiss button – was so common that there just HAD to be a solution waiting for me.

More on my AngularJS Dialog component quest after the break.

[ad name=”Large Rectangle”]

And it turns out there was a nice open-source solution, GitHub hosted and all, in the form of ngDialog (https://github.com/likeastore/ngDialog). My target project is build with a Yeoman generator (called generator-gulp-angular)  for AngularJS based projects with Gulp integrated.

I always like to choose components that have minimal or no dependancies so they can be re-used in future projects without having to keep tabs on what frameworks I need to base them on. It gives my flexibility while having components that I truly get to know well after using them two or three times.

Independance
And independence is a great asset of ngDialog. Here’s an overview of features what made me try it out:

  • no dependancies
  • possibility to apply theming by specifying a class name to indicate what CSS styling needs to be applied
  • the possibilities to both specify inline content or an external “template” file to be used for the content of the dialog
  • it’s possible to define a controller that will handle interaction with the dialog. Not what I needed right now but I might just be using this in the near future

Installing was a breeze using Bower:
[crayon-675a03ca7f784789561269/] And making the dialog appear is as easy as calling .open with a reference to the template file:
[crayon-675a03ca7f794385364412/] Lots of stuff possible with this nice component, so be sure to check it out on the ngDialog GitHub repo!

That was awesome