Instagram API with Angular ngResource


April 18, 2015

Last time I grabbed Instagram data with $http.jsonp inside an Angular controller and displayed the data to the document using ng-repeat in my template. I decided to try to wrap my head around an Angular service using the ngResource module. I had to add the module script to my page to get this to work. Right now I'm using grunt to concatenate the scripts and serve one minified master script to the bottom of the page. Here's how I got this service to work with jsonp:

 // services.js 
  var instagramServices = angular.module('instagramServices', ['ngResource']);
  instagramServices.factory('Photo', ['$resource', function($resource){
    var user_id = "828057799";
    var client_id = "5e7cb176cc4340c09124d9f50733f34f";
    var endpoint = 'https://api.instagram.com/v1/users/'+user_id+'/media/recent/?client_id='+ client_id+'&callback=JSON_CALLBACK';
    return $resource(endpoint, {}, {
      query: {method:'JSONP'}
    });
  }]);

Then I have my controller set up:

   // controllers.js 
  var instagramControllers = angular.module('instagramControllers', [ 'instagramServices']);
  instagramControllers.controller('InstagramCtrl', ['$scope', 'Photo', function InstagramCtrl($scope, Photo) {
    $scope.photos = Photo.query();
    console.log($scope.photos);
  }]);

And lastly, start the app:

// app.js
var instagramApp = angular.module('instagramApp', ['instagramControllers']);

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

Latest Thoughts

Thanks for stopping by!