如何利用AngularJS服务接入外部API

提问者:lxcsuperx 提问时间:2016年05月23日 人气:14
推荐答案
第一步:准备工作
 将AngularJS脚本添加到该文档的当中:  
  在此之后,可以在将这套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:1pxsolid;
  cursor:pointer;
  }
  #search,#repo,#user{float:left;}
  #search{width:20%;}
  #repo{width:60%;}
  #user{width:20%;}
  如大家所见,其中不存在任何多余的内容、只保留最基础的布局方案——将搜索栏置于右侧、库信息位于中央、用户库同样置于右侧。我们还需要将对应代码行打包至标签当中,此后我们还要利用它显示README文件内容——因为这些内容通常来自GitHub Flavored Markdown、而且其中一部分代码行与用户库列表存在重叠。
  当然,大家可以向其中添加更多样式以提升成果的视觉效果——但请注意,本教程中的截图都采取最基本的外观设计。
  大家可以未来需要编写的JavaScript代码置于本文档的当中或者为其建立独立文件,但独立文件仍然需要处于AngularJS脚本之下。
  第二步:模块
  现在我们可以为自己的应用程序创建一个模块:
  varapp=angular.module('githubsearch',[]);
  接下来利用ngApp指令将其添加到标签当中:  
  第三步:控制器
  我们还需要为自己的应用程序准备一套控制器。为了简化创建流程,我们将只为应用准备一套控制器,这样我们就不必考虑如何在不同控制器之间进行信息传递了:
  app.controller('SearchController',functionSearchController($scope){
  });
  第四步:基础服务
  我们需要对自己的GitHub服务进行定义:
  app.factory('GitHub',functionGitHub($http){
  return{
  };
  });
  我们将使用app.factory()方法,这样就能保证返回对象附带几个以后将会用到的方法。我们将使用$http服务从GitHub的API中获取数据。
  第五步:搜索库
  我们服务中的第一项方法负责利用GitHub API对库进行搜索。使用服务非常简单(这项函数能够进入由制造函数返回的对象):
  searchRepos:functionsearchRepos(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当中添加搜索栏。
辅助答案
用户:踏古征王once
2016年05月28日
第一步:准备工作

我们就以下面这套基础HTML模板为起点:
1.<!DOCTYPE html>
2.<html>
3. <head>
4. <title>GitHub Search</title>
5. </head>
6. <body>
7.
8. </body>
9.</html>

现在将AngularJS脚本添加到该文档的<head>当中:
1.<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>

在此之后,我们可以在将这套CCS样式添加到行内或者独立的文件当中:

1.* {
2. -webkit-box-sizing: border-box;
3. -moz-box-sizing: border-box;
4. box-sizing: border-box;
5. font-family: sans-serif;
6.}
7.
8.body, html { margin: 0; }
9.p { margin: 0; }
10.input { width: 100%; }
11.
12.pre {
13. white-space: pre-wrap;
14. white-space: -moz-pre-wrap;
15. white-space: -pre-wrap;
16. white-space: -o-pre-wrap;
17. word-wrap: break-word;
18.}
19.
20.div.repo {
21. border-bottom: 1px solid;
22. cursor: pointer;
23.}
24.
25.#sea www.hbbz08.com rch, #repo, #user { float: left; }
26.#search { width: 20%; }
27.#repo { width: 60%; }
28.#user { width: 20%; }

如大家所见,其中不存在任何多余的内容、只保留最基础的布局方案——将搜索栏置于右侧、库信息位于中央、用户库同样置于右侧。我们还需要将对应代码行打包至<pre>标签当中,此后我们还要利用它显示README文件内容——因为这些内容通常来自GitHub Flavored Markdown、而且其中一部分代码行与用户库列表存在重叠。

当然,大家可以向其中添加更多样式以提升成果的视觉效果——但请注意,本教程中的截图都采取最基本的外观设计。

大家可以未来需要编写的JavaScript代码置于本文档的<head>当中或者为其建立独立文件,但独立文件仍然需要处于AngularJS脚本之下。

第二步:模块

现在我们可以为自己的应用程序创建一个模块:
1.var app = angular.module('githubsearch', []);

接下来利用ngApp指令将其添加到<body>标签当中:
1.<body ng-app="githubsearch">

第三步:控制器

我们还需要为自己的应用程序准备一套控制器。为了简化创建流程,我们将只为应用准备一套控制器,这样我们就不必考虑如何在不同控制器之间进行信息传递了:

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