猿问
下载APP

请问一下如何利用AngularJS服务接入外部API?

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


噜噜哒
浏览 70回答 3
3回答

慕斯卡3215842

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

慕容3067478

区别: angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 

收到一只叮咚

实在是不能对jquery的ajax方法和基于页面dom的各种取值、传值方法满意(虽然jquery已经解救过我一次了),刚好手上这个项目用jquery的方法写了一半,决定试试很久以前自学的angularJS,把现在项目中jquery得部分用angularJS重写一遍。写的时候碰到很多问题,因为刚开始用,写法思路还是和写jquery相似,导致与在一个生成select option下拉框时花费了2个小时才最终搞定。普通html select option, 需要该字段名称name,选线id,选项label<select name="data" id="data_select"><option value="id1">a</option><option value="id2">b</option><option value="id3">c</option></select>jquery的取选项得做法select_id = $("#data_select option:selected").val();jqueryde的思路大概是上面这样的,但是使用了angularJS后,着实让我迷惑了angularJS在select下使用ng-option 标签生成选项实例<select class="form-control"ng-model="bubble_inputs.y"ng-options="y.name for y in basic_data.frameworks_y">生成的html dom如下:<select class="form-control ng-valid ng-dirty"ng-model="bubble_inputs.x"ng-options="x.name for x in basic_data.frameworks_x"><option value="0">x1</option><option value="1">x2</option><option value="2">x3</option><option value="3">x4</option>...</select>看见这个输出,我发现没法把id写在option > value上这岂不是无法获取选项信息了?这不行,万万不行 。结果开始了长时间的google,还是没有解决办法,就只能生成这种只有label的option,这咋办呢?难道要用ng-repeat生成option?<select class="form-control" name="y_id" id="type_y"><option ng-repeat="framework_y in basic_data.frameworks_y" value="{{framework_y.id}}">{{framework_y.name}}</option></select>我甚至开始这么尝试了,但是我的理智战胜了偷懒的邪念,决定通过ng-click取model里的值看一看,结果console.log出来一看,发现自己一个多小时都傻x了。看看console里的结果:Object {bubble_name: "ab", bubble_description: "b", x: Object, y: Object, series: Object}bubble_description: "b"bubble_name: "ab"series: Objectx: Objecty: Objectdate: "2014-03-11 09:03:22"description: ""disable_flag: "1"id: "9"name: "y3"position: "1"team_id: "8"type: "y"__proto__: Object__proto__: ObjectangularJS根据model的名称早就把每个相关的input的值自动放在Object中了根本不在需要什么value=‘id’,只要把model的object从接口中取出来,放在html页面上,、选中的option的全部数据angularJS自动就帮我取到controller中得点击事件中去了。
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答