Question

AngularJS如何调用外部接口？

Answer 1

第一步：准备工作
　将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当中添加搜索栏。

Answer 2

H5edu教育html5开发 培训为您解答：
angularjs $http调用接口的四种方式：
1.$http.get("/merchantmall/merchant.json")
.success(function(data, status, headers, config) {
console.log(arguments);
})
.error(function(data, status, headers, config) {
console.log(arguments);
})

2.$http({
url: "/merchantmall/merchant.json",
}).success(function(data, status, headers, config) {
console.log(arguments);
}).error(function(data, status, headers, config) {
console.log(arguments);

})

3.var promise = $http({
method: 'GET',
url: '/api/users.json'
});

promise.then(function(resp){
// resp是一个响应对象
}, function(resp) {
// 带有错误信息的resp
});

4.var promise = $http({
method: 'GET',
url: '/api/users.json'
});
promise.success(function(data, status, headers, config){
// 处理成功的响应
});
// 错误处理
promise.error(function(data, status, headers, config){
// 处理非成功的响应
});