Home > Developer > JavaScript
How to Use AngularJS service to access external APIs (1)
How to Use AngularJS service to access external APIs
In addition to the ability to easily expand HTML, AngularJS also provides a simple way to help us interact with external APIs. In today's tutorial, we will discuss how to use its services to connect with GitHub APIs and then create a simple library browser.
Step 1: Prepare
This basic HTML template is the starting point:
- <!DOCTYPE html>
- <title>GitHub Search</title>
- <body>
- </body>
Now add the AngularJS script to
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
After that, we can add this CCS style to a row or an independent file:
- * {
- -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%; }
As you can see, there is no additional content, and only the most basic layout scheme is retained-the search bar is placed on the right, the library information is located in the center, and the user library is also placed on the right. We also need to package the corresponding code lines into the <pre> tag, later, we will also use it to display the content of the README file-because the content is usually from GitHub Flavored Markdown, and some of the code lines overlap with the user library list.
Of course, you can add a more practical style to improve the visual effect of the Results-but please note that the most basic design is adopted in this tutorial.
In the future, you can write JavaScript code in
Step 2: Module
Now we can create a module for our application:
- var app = angular.module('githubsearch', []);
Next, use the ngApp command to add it to the <body> tag:
- <body ng-app="githubsearch">
Step 3: Controller
We also need to prepare a set of controllers for our own applications. To simplify the creation process, we will only prepare a set of controllers for the application, so that we do not have to consider how to transmit information between different controllers:
- app.controller('SearchController', function SearchController($scope) {
- });
Step 4: basic services
We need to define our GitHub service:
- app.factory('GitHub', function GitHub($http) {
- return {
- };
- });
We will use the app. factory () method to ensure that the returned object will be accompanied by several methods that will be used later. We will use the $ http service to retrieve data from the GitHub API.
Step 5: search the database
The first method in our service is to use GitHub API to search for libraries. Using the service is very simple. This function can enter the objects returned by the manufacturing function ):
- 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 () is a shortcut for executing GET requests. The first parameter is the URL we want to access. The second parameter represents an object with options. Here we only need the params object -- it is a query parameter hash, which will be added to the request, where the q parameter is a search string. You can click here for more information ).
$ Http. get () returns a promise. We can append the listener to success () and error (), and call the callback function accordingly.
Step 6: search bar
To use the functions we have defined in the previous steps, we need to add a search bar in our own HTML. The related code is very simple, as shown below:
- <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>
You can use the ngModel command to direct the value in the input column to the Scope query variable. After you press the Enter key, you can use ngKeyup to call the executeSearch () function for $ event. keyCode = 13 ). We cannot use conditional statements in AngularJS expressions, but a simple logical operator AND is good enough to complete this task.
In the input field, we use ngRepeat to display the search results. We will display the complete name and description of the library. If you need to display other different content, you can click here to view the available domains in the GitHub API instructions ).
We also use ngClick to call the openRepo () function through the full name of the library, so that we can display the relevant information. We will define this function later.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
