- 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);}());