AngularJS

Partials Transiton

by Bretto

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">




<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>

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);
            };
        }
    };
});