Make An AngularJS Library For The Imgur REST API

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) {
    console.log(JSON.stringify(result));
}, function(error) {
    console.error(error);
});

So how did we create this $imgur factory?

(function(){

    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; }
        $http({
            method: "GET",
            url: galleryEndpoint,
            headers: {
                "Authorization": "Bearer " + this.accessToken
            }
        })
        .success(function(result) {
            deferred.resolve(result);
        })
        .error(function(error) {
            deferred.reject(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 $http request 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.

Conclusion

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.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.