by Bryan Leboff
So now that we have our environment set up from Part I of this tutorial, it’s time to start coding the AngularJS app. The app will simply show a set of photos from Instagram based on your current location. This will allow us to touch on some key elements in AngularJS such as controllers, views, routes, services, and directives
The first thing we’ll want to do is remove the stuff we don’t need from angular-seed, and repurpose the stuff we do need. I suggest reading through the getting started guide if you are unfamiliar with AngularJS as we will be touching on some of the concepts in there.
Some Clean-up tasks
The angular-seed app contains two controllers (MyCtrl1 and MyCtrl2) for this app we will only need one so let’s delete the MyCtrl2 route from app.js, the controller from controllers.js and the view2.html partial they reference.
Now that MyCtrl2 is gone, let’s rename MyCtrl1 to something more meaningful. In this case we’ll call it HomeController as it will be our home page. Let’s rename partial1.html to home.html and we can remove the navigation and version lines from index.html because we will not need those either.
Here is what your app.js, controllers.js and index.html should look like now.
This requires adding this line to app.js (to configure HTML5 mode):
And changing web.js to look like this (to serve index.html when not finding a route):
In order to use our app with Instagram we will need to authenticate the user first because the search method requires authentication. This is a fairly straight forward process that involves sending the user to Instagram to authenticate and registering a callback url that Instagram will send them to after registration. So after registering for access to the API at Instagram for our dev environment set your callback url as “http://localhost:5000/instagram” (we will change this later).
And when they authorize the application, get the access token from our callback.
So first we create the InstagramAuthController. This will grab the auth token from the Instagram callback and it will contain this logic for getting and storing the user’s authentication token. After we have all that data, we redirect the newly authenticated user to home.
For the token storing we will create an AngularJS service called InstagramToken. AngularJS comes with a service for accessing and manipulating cookies, $cookies. This will take care of storing and retrieving the token throughout the app. Also while we’re in services, we’ll add the value for our Instagram search URL
Then we add /instagram route to app.js:
And finally create the authorize link (I do it directly in HTML, you can write a filter to create it for you from your client id and redirect uri if you prefer)
Add some Location
Grab the Images
Add these lines to your home controller
Our first Directive!
So here is our directive (instagramImage): Let’s talk about some of the parts
The restrict parameter allows us to restrict the directive to certain declaration types. These can be an element () attribute (
) class (
So let’s add the image directive to our home.html that now looks like this:
Some of the features present here are the ng-show directive which will hide the authentication link if our token is already populated, and the ng-repeat directive which will repeat an element over a list. In our case each image in images.
Now to make this all look good, we’ll need to add these lines to our app.css file. This includes the modal dialog box and the overlay text stuff.
So go back to Instagram and change the website and oauth redirect_uri to your Heroku application URL.
Now commit all your changes and run ‘git push heroku master’ (remember that one?) and you’re all set! At this point you should have your first full-fledged AngularJS up and running on Heroku! Congrats!
If you want to check out the full source for this app it is available here for your forking/referencing pleasure. If you have any questions or certain topics that need expanding or something I forgot or something feel free to comment and I’ll get to them as soon as I can. Oh and you can check out the app in action here. Its kinda cool!