Warning: Trying to access array offset on value of type null in /home/jwblogger/jwBlogger/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16
Warning: Trying to access array offset on value of type null in /home/jwblogger/jwBlogger/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17
After about 6 months of casually dabbing in AngularJS, I have learned enough to start producing useful, production-ready modules. It has been an awkward learning curve to say the least, but I have kept with it, and now would like to document a module I have created for a client. I have replaced the Youtube links used for the client with videos from The Tonight Show.
The Objective
The client has buttons linking to Youtube videos throughout the site. Each link was going directly to the external Youtube page. The client wanted to keep the buttons, but have the videos launch a modal window taking up as much screen space as possible. Some pages had one link, other pages had many links. The site is using AngularJS and Bootstrap.
The Process
First, as with many projects, I surveyed Google to see if anyone had created what I needed. I found many tutorials showing how to create modals (see Ben Nadel). I also found this widget that uses the Youtube Developer API inside an AngularJS Directive, but no examples showing how to use the Youtube Developer API to load a video in a modal window. Nonetheless, I found Ben Nadel’s blog and Fran Dios’s jukebox app valuable as I continue to learn how to organize my AngularJS moduler.
The Results
View the full demo here.
This project taught me about module.run(), and how to compile templates inside directives.