如何利用AngularJS服务接入外部API
1个回答
推荐于2016-10-11 · 知道合伙人数码行家
huanglenzhi
知道合伙人数码行家
采纳数：117538
获赞数：517201
长期从事计算机组装，维护，网络组建及管理。对计算机硬件、操作系统安装、典型网络设备具有详细认知。
向TA提问 私信TA
关注
![]()
展开全部
如何利用AngularJS服务接入外部API
除了轻松对HTML进行扩展的能力之外，AngularJS还提供一套简便途径、帮助我们与外部API实现交互。在今天的教程中，我们将共同探讨如何利用其服务与GitHub的API相对接，进而创建一套简单的库浏览器。
第一步：准备工作
我们就以下面这套基础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> 在此之后，我们可以在将这套CCS样式添加到行内或者独立的文件当中：
* { -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%; }
如大家所见，其中不存在任何多余的内容、只保留最基础的布局方案——将搜索栏置于右侧、库信息位于中央、用户库同样置于右侧。我们还需要将对应代码行打包至<pre>标签当中，此后我们还要利用它显示README文件内容——因为这些内容通常来自GitHub Flavored Markdown、而且其中一部分代码行与用户库列表存在重叠。
当然，大家可以向其中添加更多样式以提升成果的视觉效果——但请注意，本教程中的截图都采取最基本的外观设计。
大家可以未来需要编写的JavaScript代码置于本文档的<head>当中或者为其建立独立文件，但独立文件仍然需要处于AngularJS脚本之下。
第二步：模块
现在我们可以为自己的应用程序创建一个模块：
var app = angular.module('githubsearch', []); 接下来利用ngApp指令将其添加到<body>标签当中：
<body ng-app="githubsearch"> 第三步：控制器
我们还需要为自己的应用程序准备一套控制器。为了简化创建流程，我们将只为应用准备一套控制器，这样我们就不必考虑如何在不同控制器之间进行信息传递了：
app.controller('SearchController', function SearchController($scope) { });
第四步：基础服务
我们需要对自己的GitHub服务进行定义：
app.factory('GitHub', function GitHub($http) { return { }; });
我们将使用app.factory()方法，这样就能保证返回对象附带几个以后将会用到的方法。我们将使用$http服务从GitHub的API中获取数据。
第五步：搜索库
我们服务中的第一项方法负责利用GitHub API对库进行搜索。使用服务非常简单（这项函数能够进入由制造函数返回的对象）：
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()会返回一项承诺。我们可以将监听器附加在success()与error()上，并且据此调用回调函数。
第六步：搜索栏
为了使用我们在之前几步中定义完成的函数，我们需要在自己的HTML当中添加搜索栏。相关代码非常简单，如下所示：
<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调用executeSearch()函数（这样$event.keyCode == 13就会进行比较）。我们无法在AngularJS表达式中使用条件语句，但一条简单的逻辑运算符（AND）足以很好地完成这项任务。
在输入域下面，我们使用ngRepeat来显示搜索结果。我们将显示该库的完整名称与描述（如果需要显示其它不同内容，大家可以点击此处查看GitHub API说明文档中的可用域）。
我们还使用ngClick通过该库的完整名称来调用openRepo()函数，这样我们就能显示与之相关的信息。我们稍后再对该函数进行定义。
转载
除了轻松对HTML进行扩展的能力之外，AngularJS还提供一套简便途径、帮助我们与外部API实现交互。在今天的教程中，我们将共同探讨如何利用其服务与GitHub的API相对接，进而创建一套简单的库浏览器。
第一步：准备工作
我们就以下面这套基础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> 在此之后，我们可以在将这套CCS样式添加到行内或者独立的文件当中：
* { -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%; }
如大家所见，其中不存在任何多余的内容、只保留最基础的布局方案——将搜索栏置于右侧、库信息位于中央、用户库同样置于右侧。我们还需要将对应代码行打包至<pre>标签当中，此后我们还要利用它显示README文件内容——因为这些内容通常来自GitHub Flavored Markdown、而且其中一部分代码行与用户库列表存在重叠。
当然，大家可以向其中添加更多样式以提升成果的视觉效果——但请注意，本教程中的截图都采取最基本的外观设计。
大家可以未来需要编写的JavaScript代码置于本文档的<head>当中或者为其建立独立文件，但独立文件仍然需要处于AngularJS脚本之下。
第二步：模块
现在我们可以为自己的应用程序创建一个模块：
var app = angular.module('githubsearch', []); 接下来利用ngApp指令将其添加到<body>标签当中：
<body ng-app="githubsearch"> 第三步：控制器
我们还需要为自己的应用程序准备一套控制器。为了简化创建流程，我们将只为应用准备一套控制器，这样我们就不必考虑如何在不同控制器之间进行信息传递了：
app.controller('SearchController', function SearchController($scope) { });
第四步：基础服务
我们需要对自己的GitHub服务进行定义：
app.factory('GitHub', function GitHub($http) { return { }; });
我们将使用app.factory()方法，这样就能保证返回对象附带几个以后将会用到的方法。我们将使用$http服务从GitHub的API中获取数据。
第五步：搜索库
我们服务中的第一项方法负责利用GitHub API对库进行搜索。使用服务非常简单（这项函数能够进入由制造函数返回的对象）：
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()会返回一项承诺。我们可以将监听器附加在success()与error()上，并且据此调用回调函数。
第六步：搜索栏
为了使用我们在之前几步中定义完成的函数，我们需要在自己的HTML当中添加搜索栏。相关代码非常简单，如下所示：
<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调用executeSearch()函数（这样$event.keyCode == 13就会进行比较）。我们无法在AngularJS表达式中使用条件语句，但一条简单的逻辑运算符（AND）足以很好地完成这项任务。
在输入域下面，我们使用ngRepeat来显示搜索结果。我们将显示该库的完整名称与描述（如果需要显示其它不同内容，大家可以点击此处查看GitHub API说明文档中的可用域）。
我们还使用ngClick通过该库的完整名称来调用openRepo()函数，这样我们就能显示与之相关的信息。我们稍后再对该函数进行定义。
转载
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
