Experiment, angular route&animation

An experiment that shows ng-route will not trigger leave animation on prev view if new view is redirected.

by Chin-Yu Lin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular-animate.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
  <!-- template1.html -->
  <script type="text/ng-template" id="template1.html">
    Content of template1.html
  </script>
  
  <!-- template2.html -->
  <script type="text/ng-template" id="template2.html">
    Content of template2.html
  </script>

<div ng-controller="MainApp">
    <a href="#/template1">Direct to 1</a>
    <a href="#/template2">Direct to 2</a>
    <a href="#/aaaaa">ReDirect to 1</a>
    <a href="#/redirectTo2">ReDirect to 2</a>
    <div class="view-container" ng-view></div>
</div>

CSS

.view-container {
    border-style : solid;
    border-color : black;
    border-width : 1px;
    width : 90%;
    height : 100px;
    position : absolute;
    left:0px;
    top:30px;
}

.view-container.ng-enter, .view-container.ng-leave {
  -webkit-transition:all linear 1.5s;
  -moz-transition:all linear 1.5s;
  -ms-transition:all linear 1.5s;
  -o-transition:all linear 1.5s;
  transition:all linear 1.5s;
}

.view-container.ng-leave {
  opacity: 1;
  left : 0px;
}
 .view-container.ng-leave-active {
  opacity: 0;
  left : -100%;
}

.view-container.ng-enter {
  opacity: 0;
  left : 100%;
}
.view-container.ng-enter-active {
  opacity: 1;
  left : 0px;
}

JavaScript

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

  app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){

    // TBD
    $routeProvider.when('/template1', {
      templateUrl : 'template1.html',
    }).when('/template2',{
      templateUrl : 'template2.html',
    }).when('/redirectTo2',{
      redirectTo : '/template2'
    }).otherwise({
      redirectTo : '/template1',
    });

  }]);

app.controller('MainApp', ['$scope', function($scope) {
    $scope.value1 = 123;

}]);