• Wymaga modułu angular-route.js
  • Konfiguracja zasad w $routeProvider np:
          $routeProvider.when("/main",{
               templateUrl:"main.html", 
               controller: "MainController"
          })
  • Trzeba skonfigurować szablon widoków
Konfiguracja routingu
  • trzeba dodać skrypt angular-route.js.
  • $routeParams - serwis zbierający parametry routingu
Przykład:
indeks.html   - SZABLON:
<!DOCTYPE html> <html ng-app="githubViewer"> <head> <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> <script data-require="angular-route@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/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> <script src="github.js"></script> </head> <body> <h1>Github Viewer</h1> <div ng-view> </div> </body> </html>
app.js  -KONFIGURACJA APLIKACJI:
(function(){ var app = angular.module("githubViewer", ["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"}); }); }());
MainController.js :
(function() { var app = angular.module("githubViewer"); var MainController = function($scope, $interval, $location) { var decrementCountdown = function() { $scope.countdown -= 1 if ($scope.countdown < 1) { $scope.search($scope.username); } }; var countDownInterval = null; var startCountDown = function() { countDownInterval = $interval(decrementCountdown, 1000, $scope.countdown); }; $scope.search = function(username) { if (countDownInterval) { $interval.cancel(countDownInterval); $scope.countdown = null; } //route to user page $location.path("/user/"+username); }; $scope.username = "angular"; $scope.repoSortOrder = "-stargazers_count"; $scope.countdown = 5; startCountDown(); }; app.controller("MainController", MainController); }());
main.html:
 <div>
  {{countdown}}
  <form name="searchUser" ng-submit="search(username)">
    <input type="search" required placeholder="Username to find" ng-model="username" />
    <input type="submit" value="Search">
  </form>
</div>
UserController.js:
(function() {
  var app = angular.module("githubViewer");
  var UserController = function($scope, github, $routeParams) {
    var onUserComplete = function(data) {
      $scope.user = data;
      github.getRepos($scope.user)
        .then(onRepos, onError);
    };
    var onRepos = function(data) {
      $scope.repos = data;
    };
    var onError = function(reason) {
      $scope.error = "Could not fetch the data.";
    };
    $scope.username = $routeParams.username;
    $scope.repoSortOrder = "-stargazers_count";
    github.getUser($scope.username)
      .then(onUserComplete, onError);
  };
  app.controller("UserController", UserController);
}());
user.html:
<div>
  <h2>{{user.name}}</h2>
  {{error}}
  <img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" title="{{user.name}}">Order:
  <select ng-model="repoSortOrder">
    <option value="+name">Name</option>
    <option value="-stargazers_count">Stars</option>
    <option value="+language">Language</option>
  </select>
</div>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Stars</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="repo in repos | orderBy:repoSortOrder">
      <td>
        <a href="#/repo/{{user.login}}/{{repo.name}}">{{repo.name}}</a>
      </td>
      <td>{{repo.stargazers_count | number}}</td>
      <td>{{repo.language}}</td>
    </tr>
  </tbody>
</table>
<a href="#/main">Back to search</a>
RepoController:
(function(){
  var module = angular.module("githubViewer");
  var RepoController = function($scope, $routeParams, github){
    var onRepo = function(data){
      $scope.repo = data;
    };
    var onError = function(reason){
      $scope.error = reason;
    };
    var reponame = $routeParams.reponame;
    var username = $routeParams.username;
    github.getRepoDetails(username, reponame)
      .then(onRepo, onError);
  };
  module.controller("RepoController", RepoController);
}());
repo.html:
<h2>{{repo.name}}</h2>
<div>
  Issues: {{repo.open_issues_count}}
</div>
<div>
  <ul>
    <li ng-repeat="user in repo.collaborators">
      <img src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" alt="{{user.login}}">
      {{user.login}}
    </li>
  </ul>
</div>
<a href="#/main">Back to search</a>
<a href="#/user/{{repo.owner.login}}">Back to {{repo.owner.login}}</a>
github.js:
(function() {
  var github = function($http) {
    var getUser = function(username) {
      return $http.get("https://api.github.com/users/" + username)
        .then(function(response) {
          return response.data;
        });
    };
    var getRepos = function(user) {
      return $http.get(user.repos_url)
        .then(function(response) {
          return response.data;
        });
    };
    var getRepoDetails = function(username, reponame){
      var repo;
      var repoUrl = "https://api.github.com/repos/" + username + "/" + reponame;
      return $http.get(repoUrl)
        .then(function(response){
          repo = response.data;
          return $http.get(repoUrl + "/collaborators");
        })
        .then(function(response){
          repo.collaborators = response.data;
          return repo;
        });
    };
    return {
      getUser: getUser,
      getRepos: getRepos,
      getRepoDetails: getRepoDetails
    };
  };
  var module = angular.module("githubViewer");
  module.factory("github", github);
}());