By
Warning: The code in this blog post is outdated as our Video SDK was in BETA at the time of writing.
Check out our getting started section instead if you want help using Twilio video. If you choose to follow this tutorial you’ll need to make significant edits to the code to run.
AngularJS is a popular JavaScript framework for building client side applications. Using it steers you towards creating well-factored apps with clear Separation of Concerns (SoC). To demonstrate how Angular does this let’s convert the existing JavaScript Quickstart for Video into an Angular application.
If you want to skip ahead and grab the source for this post, it’s all on Github. Otherwise let’s get started.
Setting It All Up
Before we jump into the code we’ll need to do some setup. First, if you don’t already have a Twilio account hop on over to twilio.com and create a new one. It’s easy and free for development.
Once you have an account we need to set up a new Api Key and Secret which we’ll use in a bit to authenticate with the Twilio API. Create a new Api Key by heading into the developer console and select the Create an Api Key option.
Make sure you put the Api Secret some place safe because you won’t be able to see it again once you leave the Key page.
Next, create a new Configuration Profile for our application. The Configuration profile is a collection of configuration values specific to the Twilio Video service. For our app we just need to create a new one and grab the Configuration Profile SID.
With the Api Key and Configuration Profile created we can starting writing some code. As the base for our application we’ll use a Twilio Video for JavaScript Quickstart application. These applications are intended to get you to a working video application in just a few minutes and are available with server sides in a variety of programming languages.
Download the starter app that matches the backend language you are most interested in and follow the setup instructions for setting up your Account SID, Api Key and Secret and Configuration Profile SID in the app.
When you’re ready, give the app a spin and wave to yourself in the camera!
Approaching Angular
With the Video Quickstart running, it’s time to start converting the client side to Angular.
Start by adding the Angular library to the application view. For most of the quickstarts this means locating and opening the index.html file included in the project. For .NET developers you are looking for Index.cshtml.
Once you’ve opened the file add a