Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Make an AngularJS Library for the Imgur REST API

DZone's Guide to

Make an AngularJS Library for the Imgur REST API

· Java Zone ·
Free Resource

Verify, standardize, and correct the Big 4 + more– name, email, phone and global addresses – try our Data Quality APIs now at Melissa Developer Portal!

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 $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.

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.

Developers! Quickly and easily gain access to the tools and information you need! Explore, test and combine our data quality APIs at Melissa Developer Portal – home to tools that save time and boost revenue. Our APIs verify, standardize, and correct the Big 4 + more – name, email, phone and global addresses – to ensure accurate delivery, prevent blacklisting and identify risks in real-time.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}