May 29, 2014 - Tags: angularjs, code, development, javascript, tutorial

If you fall into the 1.11 billion users (Source: Facebook Inc.) then there is a chance that you have ‘Joined’, ‘Declined’, or even said ‘Maybe’ to an event invitation. Some Facebook Pages have a lot of events and I wish there was an easier way to filter through the muck (sure there’s a search, but it could use work). Today I’m going to show you how I used the Facebook Graph API in conjunction with AngularJS to call, display, and seamlessly search for Facebook Events provided by a local venue: Brighton Music Hall.

Creating Your Facebook Application

Before you begin, you will need to create a Facebook Developers account. You can find this under Apps > Register as a Developer (Figure 1) and accept the terms (Figure 2). Next you will need to navigate to Apps > Create a New App. After that is done, you will be asked to name your application (Figure 3) and we can finally begin configuring our options.



Configuring Your Facebook Application

Once you are at the Facebook Developers Dashboard, navigate to Settings on the left side. Here you will find important information about your application such as App ID, App Domains, and your Platform, we will be using a Website (Figure 4). Once that is configured you will need to navigate to the Advanced tab and configure more settings and fill out the Valid OAuth redirect URIs (Figure 5).

Creating your AngularJS Application

If you have not yet experienced with AngularJS, it is an open-sourced web application framework. It is intended to augment web applications with model–view–controller (MVC) capability. Fortunately for us, Luis Carlos has crafted an easy to use, open-source AngularJS module to take approach of Facebook Javascript SDK, angular-facebook. Once you get the source, we are ready to create our application.

The HTML

With every web application we need to start off with some basic HTML:



The AngularJS

With every sophisticated web application that utilizes AngularJS we need to appropriately set up the module name and the controller name as shown below. You will need to go back into the Facebook Developer settings and acquire your App ID found on the Dashboard and also your Secret App Token which can be found under Tools > Access Token. It’s important to keep it secret, or people can use your App token. We will be using the App token in public, however, it is intended for the user to login to generate their own access token.

Configuring your HTML with AngularJS

In order to allow Angular to communicate with our web application we need to add Angular directives to our HTML elements. We will be attaching the ng-app directive to our HTML tag, which bootstraps the application and designates the root element. Next we will need to attach the ng-controller directive to our BODY tag which allows Angular to evaluate HTML expressions and contains the business logic of our application. Take note that the ng-app and ng-controller values correspond with the values found in the previous script file. You can see the adjustments below:



Getting our Event Data

Now that we have our Angular script set up and our HTML document prepared, we can bind the event data to the HTML document, but first we need to find it. If you take a look back at our script, the Facebook.api() function returns a response that is set to events in our MainCtrl scope. There are two ways you can see the output of our events object: either console.log($scope.events); in our script file, or use the debug directive the author has given us . Whichever you choose you will see the object is quite messy, but don’t worry we can fix that later.

Binding out Event Data

If you have been following along enough at this point, I am sure you can guess what we need to do. In our table rows we need to replace the filler ‘date’, ‘time’, ‘band name’, and ‘Link to Event’ data with our extracted event Object data. To select the object you can do the following {{events.data[0]}} which grabs the first element. I have added a few filters to format the timestamps. See below for the appropriate code:

Grabbing All Event Data

Grabbing one event isn’t useful at all is it? Not to mention the way we have to call the object. Luckily for us AngularJS comes with a ng-repeat directive which essentially loops through an object assigning it’s own variabls. I’ve also attached it to a filter that orders by the start time. Watch below how useful it is:



Bind the Search to Angular

Angular has a lot packed into it, however, two-way data binding may leave many in awe with how easy it is to set up. If you are unfamiliar with two-way data binding, it essentially causes the view to automatically update upon the users input. We will see it in action with the search. In order for this to work we need to assign the model to bind with. Angular comes in handy again with another useful directive ng-model. We attach the directive to the search input with the value band. Afterwards, we create a filter on the table row with the associated model value. See Below for the code:

Conclusion

I had a lot of fun creating this simple app, and hope you learned a few things as well. Here is the working demo of this application.