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.
\n<\/p>\n

The Objective<\/h3>\n

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.<\/p>\n

The Process<\/h3>\n

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<\/a>). I also found this widget<\/a> 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.<\/p>\n

The Results<\/h3>\n

\n

\nSee the Pen Displaying Youtubes in modals with AngularJS by Jeff Wilkerson (@stljeff1) on CodePen.<\/p>\n<\/div>\n

View the full demo here<\/a>.<\/p>\n

This project taught me about module.run(), and how to compile templates inside directives.<\/p>\n","protected":false},"excerpt":{"rendered":"

This demo shows how to convert links to youtube videos into buttons that launch the youtube video in a modal window.<\/p>\n

This demo utilizes the Youtube Developer API, AngularJS, jQuery, and Bootstrap.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[6,8,13],"class_list":["post-201","post","type-post","status-publish","format-standard","hentry","category-development","tag-angular-js","tag-bootstrap","tag-javascript"],"_links":{"self":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts\/201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":0,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}