AngularJS Routing Example

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="MainController.js"></script>
    <script src="UserController.js"></script>
    <script src="RepoController.js"></script>
  </head>

  <body>
    <header>
      <a href="#/main">
        <h1>Github Viewer</h1>
      </a>
      
    </header>
    
    <div ng-view></div>
    
  </body>

</html>

(function(){
  
  var UserController = function($scope, $http, $routeParams) {
    
    var repoready = function(response) {
      $scope.repos = response.data;
    };
    
    var ready = function(response) {
      $scope.user = response.data;
      
      $http.get($scope.user.repos_url)
          .then(repoready, error);
    };

    var error = function(reason) {
      $scope.error = reason.data.message;
    };
    
    var getuser = function(username) {
      $http.get("https://api.github.com/users/" + username)
          .then(ready, error);
    };
    
    var username = $routeParams.username;
    getuser(username);
  };

  var myApp = angular.module('myApp');
  myApp.controller('UserController', ["$scope", "$http", "$routeParams", UserController]);

  
}());

/* Styles go here */
img {
  width:200px;
}

(function() {
  var app = angular.module('myApp', ['ngRoute']);
  
  app.config(function($routeProvider) {
    $routeProvider
      .when("/main", {
        templateUrl: "main.html",
        controller: "MainController"
      })
      .when("/user/:username", {
        templateUrl: "user.html",
        controller: "UserController"
      })
      .when("/repo/:username/:reponame", {
        templateUrl: "repo.html",
        controller: "RepoController"
      })
      .otherwise({redirectTo:"/main"});
  });
  
}());

<form ng-submit="search(username)">
  Type GitHub username to search:
  <input type="search" required="" placeholder="ZeningQu" ng-model="username" />
  <input type="submit" value="Search" />
</form>

(function() {

  var RepoController = function($scope, $http, $routeParams) {

    var contributorready = function(response) {
      $scope.contributors = response.data;
    };
    
    var ready = function(response) {
      var contributors_url = response.data.contributors_url;
      $http.get(contributors_url)
        .then(contributorready, error);
    };

    var error = function(reason) {
      $scope.message = reason;
    };

    var getrepo = function() {
      $http.get("https://api.github.com/repos/" + $scope.username + "/" + $scope.reponame)
        .then(ready, error);
    };

    $scope.username = $routeParams.username;
    $scope.reponame = $routeParams.reponame;
    getrepo();
  };

  var myapp = angular.module('myApp');
  myapp.controller('RepoController', ["$scope", "$http", "$routeParams", RepoController]);
}());

(function(){
  
  var MainController = function($http, $scope, $interval, $location) {
    
    
    $scope.search = function(username) {
      console.log("going to new page: " + username)
      $location.path("/user/" + username)
    }
    
    
    $scope.username = "ZeningQu";
    
  };

  var myApp = angular.module('myApp');
  myApp.controller('MainController', ["$http", "$scope", "$interval", "$location", MainController]);

  
}());

{{error}}

<div>
  <div>{{user.name}}</div>
  <img ng-src="{{user.avatar_url}}"/>
</div>

<table>
  <thead>
    <tr>
      <th>Repo</th> <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="repo in repos">
      <td><a href="#/repo/{{user.login}}/{{repo.name}}">{{repo.name}}</a></td>
      <td>{{repo.language}}</td>
    </tr>
  </tbody>
</table>

{{message}}

<div>Repo: {{reponame}}</div>
<div>Contributors: </div>
<div ng-repeat="ppl in contributors">
  {{ppl.login}}
</div>