Imgur — это отличный сервис изображений для обмена и просмотра изображений через Интернет.
Поскольку в последнее время вокруг AngularJS много шума, а для Imgur REST API расширения AngularJS уже нет , я решил взять его на себя и начать его создавать.
На моем аккаунте GitHub вы можете найти то, что я назвал ng-imgur .
Использовать эту библиотеку просто, потому что все, что вам нужно, это токен доступа Imgur и представление о том, чего вы хотите достичь. Чтобы инициализировать фабрику AngularJS, которая упаковывает наши функции, мы бы вызвали:
var imgurInstance = new $imgur("ACCESS_TOKEN_HERE");
Это оставляет нам все возможности, которые в настоящее время существуют в библиотеке. Например, если бы мы хотели использовать конечную точку галереи Imgur, мы бы назвали следующее:
imgurInstance.getGallery("hot", "viral").then(function(result) {
console.log(JSON.stringify(result));
}, function(error) {
console.error(error);
});
Итак, как мы создали эту $imgur фабрику?
(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;
}]);
})();
Обратите внимание, что в приведенном выше коде мы создали нашу $imgur фабрику как часть ngImgur модуля. Конструктор — это место, где мы собираемся определить токен доступа и базовый URL-адрес Imgur API.
Чтобы сохранить этот подход на основе конструктора, мы собираемся добавить прототип к imgur объекту. Наш прототип будет состоять из множества функций. Точнее, одна функция для каждой конечной точки API.
Давайте возьмем getGallery метод, который мы использовали в качестве нашего примера:
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;
}
};
В приведенном выше getGallery коде мы заметили несколько вещей. Обратите внимание, что мы создаем значения по умолчанию для каждого параметра конечной точки галереи, чтобы избежать ошибок. Когда мы делаем $httpзапрос, мы возвращаем результат как обещание. Если обещание выполнено успешно, возвращается изображение галереи или альбом галереи , в противном случае возвращается ошибка, предоставленная сервером.
Библиотека ng-imgur не завершена. Есть много конечных точек API, которые я не успел добавить. Многие из них уже реализованы, но, основываясь на только что изученных знаниях, многие из отсутствующих функций могут быть легко добавлены.
Вывод
Создание и использование фабрики AngularJS для Imgur несложно. Поскольку API Imgur RESTful большой и тщательный, созданная мной библиотека ng-imgur не укомплектована всеми конечными точками, но она доходит до цели . Я призываю всех раскошелиться на репозиторий и внести любые недостающие функции.