Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-resource.min.js"></script>
<script src="angular.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
<meta charset=utf-8 />
<title>Responsive </title>
</head>
<body>
  
    <div ng-app="gitRepos" ng-controller="gitReposController" breakpoint="min-width: 44.375em">
    <table ng-if="matches && !loading " class="big">
        <thead>
            <tr>
                <th>Repo</th>
                <th>Watchers</th>
                <th>Forks</th>
                <th>Size</th>
                <th>Open Issues</th>
                <th>Owner</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="repo in repos">
                <td><a ng-href="{{repo.html_url}}" target="_blank">{{repo.name}}</a></td>
                <td>{{repo.watchers}}</td>
                <td>{{repo.forks}}</td>
                <td>{{repo.size}}</td>
                <td>{{repo.open_issues}}</td>
                <td><a ng-href="{{repo.owner.html_url}}" title="Repo owner" target="_blank">{{repo.owner.login}}</a></td>
            </tr>
        </tbody>
    </table>
    
    <div ng-if="!matches && !loading"> <!-- Wrapper required to avoid multiple-directioves/transclusion error. See https://github.com/angular-ui/angular-ui/issues/481 -->
        <article class="small" ng-repeat="repo in repos">
            <h1><a ng-href="{{repo.html_url}}" target="_blank">{{repo.name}}</a></h1>
            <h2>Owner: <a ng-href="{{repo.owner.html_url}}" title="Repo owner" target="_blank">{{repo.owner.login}}</a></h2>
            <dl>
                <dt>Watchers</dt><dd>{{repo.watchers}}</dd>
                <dt>Forks</dt><dd>{{repo.forks}}</dd>
                <dt>Size</dt><dd>{{repo.size}}</dd>
                <dt>Open Issues</dt><dd>{{repo.open_issues}}</dd>
            </dl>
        </article>
    </div>
    <div ng-show="loading" class="loading" >
        Loading...  
    </div>
</div>
​
</body>
</html>
 
    .loading {
        position: fixed;
        width: 10em;
        height: 10em;
        line-height: 10em;
        background-color: #444;
        color: #eee;
        margin: auto;
        top: 0; left: 0; bottom: 0; right: 0;
    }
    /* starting animations */
    .loading.ng-hide-add,
    .loading.ng-hide-remove {
      -webkit-transition:0.5s linear all;
      -moz-transition:0.5s linear all;
      -o-transition:0.5s linear all;
      transition:0.5s linear all;
      display:block!important;
    }
    .loading.ng-hide-remove {
      opacity:0;
    }
    .loading.ng-hide-remove.ng-hide-remove-active {
      opacity:1;
    }
    .loading.ng-hide-add {
      opacity:1;
    }
    .loading.ng-hide-add.ng-hide-add-active {
      opacity:0;
    }
 
var app = angular.module("gitRepos", ['ngResource', 'ngAnimate']);
​
app.directive("breakpoint", function () {
    return function (scope, element, attrs) {
        var breakpoint = attrs.breakpoint;
        var mql = window.matchMedia( "(" + breakpoint + ")" );
        var mqlHandler = function (mql) {
            scope.matches = mql.matches;
            if(!scope.$$phase) { //prevents it from unnecessarily calling $scope.$apply when the page first runs
                scope.$apply();
            }
        };
        mql.addListener(mqlHandler);
        mqlHandler(mql);
    };
});
​
// Create and register the new "github" service
app.factory('github', function($resource){
    return {
        fetch: function(callback){
            var api = $resource("http://query.yahooapis.com/v1/public/yql?q=select%20name%2Cowner.login%2C%20owner.html_url%2Chtml_url%2Csize%2Cwatchers%2Cforks%2Copen_issues%20from%20github.repo%20where%20(repo%3D'bootstrap'%20and%20id%3D'twbs')%20OR%20(repo%3D'node'%20and%20id%3D'joyent')%20OR%20(repo%3D'jquery'%20and%20id%3D'jquery')%20%20OR%20(repo%3D'html5-boilerplate'%20and%20id%3D'h5bp')%20OR%20(repo%3D'rails'%20and%20id%3D'rails')&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=JSON_CALLBACK", null, {
                fetch:{method:'JSONP'}
            });
            api.fetch(function(response){
                // Call the supplied callback function
                callback(response.query.results.json);
            });
        }
    };
​
});
​
function gitReposController($scope, github){
    $scope.repos = [];
    $scope.loading = true;
    github.fetch(function(data){
        $scope.repos = data;
        $scope.loading = false;
    });
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers