Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="app"
      ng-cloak
      ng-controller="MainCtrl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <base href="/"> -->
​
​
  <title>Test</title>
</head>
<body>
  <div class="view" ng-view></div>
  <script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
  <script src="https://code.angularjs.org/1.6.1/angular-animate.min.js"></script>
</body>
 
a{
  display: block;
  color:blue;
  text-decoration:underline;
  font-size:20px;
}
 
var app = angular.module('app', ['ngAnimate', 'ngRoute']);
​
app.animation('.view', function () {
  return {
    enter : function (element, done) {
      alert('enter');
      done();
    },
    leave : function (element, done) {
      alert('leave');
      done();
    }
  }
});
​
//Config
​
​
app.config(function ($routeProvider, $locationProvider, $httpProvider){
  /*
  * Bring back the commented out $routeProvider code, and comment out
  * the current one to see how resolve changes the way animation runs
  *
  * P.S /runner is the default url in jsbin
  */
  
 
  
  
  
//   $routeProvider.when('/runner',{
//     template : function () {
//       return "<div>Now animation enter will fire on load<a href='/runner/testlink'>test link</a></div>";
//     },
//     resolve: {
//       message: function ($timeout, $q) {
//         return $q(function(resolve){
//           $timeout(function () {
//             resolve('message');
//           },10);
//         });
//       }
//     }
//   });
  
//   $routeProvider.when('/runner/testlink',{
//     template : function () {
//       return "<div>Inside page <a href = '/runner'>Back to homepage</a></div>";
//     },
//     resolve: {
//       message: function ($timeout, $q) {
//         return $q(function(resolve){
//           $timeout(function () {
//             resolve('message');
//           },10);
//         });
//       }
//     }
//   });
  
  $routeProvider.when('/runner',{
    template : function () {
      return "<div>Now animation enter will not fire on load<a href='/runner/testlink'>test link</a></div>";
    }
  });
  
  $routeProvider.when('/runner/testlink',{
    template : function () {
      return "<div>Inside page <a href = '/runner'>Back to homepage</a></div>";
    }
  });
​
  $locationProvider.html5Mode({enabled: true, requireBase: false});
});
​
//Controllers
app.controller('MainCtrl',function ($rootElement,$rootScope, $scope, $window, $location, $http, $route, $timeout, $q, $animate){
  
});
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers