angular · matsko · Feb 13, 2013
diff --git a/angularFiles.js b/angularFiles.js
@@ -30,12 +30,16 @@ angularFiles = {
     'src/ng/locale.js',
     'src/ng/timeout.js',
 
+    'src/ng/animation.js',
+
     'src/ng/filter.js',
     'src/ng/filter/filter.js',
     'src/ng/filter/filters.js',
     'src/ng/filter/limitTo.js',
     'src/ng/filter/orderBy.js',
 
+    'src/ng/directive/ngAnimate.js',
+
     'src/ng/directive/directives.js',
     'src/ng/directive/a.js',
     'src/ng/directive/booleanAttrs.js',

diff --git a/animation-example/index.html b/animation-example/index.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html> 
+<html ng-app="Animator" ng-controller="AppCtrl">
+  <head>
+<script type="text/ng-template" id="no-results">
+No Results Found...
+</script>
+    <title>AngularJS Animation Demo</title>
+    <style type="text/css">
+      body, html {
+        padding:0;
+        margin:0;
+        position:relative;
+        height:100%;
+      }
+      .cell {
+        position:absolute;
+        width:50%;
+        height:50%;
+        border:2px solid red;
+        background:white;
+        overflow:scroll;
+        box-sizing:border-box;
+      }
+      .stage {
+        padding:10px;
+      }
+      header {
+        padding:5px;
+        background:red;
+        font-size:1.5em;
+        margin-bottom:10px;
+      }
+      .cell:hover {
+        z-index:2000!important;
+        box-shadow:0 0 10px #aaa;
+        border-color:blue;
+      }
+      #wrapper {
+        margin-top:50px;
+        position:relative;
+        height:100%;
+      }
+      #nav {
+        background:black;
+        position:fixed;
+        top:0;
+        right:0;
+        left:0;
+        z-index:5000;
+        padding:15px;
+      }
+      #one { top:0; left:0; z-index:1001; }
+      #two { top:0; right:0; z-index:1002; }
+      #three { bottom:0; left:0; z-index:1003; }
+      #four { bottom:0; right:0; z-index:1004; }
+      .other header {
+        background:orange;
+      }
+      .add { width:200px; }
+      .q { float:right; width:200px; }
+      .item {
+        padding:5px;
+      }
+      .item + .item {
+        border-top:1px solid #ddd;
+      }
+      .item button {
+        float:right;
+      }
+    </style>
+  </head>
+
+  <body ng-cloak>
+    <div id="wrapper">
+
+      <form id="nav" ng-submit="add(new_item); new_item=null">
+        <input class="add" type="input" ng-model="new_item" placeholder="enter something to add" />
+        <button ng-click="add(new_item); new_item = null">Add</button>
+        <button ng-click="pop()">Pop Last</button>
+        <button ng-click="sort('name')">Order by name</button>
+        <button ng-click="sort('index')">Order by index</button>
+        <input type="search" ng-model="q" placeholder="search" class="q" />
+      </form>
+
+      <div class="cell" id="one">
+        <header>
+          Noop
+        </header>
+        <div class="stage">
+          <div ng-show="items.length == 0" ng-include="'no-results'"></div>
+          <div
+            class="item"
+            ng-show="items.length > 0"
+            ng-repeat="item in items | filter:q | orderBy:order"
+            ng-animate="enter: noop-enter; leave: noop-leave; move:noop-move">
+            <strong>{{ $index + 1 }}:</strong> {{ item.name }} ({{ item.index }})
+            <button ng-click="remove(item.index)">Remove</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="cell" id="two">
+        <header>
+          Fade In / Fade Out
+        </header>
+        <div class="stage">
+          <div ng-show="items.length == 0" ng-include="'no-results'"></div>
+          <div
+            class="item"
+            ng-show="items.length > 0"
+            ng-repeat="item in items | filter:q | orderBy:order"
+            ng-animate="enter: fade-enter; leave: fade-leave; move:fade-move">
+            <strong>{{ $index + 1 }}:</strong> {{ item.name }} ({{ item.index }})
+            <button ng-click="remove(item.index)">Remove</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="cell" id="three">
+        <header>
+          Slide In / Slide Out
+        </header>
+        <div class="stage">
+          <div ng-show="items.length == 0" ng-include="'no-results'"></div>
+          <div
+            class="item"
+            ng-show="items.length > 0"
+            ng-repeat="item in items | filter:q | orderBy:order"
+            ng-animate="enter: slide-enter; leave: slide-leave; move:slide-move">
+            <strong>{{ $index + 1 }}:</strong> {{ item.name }} ({{ item.index }})
+            <button ng-click="remove(item.index)">Remove</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="cell other" id="four">
+        <header>
+          ngRepeat with no ngAnimate directive at all...
+        </header>
+        <div class="stage">
+          <div ng-show="items.length == 0" ng-include="'no-results'"></div>
+          <div
+            class="item"
+            ng-show="items.length > 0"
+            ng-repeat="item in items | filter:q | orderBy:order">
+            <strong>{{ $index + 1 }}:</strong> {{ item.name }} ({{ item.index }})
+            <button ng-click="remove(item.index)">Remove</button>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+    <script src="../build/angular.js"></script>
+    <script src="./index.js"></script> 
+  <body>
+</html>
diff --git a/animation-example/index.js b/animation-example/index.js
@@ -0,0 +1,99 @@
+angular.module('Animator', [])
+
+  .controller('AppCtrl', function($scope) {
+    $scope.add = function(name) {
+      if(!name) return;
+      $scope.items.push({
+        index : $scope.items.length,
+        name : name
+      });
+    };
+    $scope.pop = function() {
+      $scope.items.pop();
+    };
+    $scope.remove = function(index) {
+      var found;
+      for(var i=0;i<$scope.items.length;i++) {
+        if($scope.items[i].index == index) {
+          found = i;
+          break;
+        }
+      }
+      $scope.items.splice(found, 1);
+    };
+    $scope.sort = function(key) {
+      $scope.order = key;
+    };
+
+    var defaultItems = ["Afghanistan"," Albania"," Algeria"," American Samoa"," Andorra"," Angola"," Anguilla"," Antarctica"," Antigua and Barbuda"," Argentina"," Armenia"," Aruba"," Ashmore and Cartier"," Australia"," Austria"," Azerbaijan"," Bahrain"," Baker Island"," Bangladesh"," Barbados"," Bassas da India"," Belarus"," Belgium"," Belize"," Benin"," Bermuda"," Bhutan"," Bolivia"," Bosnia and Herzegovina"," Botswana"," Bouvet Island"," Brazil"," British Indian Ocean Territory"," British Virgin Islands"," Brunei Darussalam"," Bulgaria"," Burkina Faso"," Burma"," Burundi"," Cambodia"," Cameroon"," Canada"," Cape Verde"," Cayman Islands"," Central African Republic"," Chad"];
+
+    var i = 0;
+    $scope.items = [];
+    angular.forEach(defaultItems, function(item) {
+      $scope.items.push({
+        index : i++,
+        name : item
+      });
+    });
+    $scope.order = 'index';
+  })
+
+  .animation('fade-enter', function() {
+    return function(node, parent, after) {
+      after ? after.after(node) : parent.append(node);
+      node.css('opacity',0);
+      node.animate({
+        'opacity':1
+      });
+    };
+  })
+
+  .animation('fade-move', function() {
+    return function(node, parent, after) {
+      //node.css('opacity',0);
+      after ? after.after(node) : parent.append(node);
+      node.animate({
+        'opacity':1
+      });
+    };
+  })
+
+  .animation('fade-leave', function() {
+    return function(node, parent, after) {
+      node.fadeOut(function() {
+        node.remove();
+      });
+    };
+  })
+
+  .animation('slide-enter', function() {
+    return function(node, parent, after) {
+      after ? after.after(node) : parent.append(node);
+      node.css({
+        'opacity':0,
+        'position':'relative',
+        'left':-100
+      });
+      node.animate({
+        'opacity':1,
+        'left':0
+      });
+    };
+  })
+
+  .animation('slide-leave', function() {
+    return function(node, parent, after) {
+      node.animate({
+        'opacity':0,
+        'left':-100
+      }, function() {
+        node.remove();
+      });
+    };
+  })
+
+  .animation('slide-move', function() {
+    return function(node, parent, after) {
+      after ? after.after(node) : parent.append(node);
+    };
+  })
diff --git a/src/AngularPublic.js b/src/AngularPublic.js
@@ -100,7 +100,8 @@ function publishExternalAPI(angular){
             ngChange: ngChangeDirective,
             required: requiredDirective,
             ngRequired: requiredDirective,
-            ngValue: ngValueDirective
+            ngValue: ngValueDirective,
+            ngAnimate: ngAnimateDirective
         }).
         directive(ngAttributeAliasDirectives).
         directive(ngEventDirectives);
@@ -112,6 +113,7 @@ function publishExternalAPI(angular){
         $document: $DocumentProvider,
         $exceptionHandler: $ExceptionHandlerProvider,
         $filter: $FilterProvider,
+        $animation: $AnimationProvider,
         $interpolate: $InterpolateProvider,
         $http: $HttpProvider,
         $httpBackend: $HttpBackendProvider,
@@ -127,6 +129,7 @@ function publishExternalAPI(angular){
         $timeout: $TimeoutProvider,
         $window: $WindowProvider
       });
+      $provide.factory('$noopAnimator', $noopAnimatorFactory);
     }
   ]);
 }
diff --git a/src/loader.js b/src/loader.js
@@ -163,6 +163,10 @@ function setupModuleLoader(window) {
            */
           constant: invokeLater('$provide', 'constant', 'unshift'),
 
+          //
+          animation: invokeLater('$animationProvider', 'register'),
+          //
+
           /**
            * @ngdoc method
            * @name angular.Module#filter

diff --git a/src/ng/animation.js b/src/ng/animation.js
@@ -0,0 +1,35 @@
+'use strict';
+
+$AnimationProvider.$inject = ['$provide'];
+function $AnimationProvider($provide) {
+  var suffix = 'Animation';
+  var register = function(name, factory) {
+    $provide.factory(camelCase(name) + suffix, factory);
+  };
+
+  this.register = register;
+
+  this.$get = function($injector) {
+    return function animationGetter(name) {
+      return $injector.get(camelCase(name) + suffix);
+    }
+  };
+
+  register('noopEnter', function() {
+    return function(node, parent, after) {
+      after ? after.after(node) : parent.append(node);
+    };
+  });
+
+  register('noopLeave', function() {
+    return function(node, parent, after) {
+      node.remove();
+    };
+  });
+
+  register('noopMove', function() {
+    return function(node, parent, after) {
+      after ? after.after(node) : parent.append(node);
+    };
+  });
+};