setTimeout - metoda JS wykonująca metodę przekazaną jako pierwszy argument po upływie ilości milisekund podanych jako drugi parametr np setTimeout(doWork, 2000);
setInterval - metoda JS wykonująca metodę przekazaną jako pierwszy argument co ilości milisekund podanych jako drugi parametr np setInterval(doWork, 2000);
Serwisy Angular wykonujące to samo:
  • $timeout
  • $interval
Łatwiej jest testować aplikację za pomocą testów jednostkowych z użyciem serwisów Angular.
Wszystkie serwisy trzeba zarejestrować jako parametry kontrolera np var MainController = function($scope, $http, $interval){...}
Przykład:
indeks.html:
<!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> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller="MainController"> <h1>{{message}}</h1> <div>{{ error }}</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 ng-include="'userdetails.html'" ng-show="user"></div> </body> </html>
script.js:
(function() { var app = angular.module("githubViewer", []); var MainController = function($scope, $http, $interval) { var onUserComplete = function(response) { $scope.user = response.data; $http.get($scope.user.repos_url) .then(onRepos, onError); }; var onRepos = function(response){ $scope.repos = response.data; }; var onError = function(reason) { $scope.error = "Could not fetch the data."; }; var decrementCountdown = function(){ $scope.countdown -=1 if($scope.countdown < 1){ $scope.search($scope.username); } }; var startCountDown = function(){ $interval(decrementCountdown, 1000, $scope.countdown); }; $scope.search = function(username){ $http.get("https://api.github.com/users/" + username) .then(onUserComplete, onError); }; $scope.username = "angular"; $scope.message = "GitHub Viewer"; $scope.repoSortOrder = "-stargazers_count"; $scope.countdown = 5; startCountDown(); }; app.controller("MainController", ["$scope", "$http", "$interval", MainController]); }());
Inne przykładowe serwisy Angular:
  • $log
  • $animate
  • $anchorScroll - skroluje do adresu w HTML po id
  • $location - adres w przeglądarce
  • $browser
  • $window
  • $timeout
  • $interval
  • $http
Własne serwisy:
  • kod wielokrotnego użytku
  • współdzielone dane
  • uproszczenie kodu
Przykład: githubService
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; }); }; return { getUser: getUser, getRepos: getRepos }; }; var module = angular.module("githubViewer"); module.factory("github", github); }());
script.js:
(function() { var app = angular.module("githubViewer", []); var MainController = function($scope, github, $interval, $log, $anchorScroll, $location) { var onUserComplete = function(data) { $scope.user = data; github.getRepos($scope.user) .then(onRepos, onError); }; var onRepos = function(data) { $scope.repos = data; $location.hash("userDetails"); $anchorScroll(); }; var onError = function(reason) { $scope.error = "Could not fetch the data."; }; 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) { $log.info("Searching for " + username); github.getUser(username) .then(onUserComplete, onError); $http.get("https://api.github.com/users/" + username) .then(onUserComplete, onError); if (countDownInterval) { $interval.cancel(countDownInterval); $scope.countdown = null; } }; $scope.username = "angular"; $scope.message = "GitHub Viewer"; $scope.repoSortOrder = "-stargazers_count"; $scope.countdown = 5; startCountDown(); }; app.controller("MainController", MainController); }());