怎么利用AngularJS服務(wù)接入外部API

這篇文章將為大家詳細講解有關(guān)怎么利用AngularJS服務(wù)接入外部API，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、做網(wǎng)站、任城網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、任城網(wǎng)絡(luò)營銷、任城企業(yè)策劃、任城品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供任城建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：www.rwnh.cn

如何利用AngularJS服務(wù)接入外部API

除了輕松對HTML進行擴展的能力之外，AngularJS還提供一套簡便途徑、幫助我們與外部API實現(xiàn)交互。在今天的教程中，我們將共同探討如何利用其服務(wù)與GitHub的API相對接，進而創(chuàng)建一套簡單的庫瀏覽器。

***步：準備工作

我們就以下面這套基礎(chǔ)HTML模板為起點：

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

現(xiàn)在將AngularJS腳本添加到該文檔的<head>當中：

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

在此之后，我們可以在將這套CCS樣式添加到行內(nèi)或者獨立的文件當中：

* {      -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%; }

如大家所見，其中不存在任何多余的內(nèi)容、只保留最基礎(chǔ)的布局方案——將搜索欄置于右側(cè)、庫信息位于中央、用戶庫同樣置于右側(cè)。我們還需要將對應(yīng)代碼行打包至<pre>標簽當中，此后我們還要利用它顯示README文件內(nèi)容——因為這些內(nèi)容通常來自GitHub Flavored Markdown、而且其中一部分代碼行與用戶庫列表存在重疊。

當然，大家可以向其中添加更多樣式以提升成果的視覺效果——但請注意，本教程中的截圖都采取最基本的外觀設(shè)計。

大家可以未來需要編寫的JavaScript代碼置于本文檔的<head>當中或者為其建立獨立文件，但獨立文件仍然需要處于AngularJS腳本之下。

第二步：模塊

現(xiàn)在我們可以為自己的應(yīng)用程序創(chuàng)建一個模塊：

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

接下來利用ngApp指令將其添加到<body>標簽當中：

<body ng-app="githubsearch">

第三步：控制器

我們還需要為自己的應(yīng)用程序準備一套控制器。為了簡化創(chuàng)建流程，我們將只為應(yīng)用準備一套控制器，這樣我們就不必考慮如何在不同控制器之間進行信息傳遞了：

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

第四步：基礎(chǔ)服務(wù)

我們需要對自己的GitHub服務(wù)進行定義：

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

我們將使用app.factory()方法，這樣就能保證返回對象附帶幾個以后將會用到的方法。我們將使用$http服務(wù)從GitHub的API中獲取數(shù)據(jù)。

第五步：搜索庫

我們服務(wù)中的***項方法負責利用GitHub API對庫進行搜索。使用服務(wù)非常簡單（這項函數(shù)能夠進入由制造函數(shù)返回的對象）：

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()方法是執(zhí)行GET請求的一種捷徑。***條參數(shù)是我們希望訪問的URL。第二條參數(shù)則代表一個具備選項的對象。這里我們只需要params對象——它是一個查詢參數(shù)散列，將被添加到該請求當中（其中q參數(shù)屬于搜索字符串，大家可以點擊此處了解更多相關(guān)信息）。

$http.get()會返回一項承諾。我們可以將監(jiān)聽器附加在success()與error()上，并且據(jù)此調(diào)用回調(diào)函數(shù)。

第六步：搜索欄

為了使用我們在之前幾步中定義完成的函數(shù)，我們需要在自己的HTML當中添加搜索欄。相關(guān)代碼非常簡單，如下所示：

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

我們使用ngModel指令將該輸入欄中的值指向至Scope query變量，并在用戶按下回車鍵后利用ngKeyup調(diào)用executeSearch()函數(shù)（這樣$event.keyCode == 13就會進行比較）。我們無法在AngularJS表達式中使用條件語句，但一條簡單的邏輯運算符（AND）足以很好地完成這項任務(wù)。

在輸入域下面，我們使用ngRepeat來顯示搜索結(jié)果。我們將顯示該庫的完整名稱與描述（如果需要顯示其它不同內(nèi)容，大家可以點擊此處查看GitHub API說明文檔中的可用域）。

我們還使用ngClick通過該庫的完整名稱來調(diào)用openRepo()函數(shù)，這樣我們就能顯示與之相關(guān)的信息。我們稍后再對該函數(shù)進行定義。

第七步：使用搜索功能

現(xiàn)在我們終于可以使用自己創(chuàng)建完成的服務(wù)了。首先，將GitHub參數(shù)添加至控制器函數(shù)（這樣該服務(wù)就能被注入到AngularJS當中）：

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

現(xiàn)在定義executeSearch()函數(shù)：

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

如大家所見，我們利用來自$scope.query的搜索字符串從當中調(diào)用GitHub.searchRepos()，而后在回調(diào)中將搜索結(jié)果（來自data.items）加入$scope.repos變量。

只要執(zhí)行以上步驟，我們就能順利顯示出搜索結(jié)果。在瀏覽器中打開我們的HTML文件并嘗試進行搜索：

怎么利用AngularJS服務(wù)接入外部API

第八步：獲取庫中的數(shù)據(jù)

現(xiàn)在我們已經(jīng)獲得了搜索功能，可以顯示出庫中用戶所選定的信息內(nèi)容。下面我們再創(chuàng)建一條函數(shù)，旨在通過自己的服務(wù)獲取來自庫的數(shù)據(jù)：

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

被傳遞至此函數(shù)的名稱必須為完整名稱（結(jié)構(gòu)為：作者名稱、斜杠、庫名稱——例如angular/angular.js），這是因為我們需要將其傳遞至GitHub API（點擊此處查看更多說明）。

第九步：獲取庫中的README文件

README文件中的內(nèi)容并未被包含在我們利用以上函數(shù)獲取到的數(shù)據(jù)當中。相反，大家需要利用另一個API進行調(diào)用及獲取，因此我們需要創(chuàng)建以下函數(shù)：

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);          });  }

這條函數(shù)與之前我們創(chuàng)建完畢的兩條基本相同，只不過對URL進行了變更。我們還要利用atob()函數(shù)解碼README文件的內(nèi)容，因為它采用base64編碼機制。大家可以點擊此處查看GitHub API說明文檔中與獲取README文件內(nèi)容相關(guān)的信息。

我們之所以沒有將這兩條請求塞進同一個函數(shù)當中，是因為某些庫根本不具備 README文件。如果我們將二者強行結(jié)合，應(yīng)用程序可能因此發(fā)生故障。

第十步：顯示庫信息

我們將在另一個元素<div>當中顯示庫的完整名稱、查看過該庫的人數(shù)以及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>

我們將把該信息保存在控制器Scope內(nèi)的activeRepo變量當中。只要存在可以顯示的數(shù)據(jù)，ngShow就會將該元素顯示出來（如果不存在可以顯示的數(shù)據(jù)，我們將只能看到‘Watched by people’文本，而且沒有任何庫被選中）。

第十一步：更新控制器

我們還需要對控制器進行更新，從而保證其切實獲取到庫數(shù)據(jù)并將其納入Scope當中。下面創(chuàng)建我們之前附加至ngClick指令的openRepo()函數(shù)：

$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!';                  }              });          }      });  }

如大家所見，我們首先使用GitHub.getRepo()方法、檢查錯誤而后將該數(shù)據(jù)引入activeRepo變量。接下來，我們獲取README文件——如果該文件不存在，我們需要向用戶提示該情況。

現(xiàn)在大家可以再次運行自己的應(yīng)用程序并查看其實際效果：

怎么利用AngularJS服務(wù)接入外部API

第十二步：獲取用戶的庫

為了將更多功能引入到我們的應(yīng)用程序當中，我們將為屏幕右方已被選定庫的持有者顯示其所有可用庫。這要求我們向服務(wù)中引入另一個方法：

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

其內(nèi)容與此前的幾條幾乎無甚差別（大家可以點擊此處查看更多與此API請求相關(guān)的信息）。

第十三步：顯示用戶的庫

這基本上相當于重現(xiàn)HTML中的搜索欄機制，不過我們實際需要顯示的是用戶名稱與user對象中的庫，而非輸入域或者Scope本身：

<div id="user">     <strong>{{ user.login }}</strong>     <div class="repo" ng-repeat="repo in user.repos" ng-click="openRepo(repo.full_name)">         <strong>{{ repo.name }}</strong>         <p>{{ repo.description }}</p>     </div> </div>

到了這一步，大家應(yīng)該已經(jīng)擁有了一套能夠切實運作的AngularJS應(yīng)用程序——它可以根據(jù)搜索字符串獲取GitHub庫。大家可以進一步對其進行迭代，例如向其中添加更多功能或者為其設(shè)計完全不同的外觀樣式。

關(guān)于“怎么利用AngularJS服務(wù)接入外部API”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

網(wǎng)頁標題：怎么利用AngularJS服務(wù)接入外部API
網(wǎng)頁鏈接：http://www.rwnh.cn/article6/jgpdig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、服務(wù)器托管、手機網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計公司、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

怎么利用AngularJS服務(wù)接入外部API