FrAngular:test view

by tchatel

HTML

<div ng-app="app">
  <h2>JavaScript Projects</h2>
  <div ng-view></div>

  <!-- CACHE FILE: view1.html -->
  <script type="text/ng-template" id="view1.html">
      <h3>View 1 | <a href="#/view2">View 2</a></h3>
      View [1] : {{view}}
  </script>

  <!-- CACHE FILE: view2.html -->
  <script type="text/ng-template" id="view2.html">
      <h3><a href="#/">View 1</a> | View 2</h3>
      View [2] : {{view}}
  </script>

</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
<style>

JavaScript

var app = angular.module('app', []);

app.factory('Delay', ['$timeout', function ($timeout) {
    return {
        waitingPromise: function (time) {
            return $timeout(function () {}, time * 1000);
        }
    };
}]);

app.config(function($routeProvider) {
    
  function wait(Delay) {
        return Delay.waitingPromise(5);
  };
  wait.$inject = ['Delay'];
    
  $routeProvider.
    when('/', {
        controller:'View1Ctrl', 
        templateUrl:'view1.html', 
        resolve: { delay: delay.waitingPromise(3), test: aaa}
    }).
    when('/view2', {controller:'View2Ctrl', templateUrl:'view2.html'}).
    otherwise({redirectTo:'/'});
});

app.controller('View1Ctrl', ['$scope', function ($scope) {
   $scope.view = 1;
}]);

app.controller('View2Ctrl', ['$scope', function ($scope) {
   $scope.view = 2;
}]);