Over a million developers have joined DZone.

Make an AngularJS Library for the Imgur REST API

· Java Zone

Discover how powerful static code analysis and ergonomic design make development not only productive but also an enjoyable experience, brought to you in partnership with JetBrains

Imgur is a great image service for sharing and viewing images across the internet.

Since there is a lot of buzz around AngularJS lately and there isn’t already an AngularJS extension for the Imgur REST API, I decided to take it upon myself and start creating one.

On my GitHub account you can find what I’ve titled ng-imgur.

Using this library is simple because all you need is an Imgur access token and an idea about what you’d like to accomplish.  To initialize the AngularJS factory that wraps our functions we would call:

var imgurInstance = new $imgur("ACCESS_TOKEN_HERE");

This leaves us with all the possibilities that currently exist in the library.  For example, if we wanted to make use of the Gallery endpoint of Imgur, we would call the following:

imgurInstance.getGallery("hot", "viral").then(function(result) {
}, function(error) {

So how did we create this $imgur factory?

    angular.module("ngImgur", []).factory("$imgur", ["$q", "$http", function ($q, $http) {
        var imgur = function(accessToken) {
            this.accessToken = accessToken;
            this.apiBase = "https://api.imgur.com/3";
        imgur.prototype = {
        return imgur;

Notice in the above code we created our $imgur factory as part of the ngImgur module.  The constructor is where we are going to define the access token and the base URL to the Imgur API.

To keep this constructor based approach we are going to add a prototype to the imgur object.  Our prototype will consist of many functions.  One function for each API endpoint to be exact.

Let’s take the getGallery method that we used as our example:

imgur.prototype = {
    getGallery: function(section, sort, page, dateRange, showViral) {
        var deferred = $q.defer();
        var galleryEndpoint = this.apiBase + "/gallery";
        if(section !== undefined) { galleryEndpoint += "/" + section; }
        if(sort !== undefined) { galleryEndpoint += "/" + sort; }
        if(dateRange !== undefined) { galleryEndpoint += "/" + dateRange; }
        if(showViral !== undefined) { galleryEndpoint += "?showViral=" + showViral; }
            method: "GET",
            url: galleryEndpoint,
            headers: {
                "Authorization": "Bearer " + this.accessToken
        .success(function(result) {
        .error(function(error) {
        return deferred.promise;

In the above getGallery code we notice a few things.  Notice that we are creating default values for each parameter of the Gallery endpoint to prevent any errors.  When we make the $httprequest we return the result as a promise.  If the promise is successful, a Gallery Image or Gallery Album is returned, otherwise the error the server provides is returned.

The ng-imgur library is not complete.  There are many API endpoints which I’ve not had time to add.  Many have already been implemented, but based on the knowledge you’ve just learned, many of the missing functions can be easily added.


Creating and using an AngularJS factory for Imgur is not difficult.  Because the Imgur RESTful API is large and thorough, the ng-imgur library I made is not complete with all the endpoints, but it is getting there.  I encourage everyone to fork the repository and contribute any functions that are missing.

Learn more about Kotlin, a new programming language designed to solve problems that software developers face every day brought to you in partnership with JetBrains.


Published at DZone with permission of Nic Raboy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}