Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds


Free Preview: Integrate Rich Media APIs With Foundation for Apps


  • Overview
  • Transcript

Foundation for Apps connects a responsive front-end design framework to the power and flexibility of AngularJS. In this course, you'll learn to build three different apps that connect to major rich-media services: an app that searches and plays YouTube videos, an app that plays audio tracks from SoundCloud, and an app to search and view pictures from Instagram.

We've built a comprehensive guide to help you learn Foundation, whether you're just getting started or you want to explore more advanced topics check out Learn Foundation.

1. Introduction

1.1 Introduction

Hello everyone. I am Reggie Dawson, and this is the Integrating Rich Media APIs with Foundation for Apps course for Tuts+. Foundation for Apps is a front end framework built by ZURB, a combination of the popular foundation framework in AngularJS. We can build full featured apps with this platform. It is only natural that we extend this platform and use API as the pull in data from popular sites like YouTube, SoundCloud and Instagram. Just about every online service offers an API. These APIs allow you to offer functionality in your own apps that your infrastructure otherwise would not allow. Often free, these APIs are there to be used, provided you have the knowledge to use them. With the power of Foundation for Apps in Angular, you will find that creating rich data driven apps is simple with Foundation for Apps. With the built-in services and features that Foundation for Apps offers, building apps has never been easier.

1.2 What Is Foundation for Apps?

Hello everyone. I am Reggie Dawson, and this is the integrating rich media APIs, with Foundation for Apps course for Tuts+. Foundation for Apps is a front end framework created by Zurb. This framework is an extension of the popular foundation framework. The difference between the two is the standard foundation is for designing static websites. Its purpose is to allow developers to quickly create a site without worrying about designing HTML components. Foundation for Apps is designed to allow you to create full featured web apps complete with dynamic data. This was a natural progression for Foundation. After all a lot of developers, myself included, would incorporate some type of Javascript framework to power the back end while Foundation handled the HTML components. With Foundation for Apps, Zurb has included Angular JS to power your apps. Fortunately the Angular included with Foundation for Apps can be considered Angular light. Zurb has created a template base routing system and other features to make setting up an app simple. The great thing is that if you know Angular, you can use the full functionality of the framework. And instead of you having to incorporate Angular on your own, it is already included. This course will assume you have some familiarity with Foundation for Apps. And as a result we won't be going over the individual components and basics of the framework. If you need to get up to speed, Tuts has a great course, Up and Running with Foundation for Apps. While that course is more of an introduction, in this course we will be building three separate apps. These apps will use custom Angular controllers, services and directives. In essence this will be an angular app that uses foundation for the front end. The simplicity of setting up the app, as well as the front end components we get with Foundation for Apps, makes using the framework worth it. The three apps we are going to build are YouTube, SoundCloud and Instagram app. As opposed to using our own data store with something like firebase, we're going to consume the APIs these services offer. Each app will have different functionality and along the way, we will highlight the different features of Foundation for Apps that make setting up our apps a little bit easier. In the next video, we will install Foundation for Apps and create our project.