AngularJS如何调用外部接口?
发布网友
发布时间：2022-04-26 16:18
共2个回答
热心网友
时间：2022-04-20 01:17
将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.mole('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当中添加搜索栏。
热心网友
时间：2022-04-20 02:35
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){
// 处理非成功的响应
});
