Widget w/mouseover & mouseout

Working widget with mouseover and mouseout :)

by danielzen

HTML

<div ng:app="route">
 <script type="text/ng-template" id="examples/book.html">
   controller: {{name}}<br />
   Book Id: {{params.bookId}}<br />
 </script>
 
 <script type="text/ng-template" id="examples/chapter.html">
   controller: {{name}}<br />
   Book Id: {{params.bookId}}<br />
   Chapter Id: {{params.chapterId}}
 </script>
 
 
 
 <div ng-controller="MainCntl">
   Choose:
   <a href="/Book/Moby">Moby</a> |
   <a href="/Book/Moby/ch/1">Moby: Ch1</a> |
   <a href="/Book/Gatsby">Gatsby</a> |
   <a href="/Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
     <span ng-click="scarletNav()"><a href="#">Scarlet Letter</a></span><br/>
 
   <div ng-view></div>
   <hr />
 
   <pre>$location.path() = {{$location.path()}}</pre>
   <pre>$route.current.template = {{$route.current.template}}</pre>
   <pre>$route.current.params = {{$route.current.params}}</pre>
   <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
   <pre>$routeParams = {{$routeParams}}</pre>
 </div>
</div>

CSS

</style>
<script src="http://ci.angularjs.org/job/angular.js-angular-master/ws/build/angular.js"></script>
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine.js"></script>
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine-html.js"></script>
<script src="http://ci.angularjs.org/job/angular.js-angular-master/232/artifact/build/pkg/0.10.7-64912069/angular-mocks-0.10.7-64912069.js"></script>
<link rel="stylesheet" type="text/css" href="http://tryjasmine.com/js/vendor/jasmine-1.1.0/jasmine.css">
<style>

JavaScript

angular.module('route', [], function($routeProvider, $locationProvider) {
  $routeProvider.when('/Book/:bookId', {template: 'examples/book.html', controller: BookCntl});
  $routeProvider.when('/Book/:bookId/ch/:chapterId', {template: 'examples/chapter.html', controller: ChapterCntl});

  // configure html5 to get links working on jsfiddle
  $locationProvider.html5Mode(true);
});

function MainCntl($scope, $route, $routeParams, $location) {
  $scope.$route = $route;
  $scope.$location = $location;
  $scope.$routeParams = $routeParams;
  $scope.scarletNav = function () {
    $location.path('/Book/Scarlet');
  }       
}

function BookCntl($scope, $routeParams) {
  $scope.name = "BookCntl";
  $scope.params = $routeParams;
}

function ChapterCntl($scope, $routeParams) {
  $scope.name = "ChapterCntl";
  $scope.params = $routeParams;
}




(function() {
    var jasmineEnv = jasmine.getEnv();
    jasmineEnv.updateInterval = 1000;

    var trivialReporter = new jasmine.TrivialReporter();
    jasmineEnv.addReporter(trivialReporter);

    jasmineEnv.specFilter = function(spec) {
        return trivialReporter.specFilter(spec);
    };

    $(function() {
        jasmineEnv.execute();
    });
})();