使用 Angular js 查找存储库

Question

我正在尝试了解如何使用 Angular js 从 Github 等网站查找存储库。

这背后的机制是什么？ MainController()中有4个函数：

• search 函数将接受 oNUserComplete 和 onError 作为参数。在搜索框中输入初始字符时，onUsercomplete 函数中将定义什么以在输出上显示存储库？分配存储库的功能会在那里吗？基于循环将通过表存在。

Answer 1

要在 GitHub 上查找存储库，您必须使用 GitHub API!

您应该能够通过 AngularJS 的 $http 服务向 GitHub API 发出请求。

Answer 2

正如另一个答案中提到的，您应该阅读 API 文档以了解有关它的所有信息。尤其是search API 对您很重要。

请看下面的演示或fiddle。

它应该可以帮助您入门。 需要补充以下几点：

• 未实现错误处理，但我在代码中添加了一些 cmets，您必须添加该代码。
• 结果的分页。因为此刻一切都会显示出来。

angular.module('demoApp', [])
	.factory('github', githubFactory)
	.controller('MainController', MainController);

function githubFactory($http) {
	var API_URL = 'https://api.github.com/search'+
    	'/repositories?callback=JSON_CALLBACK&q=',
    //tetris+language:assembly&sort=stars&order=desc"
    	factory = {
            result: {},
    		findRepo: findRepo
    };
    
    return factory;
    
    function findRepo(searchTerm) {
    	return $http.jsonp(API_URL +  searchTerm).then(onSuccess, onFail);
        
        function onSuccess(response) {
            factory.result = response.data;
            return response.data;
        }
        
        function onFail(response) {
        	// handle fail here
            console.log(response);
            return {
                data: response.data || 'Request failed',
                status: response.status
            };
        }
    }
}

function MainController(github) {
	var vm = this;
    vm.searchResult = {};
    
    angular.extend(this,  {
    	search: function(term) {
        	github.findRepo(term || '').then(function(data) {
                // add error handler here because Github api will return a ressponse on fail (try with empty search, remove required from input to test) 
                vm.searchResult = data;
            }, function(error) {
                // triggered e.g. wrong url
            	vm.searchResult = error;
            });
        }
    });
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController as ctrl"  class="container-fluid">
    <form ng-submit="ctrl.search(ctrl.searchTerm)">
    <input ng-model="ctrl.searchTerm" placeholder="enter search term" required/>
    <button type="submit">search</button>
    </form>
    <div ng-if="ctrl.searchResult.data.total_count > 0">
        <p>found {{ctrl.searchResult.data.total_count}} entries.</p>
        <div class="list-item-group">
            <div ng-repeat="item in ctrl.searchResult.data.items" class="list-group-item">
                <h2>full name of repo {{item.full_name}}</h2>
                <br/>
                <a ng-href="{{item.html_url}}" target="_blank">go to repo <strong> {{item.name}}</strong></a><br/>
                 <a ng-href="{{item.url}}" target="_blank">show json for repo <strong> {{item.name}}</strong></a>
            </div>
        </div>
    </div>
    <h2>The following is for debugging</h2>
    <pre ng-bind="ctrl.searchResult | json : 2">
    </pre>
</div>