Доступ к внешним API с помощью AngularJS(перевод статьи)

в 9:22, , рубрики: AngularJS, github, github api, tutorial

Оригинал статьи.
AngularJS имеет простой способ взаимодействия с внешними API. В этой статье я рассмотрю, как использовать службы для доступа к API GitHub и создам простой обозреватель репозитория.

Шаг 1: Подготовка

Начну с простого HTML шаблона:

<!DOCTYPE html>
<html>
    <head>
        <title>GitHub Search</title>
    </head>
    <body>
    </body>
</html>

Добавлю AngularJS в head шаблона:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>

Немного CSS:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: sans-serif;
}
body, html { margin: 0; }
p { margin: 0; }
input { width: 100%; }
pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}
div.repo {
    border-bottom: 1px solid;
    cursor: pointer;
}
#search, #repo, #user { float: left; }
#search { width: 20%; }
#repo { width: 60%; }
#user { width: 20%; }

Шаг 2: Модуль

Модуль приложения:

var app = angular.module('githubsearch', []);

Добавлю его в шаблон с помощью директивы ngApp:

<body ng-app="githubsearch">

Шаг 3: Контроллер

Мне также понадобится контроллер для этого приложения. Для простоты, это будет один контролер для всего приложения, по этому мне не придется иметь дело с передачей информации между контроллерами:

app.controller('SearchController', function SearchController($scope) {
});

Шаг 4: Базовая служба

Определю базовую службу:

app.factory('GitHub', function GitHub($http) {
    return {
    };
});

Я использую метод app.factory(), чтобы просто вернуть объект с несколькими методами и использовать их позже. Я буду использовать $http для получения данных из API GitHub.

Шаг 5: Поиск репозитория

Первый метод в моем сервисе будет поиск репозитория с использованием API GitHub. Использование $http сервиса довольно просто (эта функция переходит в объект возвращенного нашей функции фабрики):

searchRepos: function searchRepos(query, callback) {
    $http.get('https://api.github.com/search/repositories', { params: { q: query } })
        .success(function (data) {
            callback(null, data);
        })
        .error(function (e) {
            callback(e);
        });
}

Метод $http.get() является сокращением от запросы GET. Первый параметр является URL, к которуму я хочу получить доступ. Второй является объектом с параметрами. Мне нужно только params объекта — это хэш параметров запроса, которые будут добавлены к запросу (параметр q является строкой поиска, как описано здесь).

$http.get() возвращает promise. Можно использовать success() и error () слушателей и вызвать соответствующую функцию.

Шаг 6: Блок поиска

Чтобы воспользоваться функцией, которую я создал в предыдущем шаге необходимо добавить поле поиска в html шаблон:

<div ng-controller="SearchController">
	<div id="search">
		<input ng-model="query" placeholder="search" ng-keyup="$event.keyCode == 13 && executeSearch()">
		<div class="repo" ng-repeat="repo in repos" ng-click="openRepo(repo.full_name)">
			<strong>{{ repo.full_name }}</strong>
			<p>{{ repo.description }}</p>
		</div> 			
	</div>   	
</div>

Я использую директиву ngModel для связи значение этого поля и переменную query и ngKeyup для вызова функцию executeSearch(), когда пользователь нажмет клавишу enter ($event.keyCode == 13). Использовать условные операторы в выражениях AngularJS нельзя, но простая логика операций будет работать.

Под полем ввода, я используя ngRepeat для отображения результатов поиска. Я буду выводить полное имя репозитория и описание (можно выводить разные данные, полный список можно посмотреть в API GitHub).

Я также используем ngClick для вызова функцию openRepo() с полным описанием репозитория. Эту функция описана далее.

Шаг 7: Использование функции поиска

Теперь добавлю параметр GitHub к функции контроллера:

app.controller('SearchController', function SearchController($scope,GitHub) {

Функция executeSearch():

$scope.executeSearch = function executeSearch() {
    GitHub.searchRepos($scope.query, function (error, data) {
        if (!error) {
            $scope.repos = data.items;
        }
    });
}

Я вызываю метод GitHub.searchRepos() с параметром поиска $scope.query и помещаю результаты поиска (data.items) в переменную $scope.repos.

Это все, что нужно для вывода результатов поиска. Демо.

Шаг 8: Получение информации о репозитории

Теперь, когда есть функция поиска можно вывести информацию о выбранном репозитории:

getRepo: function getRepo(name, callback) {
    $http.get('https://api.github.com/repos/'+ name)
        .success(function (data) {
            callback(null, data);
        })
        .error(function (e) {
            callback(e);
        });
    }

Название передаваемое в эту функцию должно быть полным именем (имя автора, слэш, имя репозитория — например: angular/angular.js), так как оно будет передано в API GitHub.

Шаг 9: Получение из репозитория README файл

Содержание файл README получу не в предыдущей функции, а в отдельной:

getReadme: function getReadme(name, callback) {
    $http.get('https://api.github.com/repos/'+ name +'/readme')
        .success(function (data) {
            callback(null, atob(data.content));
        })
        .error(function (e) {
            callback(e);
        });
}

Эта и предыдущая функция почти идентичны, только изменен URL. Еще использую функцию atob(), чтобы декодировать содержимое файла README, так как он кодирован в кодировке base64. Получение содержимого файла README описывается здесь.

Я не использовали два запроса в одной функции так как некоторые репозитории нет README файла.

Шаг 10: Отображение информации о репозитории

Я буду отображать полное имя репозитория, количество людей посмотревших его и файл README:

<div id="repo" ng-show="activeRepo">
    <strong>{{ activeRepo.full_name }}</strong> <em>Watched by {{ activeRepo.watchers_count }} people.</em>
    <pre>{{ activeRepo.readme }}</pre>
</div>

Хранить эту информацию я буду в переменной activeRepo. Директива ngShow покажет элемент, только если в нем есть данные.

Шаг 11: Обновление контроллера

Также необходимо обновить контроллер. Функция openRepo(), которую я повесил на директиву ngClick выше:

$scope.openRepo = function openRepo(name) {
    GitHub.getRepo(name, function (error, data) {
        if (!error) {
            $scope.activeRepo = data;
            GitHub.getReadme(name, function (error, data) {
                if (!error) {
                    $scope.activeRepo.readme = data;
                } else {
                    $scope.activeRepo.readme = 'No README found!';
                }
            });
        }
    });
}

Cначала я использую метод GitHub.getRepo(), для проверки на наличие ошибок, а затем помещаю данные в переменной activeRepo. После этого я и получаю файл README.

Демо 2

Автор: romasport

Источник



https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js