<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <style>
      BODY { font-size: 2em;}
    </style>
    <script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script src="app.js"></script>
    <script src="app-settings.js"></script>
    <script src="app-title.js"></script>
    <script src="current-time.service.js"></script>
    <script src="current-time2.service.js"></script>
    <script src="main.controller.js"></script>
    <script src="square.service.js"></script>
    <script src="unicorn-launcher.js"></script>
  </head>
  <body ng-controller='MainController'>
    <h1>{{ appTitle }}</h1>
    <div>
      <div>square of 5: <strong>{{ squareSample }}</strong></div>
      <div>currentTime: <strong>{{ currentTime | date: 'HH:mm:ss' }}</strong></div>
      <div>currentTime2: <strong>{{ currentTime2.value | date: 'HH:mm:ss' }}</strong></div>
      <div>unicornLauncher launchedCount : <strong>{{ unicornLauncher.launchedCount }}</strong></div>
      <div>unicornLauncher useTinfoilShielding: <strong>{{ unicornLauncher.useTinfoilShielding }}</strong></div>
    </div>
  </body>
</html>
angular.module('myApp', []);
angular.module('myApp')
  .controller('MainController', [
    '$scope', 
    'appTitle', 
    'squareService', 
    'currentTimeService', 
    'currentTime2Service',
    'unicornLauncher',
    function (
      $scope, 
      appTitle, 
      squareService, 
      currentTimeService, 
      currentTime2Service,
      unicornLauncher) {
        $scope.appTitle = appTitle;
        $scope.squareSample = squareService.square(5);
        $scope.currentTime = currentTimeService.currentTime;
        $scope.currentTime2 = currentTime2Service.currentTime;
        
        unicornLauncher.launch();
        unicornLauncher.launch();
        $scope.unicornLauncher = unicornLauncher;
      }
  ]);
angular.module('myApp')
  .value('appTitle', 'My Angular Application');
angular.module('myApp')
  .constant('appSettings', {
    useTinfoilShielding: true
  });
angular.module('myApp')
  .service('squareService', function() {
	  this.square = function(value) {
	    return value * value;
	  };
});
angular.module('myApp')
  .service('currentTimeService', ['$timeout', function($timeout) {
    var self = this;
	  this.currentTime = new Date();
    
    tick();
    
    function tick() {
      $timeout(function() {
        self.currentTime = new Date();
        tick();
      }, 1000);
    }
}]);
angular.module('myApp')
  .service('currentTime2Service', ['$timeout', function($timeout) {
    var self = this;
	  this.currentTime = {
	    value: new Date()
	  };
    
    tick();
    
    function tick() {
      $timeout(function() {
        self.currentTime.value = new Date();
        tick();
      }, 1000);
    }
}]);
function UnicornLauncher(useTinfoilShielding) {
  this.launchedCount = 0;
  this.useTinfoilShielding = useTinfoilShielding;
  this.launch = function() {
    this.launchedCount++;
  }
}

angular.module('myApp')
  .provider('unicornLauncher', function UnicornLauncherProvider() {
    var useTinfoilShielding = false;
    this.useTinfoilShielding = function(value) {
  	  useTinfoilShielding = !!value;
    };
    this.$get = function unicornLauncherFactory() {
  	  return new UnicornLauncher(useTinfoilShielding);
    };
  })
  .config(['unicornLauncherProvider', 'appSettings', function(unicornLauncherProvider, appSettings) {
		unicornLauncherProvider.useTinfoilShielding(appSettings.useTinfoilShielding);
  }]);