Instagram API with Angular


April 16, 2015

I'm working on a new skill. It's probably been a year since I messed with Angular and I remember then how much I hated not having the ability to use my series of jquery-built interface components with it. You had to basically start over as far as UI interactions unless you want to use something like angular-bootstrap.

What I like about Angular is the templating. Displaying your data into the dom is pretty easy using ng-repeat:

  <ul>
    <li ng-repeat="photo in photos">
  </ul>

Cool. I really like how easy that is just using custom attributes.

I decided to play around with some real data. The Instagram API is fairly easy to use so I made an Angular controller to pull in some data to work with. I had to use $http.jsonp instead of the standard $http.get call:

  app.controller("InstagramCtrl", function InstagramCtrl($scope, $http) {
    $http.jsonp(payload).success(function(data) {
      $scope.photos = data.data;
      console.log($scope.photos);
    });
  });

That gives me an array of object I can now get in my template. I wanted to get the link to the photo and the photo url so I can build a simple grid and latest Instagram photos. For example, I can access each post url with {{ photo.link }} and each image url with {{ photo.images.low_resolution.url }}. Accessing nested json is quite simple—another feature I love about Angular. So, In my template I have:

  <div ng-controller="InstagramCtrl">
    <ul>
      <li ng-repeat="photo in photos">
        <p><a href="{{photo.link}}">
          <img src="{{ photo.images.low_resolution.url }}">
        </a></p>
      </li>
    </ul>
  </div>

Here's a full example on CodePen:

See the Pen Instagram API with Angular by Jason Weaver (@indyplanets) on CodePen.

Latest Thoughts

Thanks for stopping by!