AngularJS Example:

by gavinfoley

HTML

<div ng-app="myApp">
  <ng-view></ng-view>
  <hr />
  <a href="#/">Home</a><br />
  <a href="#/p1">Page 1</a><br />
  <a href="#/p2">Page 2</a><br />
    
  <script type="text/ng-template" id="home.html">
      <div cool-fade>We're Home!</div>
  </script>
  <script type="text/ng-template" id="p1.html">
      <div cool-fade>Page 1, <b>baby!</b></div>
  </script>
  <script type="text/ng-template" id="p2.html">
      <div cool-fade>Page 2 is <i>boring</i></div>
  </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://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
<script  src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>

JavaScript

angular.module('myApp', []).
  config(function($routeProvider) {
    $routeProvider.
      when('/p1', { template: 'p1.html' }).
      when('/p2', { template: 'p2.html' }).
      otherwise({ template: 'home.html' });
  }).directive('coolFade', function() {
    return {
      compile: function(elm) {
        console.log('compiling');
        $(elm).css('opacity', 0.1);
        return function(scope, elm, attrs) {
          console.log('animating');
          $(elm).animate({ opacity : 1.0 }, 1000 );
        };
      }
    };
  });