From 88220068e7eded7fb8f9a40234952c6c55cf903e Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 7 Oct 2016 18:58:53 +0300
Subject: [PATCH 01/15] refactor(ngClass): remove unnecessary dependency on
 `$animate`

---
 src/ng/directive/ngClass.js      | 12 ++++------
 test/ng/directive/ngClassSpec.js | 41 ++++++++++++++++++++------------
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index 7e138b065dc2..12d742cf3ece 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -8,7 +8,8 @@
 
 function classDirective(name, selector) {
   name = 'ngClass' + name;
-  return ['$animate', function($animate) {
+
+  return [function() {
     return {
       restrict: 'AC',
       link: function(scope, element, attr) {
@@ -69,12 +70,9 @@ function classDirective(name, selector) {
           var toRemove = arrayDifference(oldClasses, newClasses);
           toAdd = digestClassCounts(toAdd, 1);
           toRemove = digestClassCounts(toRemove, -1);
-          if (toAdd && toAdd.length) {
-            $animate.addClass(element, toAdd);
-          }
-          if (toRemove && toRemove.length) {
-            $animate.removeClass(element, toRemove);
-          }
+
+          attr.$addClass(toAdd);
+          attr.$removeClass(toRemove);
         }
 
         function ngClassWatchAction(newVal) {
diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index b30d1318317c..ffcf369c5b21 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -1,6 +1,6 @@
 'use strict';
 
-describe('ngClass', function() {
+fdescribe('ngClass', function() {
   var element;
 
   beforeEach(module(function($compileProvider) {
@@ -244,21 +244,34 @@ describe('ngClass', function() {
   }));
 
 
-  it('should allow ngClassOdd/Even on the same element with overlapping classes', inject(function($rootScope, $compile, $animate) {
-      var className;
-
-      element = $compile('<ul><li ng-repeat="i in [0,1,2]" ng-class-odd="\'same odd\'" ng-class-even="\'same even\'"></li><ul>')($rootScope);
+  it('should allow ngClassOdd/Even on the same element with overlapping classes',
+    inject(function($compile, $rootScope) {
+      element = $compile(
+          '<ul>' +
+            '<li ng-repeat="i in [0,1,2]" ' +
+                'ng-class-odd="\'same odd\'" ' +
+                'ng-class-even="\'same even\'">' +
+            '</li>' +
+          '<ul>')($rootScope);
       $rootScope.$digest();
-      var e1 = jqLite(element[0].childNodes[1]);
-      var e2 = jqLite(element[0].childNodes[5]);
-      expect(e1.hasClass('same')).toBeTruthy();
-      expect(e1.hasClass('odd')).toBeTruthy();
-      expect(e2.hasClass('same')).toBeTruthy();
-      expect(e2.hasClass('odd')).toBeTruthy();
+
+      var e1 = element.children().eq(0);
+      var e2 = element.children().eq(1);
+      var e3 = element.children().eq(2);
+
+      expect(e1).toHaveClass('same');
+      expect(e1).toHaveClass('odd');
+      expect(e1).not.toHaveClass('even');
+      expect(e2).toHaveClass('same');
+      expect(e2).not.toHaveClass('odd');
+      expect(e2).toHaveClass('even');
+      expect(e3).toHaveClass('same');
+      expect(e3).toHaveClass('odd');
+      expect(e3).not.toHaveClass('even');
     })
   );
 
-  it('should allow ngClass with overlapping classes', inject(function($rootScope, $compile, $animate) {
+  it('should allow ngClass with overlapping classes', inject(function($rootScope, $compile) {
     element = $compile('<div ng-class="{\'same yes\': test, \'same no\': !test}"></div>')($rootScope);
     $rootScope.$digest();
 
@@ -266,9 +279,7 @@ describe('ngClass', function() {
     expect(element).not.toHaveClass('yes');
     expect(element).toHaveClass('no');
 
-    $rootScope.$apply(function() {
-      $rootScope.test = true;
-    });
+    $rootScope.$apply('test = true');
 
     expect(element).toHaveClass('same');
     expect(element).toHaveClass('yes');

From 0409589398caf565a5167ca46d31c1f3a1f23802 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 7 Oct 2016 19:02:01 +0300
Subject: [PATCH 02/15] refactor(ngClass): remove redundant `$observe`r

The code was added in b41fe9f in order to support having both `ngClass` and
interpolation in `class` work together. `ngClass` has changed considerably since
b41fe9f and for simple cases to work the `$observe`r is no longer necessary (as
indicated by the expanded test still passing).

That said, it is a [documented known issue][1] that `ngClass` should not be used
together with interpolation in `class` and more complicated cases do not work
anyway.

[1]: https://docs.angularjs.org/api/ng/directive/ngClass#known-issues
---
 src/ng/directive/ngClass.js      |   5 --
 test/ng/directive/ngClassSpec.js | 102 ++++++++++++++++++++++---------
 2 files changed, 72 insertions(+), 35 deletions(-)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index 12d742cf3ece..190ead08ceb0 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -17,11 +17,6 @@ function classDirective(name, selector) {
 
         scope.$watch(attr[name], ngClassWatchAction, true);
 
-        attr.$observe('class', function(value) {
-          ngClassWatchAction(scope.$eval(attr[name]));
-        });
-
-
         if (name !== 'ngClass') {
           scope.$watch('$index', function($index, old$index) {
             /* eslint-disable no-bitwise */
diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index ffcf369c5b21..48327a59e51d 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -311,37 +311,79 @@ fdescribe('ngClass', function() {
   }));
 
 
-  it('should reapply ngClass when interpolated class attribute changes', inject(function($rootScope, $compile) {
-    element = $compile('<div class="one {{cls}} three" ng-class="{four: four}"></div>')($rootScope);
-
-    $rootScope.$apply(function() {
-      $rootScope.cls = 'two';
-      $rootScope.four = true;
-    });
-    expect(element).toHaveClass('one');
-    expect(element).toHaveClass('two'); // interpolated
-    expect(element).toHaveClass('three');
-    expect(element).toHaveClass('four');
+  it('should reapply ngClass when interpolated class attribute changes',
+    inject(function($compile, $rootScope) {
+      element = $compile(
+        '<div>' +
+          '<div class="one {{two}} three" ng-class="{five: five}"></div>' +
+          '<div class="one {{two}} three {{four}}" ng-class="{five: five}"></div>' +
+        '</div>')($rootScope);
+      var e1 = element.children().eq(0);
+      var e2 = element.children().eq(1);
 
-    $rootScope.$apply(function() {
-      $rootScope.cls = 'too';
-    });
-    expect(element).toHaveClass('one');
-    expect(element).toHaveClass('too'); // interpolated
-    expect(element).toHaveClass('three');
-    expect(element).toHaveClass('four'); // should still be there
-    expect(element.hasClass('two')).toBeFalsy();
-
-    $rootScope.$apply(function() {
-      $rootScope.cls = 'to';
-    });
-    expect(element).toHaveClass('one');
-    expect(element).toHaveClass('to'); // interpolated
-    expect(element).toHaveClass('three');
-    expect(element).toHaveClass('four'); // should still be there
-    expect(element.hasClass('two')).toBeFalsy();
-    expect(element.hasClass('too')).toBeFalsy();
-  }));
+      $rootScope.$apply('two = "two"; five = true');
+
+      expect(e1).toHaveClass('one');
+      expect(e1).toHaveClass('two');
+      expect(e1).toHaveClass('three');
+      expect(e1).not.toHaveClass('four');
+      expect(e1).toHaveClass('five');
+      expect(e2).toHaveClass('one');
+      expect(e2).toHaveClass('two');
+      expect(e2).toHaveClass('three');
+      expect(e2).not.toHaveClass('four');
+      expect(e2).toHaveClass('five');
+
+      $rootScope.$apply('two = "too"');
+
+      expect(e1).toHaveClass('one');
+      expect(e1).not.toHaveClass('two');
+      expect(e1).toHaveClass('too');
+      expect(e1).toHaveClass('three');
+      expect(e1).not.toHaveClass('four');
+      expect(e1).toHaveClass('five');
+      expect(e2).toHaveClass('one');
+      expect(e2).not.toHaveClass('two');
+      expect(e2).toHaveClass('too');
+      expect(e2).toHaveClass('three');
+      expect(e2).not.toHaveClass('four');
+      expect(e2).toHaveClass('five');
+
+      $rootScope.$apply('two = "to"; four = "four"');
+
+      expect(e1).toHaveClass('one');
+      expect(e1).not.toHaveClass('two');
+      expect(e1).not.toHaveClass('too');
+      expect(e1).toHaveClass('to');
+      expect(e1).toHaveClass('three');
+      expect(e1).not.toHaveClass('four');
+      expect(e1).toHaveClass('five');
+      expect(e2).toHaveClass('one');
+      expect(e2).not.toHaveClass('two');
+      expect(e2).not.toHaveClass('too');
+      expect(e2).toHaveClass('to');
+      expect(e2).toHaveClass('three');
+      expect(e2).toHaveClass('four');
+      expect(e2).toHaveClass('five');
+
+      $rootScope.$apply('five = false');
+
+      expect(e1).toHaveClass('one');
+      expect(e1).not.toHaveClass('two');
+      expect(e1).not.toHaveClass('too');
+      expect(e1).toHaveClass('to');
+      expect(e1).toHaveClass('three');
+      expect(e1).not.toHaveClass('four');
+      expect(e1).not.toHaveClass('five');
+      expect(e2).toHaveClass('one');
+      expect(e2).not.toHaveClass('two');
+      expect(e2).not.toHaveClass('too');
+      expect(e2).toHaveClass('to');
+      expect(e2).toHaveClass('three');
+      expect(e2).toHaveClass('four');
+      expect(e2).not.toHaveClass('five');
+    })
+  );
 
 
   it('should not mess up class value due to observing an interpolated class attribute', inject(function($rootScope, $compile) {

From 270508525eb21f0fa925e76a6151011e2d2c4ef5 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 7 Oct 2016 19:22:52 +0300
Subject: [PATCH 03/15] test(ngClass): add some tests about one-time bindings
 and objects inside arrays

Mostly taken from #14404.
---
 test/ng/directive/ngClassSpec.js | 56 ++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index 48327a59e51d..b3bfc1397803 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -477,6 +477,62 @@ fdescribe('ngClass', function() {
     })
   );
 
+  it('should do value stabilization as expected when one-time binding',
+    inject(function($rootScope, $compile) {
+      element = $compile('<div ng-class="::className"></div>')($rootScope);
+      $rootScope.$digest();
+
+      $rootScope.className = 'foo';
+      $rootScope.$digest();
+      expect(element).toHaveClass('foo');
+
+      $rootScope.className = 'bar';
+      $rootScope.$digest();
+      expect(element).toHaveClass('foo');
+    })
+  );
+
+  it('should remove the watcher when static array one-time binding',
+    inject(function($rootScope, $compile) {
+      element = $compile('<div ng-class="::[className]"></div>')($rootScope);
+      $rootScope.$digest();
+
+      $rootScope.$apply('className = "foo"');
+      expect(element).toHaveClass('foo');
+
+      $rootScope.$apply('className = "bar"');
+      expect(element).toHaveClass('foo');
+      expect(element).not.toHaveClass('bar');
+    })
+  );
+
+  it('should do value remove the watcher when static map one-time binding',
+    inject(function($rootScope, $compile) {
+      element = $compile('<div ng-class="::{foo: fooPresent}"></div>')($rootScope);
+      $rootScope.$digest();
+
+      $rootScope.fooPresent = true;
+      $rootScope.$digest();
+      expect(element).toHaveClass('foo');
+
+      $rootScope.fooPresent = false;
+      $rootScope.$digest();
+      expect(element).toHaveClass('foo');
+    })
+  );
+
+  it('should track changes of mutating object inside an array',
+    inject(function($rootScope, $compile) {
+      $rootScope.classVar = [{orange: true}];
+      element = $compile('<div ng-class="classVar"></div>')($rootScope);
+      $rootScope.$digest();
+
+      $rootScope.classVar[0].orange = false;
+      $rootScope.$digest();
+
+      expect(element).not.toHaveClass('orange');
+    })
+  );
 });
 
 describe('ngClass animations', function() {

From 0ba4be6f5664943286839b8453ac051dcc5036cd Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 7 Oct 2016 19:31:10 +0300
Subject: [PATCH 04/15] fix(ngClassOdd/Even): keep track of classes even if
 odd/even do not match index

---
 src/ng/directive/ngClass.js      |  6 ++---
 test/ng/directive/ngClassSpec.js | 41 ++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index 190ead08ceb0..a01a8940bd74 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -15,14 +15,12 @@ function classDirective(name, selector) {
       link: function(scope, element, attr) {
         var oldVal;
 
-        scope.$watch(attr[name], ngClassWatchAction, true);
-
         if (name !== 'ngClass') {
           scope.$watch('$index', function($index, old$index) {
             /* eslint-disable no-bitwise */
             var mod = $index & 1;
             if (mod !== (old$index & 1)) {
-              var classes = arrayClasses(scope.$eval(attr[name]));
+              var classes = arrayClasses(oldVal);
               if (mod === selector) {
                 addClasses(classes);
               } else {
@@ -33,6 +31,8 @@ function classDirective(name, selector) {
           });
         }
 
+        scope.$watch(attr[name], ngClassWatchAction, true);
+
         function addClasses(classes) {
           var newClasses = digestClassCounts(classes, 1);
           attr.$addClass(newClasses);
diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index b3bfc1397803..bac5efdfea89 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -462,6 +462,47 @@ fdescribe('ngClass', function() {
     expect(e2.hasClass('odd')).toBeFalsy();
   }));
 
+
+  it('should keep track of old classes even if odd/even does not match `$index` atm',
+    inject(function($compile, $rootScope) {
+      element = $compile(
+          '<div>' +
+            '<div ng-class-odd="foo"></div>' +
+            '<div ng-class-even="foo"></div>' +
+          '</div>')($rootScope);
+      var odd = element.children().eq(0);
+      var even = element.children().eq(1);
+
+      $rootScope.$apply('$index = 0; foo = "class1"');
+
+      expect(odd).toHaveClass('class1');
+      expect(odd).not.toHaveClass('class2');
+      expect(even).not.toHaveClass('class1');
+      expect(even).not.toHaveClass('class2');
+
+      $rootScope.$apply('$index = 1; foo = "class2"');
+
+      expect(odd).not.toHaveClass('class1');
+      expect(odd).not.toHaveClass('class2');
+      expect(even).not.toHaveClass('class1');
+      expect(even).toHaveClass('class2');
+
+      $rootScope.$apply('foo = "class1"');
+
+      expect(odd).not.toHaveClass('class1');
+      expect(odd).not.toHaveClass('class2');
+      expect(even).toHaveClass('class1');
+      expect(even).not.toHaveClass('class2');
+
+      $rootScope.$apply('$index = 2');
+
+      expect(odd).toHaveClass('class1');
+      expect(odd).not.toHaveClass('class2');
+      expect(even).not.toHaveClass('class1');
+      expect(even).not.toHaveClass('class2');
+    })
+  );
+
   it('should support mixed array/object variable with a mutating object',
     inject(function($rootScope, $compile) {
       element = $compile('<div ng-class="classVar"></div>')($rootScope);

From 89268afb341487aa4e26148d87ad6d6c66e09d3c Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 7 Oct 2016 21:14:44 +0300
Subject: [PATCH 05/15] perf(ngClass): only access the element's `data` once

---
 src/ng/directive/ngClass.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index a01a8940bd74..20e7096b1e76 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -13,8 +13,16 @@ function classDirective(name, selector) {
     return {
       restrict: 'AC',
       link: function(scope, element, attr) {
+        var classCounts = element.data('$classCounts');
         var oldVal;
 
+        if (!classCounts) {
+          // Use createMap() to prevent class assumptions involving property
+          // names in Object.prototype
+          classCounts = createMap();
+          element.data('$classCounts', classCounts);
+        }
+
         if (name !== 'ngClass') {
           scope.$watch('$index', function($index, old$index) {
             /* eslint-disable no-bitwise */
@@ -44,10 +52,8 @@ function classDirective(name, selector) {
         }
 
         function digestClassCounts(classes, count) {
-          // Use createMap() to prevent class assumptions involving property
-          // names in Object.prototype
-          var classCounts = element.data('$classCounts') || createMap();
           var classesToUpdate = [];
+
           forEach(classes, function(className) {
             if (count > 0 || classCounts[className]) {
               classCounts[className] = (classCounts[className] || 0) + count;
@@ -56,7 +62,7 @@ function classDirective(name, selector) {
               }
             }
           });
-          element.data('$classCounts', classCounts);
+
           return classesToUpdate.join(' ');
         }
 

From 2871a1123310be033130afc17223fb25dea9d2e9 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 7 Oct 2016 21:24:33 +0300
Subject: [PATCH 06/15] refactor(ngClass): simplify conditions

---
 src/ng/directive/ngClass.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index 20e7096b1e76..64e3d6fea466 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -14,6 +14,7 @@ function classDirective(name, selector) {
       restrict: 'AC',
       link: function(scope, element, attr) {
         var classCounts = element.data('$classCounts');
+        var oldModulo = true;
         var oldVal;
 
         if (!classCounts) {
@@ -24,18 +25,20 @@ function classDirective(name, selector) {
         }
 
         if (name !== 'ngClass') {
-          scope.$watch('$index', function($index, old$index) {
-            /* eslint-disable no-bitwise */
-            var mod = $index & 1;
-            if (mod !== (old$index & 1)) {
+          scope.$watch('$index', function($index) {
+            // eslint-disable-next-line no-bitwise
+            var newModulo = $index & 1;
+
+            if (newModulo !== oldModulo) {
               var classes = arrayClasses(oldVal);
-              if (mod === selector) {
+              if (newModulo === selector) {
                 addClasses(classes);
               } else {
                 removeClasses(classes);
               }
+
+              oldModulo = newModulo;
             }
-            /* eslint-enable */
           });
         }
 
@@ -77,8 +80,7 @@ function classDirective(name, selector) {
         }
 
         function ngClassWatchAction(newVal) {
-          // eslint-disable-next-line no-bitwise
-          if (selector === true || (scope.$index & 1) === selector) {
+          if (oldModulo === selector) {
             var newClasses = arrayClasses(newVal || []);
             if (!oldVal) {
               addClasses(newClasses);

From a7e69f7234fb77749e0b723a676890d529a38470 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 7 Oct 2016 21:31:20 +0300
Subject: [PATCH 07/15] refactor(ngClass): move helper functions outside the
 closure

---
 src/ng/directive/ngClass.js | 61 +++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index 64e3d6fea466..99bab36725a9 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -97,41 +97,42 @@ function classDirective(name, selector) {
         }
       }
     };
+  }];
 
-    function arrayDifference(tokens1, tokens2) {
-      var values = [];
+  // Helpers
+  function arrayDifference(tokens1, tokens2) {
+    var values = [];
 
-      outer:
-      for (var i = 0; i < tokens1.length; i++) {
-        var token = tokens1[i];
-        for (var j = 0; j < tokens2.length; j++) {
-          if (token === tokens2[j]) continue outer;
-        }
-        values.push(token);
+    outer:
+    for (var i = 0; i < tokens1.length; i++) {
+      var token = tokens1[i];
+      for (var j = 0; j < tokens2.length; j++) {
+        if (token === tokens2[j]) continue outer;
       }
-      return values;
+      values.push(token);
     }
-
-    function arrayClasses(classVal) {
-      var classes = [];
-      if (isArray(classVal)) {
-        forEach(classVal, function(v) {
-          classes = classes.concat(arrayClasses(v));
-        });
-        return classes;
-      } else if (isString(classVal)) {
-        return classVal.split(' ');
-      } else if (isObject(classVal)) {
-        forEach(classVal, function(v, k) {
-          if (v) {
-            classes = classes.concat(k.split(' '));
-          }
-        });
-        return classes;
-      }
-      return classVal;
+    return values;
+  }
+
+  function arrayClasses(classVal) {
+    var classes = [];
+    if (isArray(classVal)) {
+      forEach(classVal, function(v) {
+        classes = classes.concat(arrayClasses(v));
+      });
+      return classes;
+    } else if (isString(classVal)) {
+      return classVal.split(' ');
+    } else if (isObject(classVal)) {
+      forEach(classVal, function(v, k) {
+        if (v) {
+          classes = classes.concat(k.split(' '));
+        }
+      });
+      return classes;
     }
-  }];
+    return classVal;
+  }
 }
 
 /**

From 37cec7ac23da37437d65a5258b5f683ada7e9471 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 7 Oct 2016 22:30:53 +0300
Subject: [PATCH 08/15] refactor(ngClass): exit `arrayDifference()` early if an
 input is empty

---
 src/ng/directive/ngClass.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index 99bab36725a9..e250574bc3ec 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -101,6 +101,9 @@ function classDirective(name, selector) {
 
   // Helpers
   function arrayDifference(tokens1, tokens2) {
+    if (!tokens1 || !tokens1.length) return [];
+    if (!tokens2 || !tokens2.length) return tokens1;
+
     var values = [];
 
     outer:
@@ -111,6 +114,7 @@ function classDirective(name, selector) {
       }
       values.push(token);
     }
+
     return values;
   }
 

From 57084247b1a439928244f4350a74881627264138 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 7 Oct 2016 23:03:22 +0300
Subject: [PATCH 09/15] perf(ngClass): avoid deep-watching (if possible) and
 unnecessary copies

The cases that should benefit most are:

1. When using large objects as values (e.g.: `{loaded: $ctrl.data}`).
2. When using objects/arrays and there are frequent changes.
3. When there are many `$index` changes (e.g. addition/deletion/reordering in large `ngRepeat`s).

The differences in operations per digest include:

1. `Regular expression (when not changed)`
   **Before:** `equals()`
   **After:**  `toClassString()`

2. `Regular expression (when changed)`
   **Before:** `copy()` + 2 x `arrayClasses()` + `shallowCopy()`
   **After:**  2 x `split()`

3. `One-time expression (when not changed)`
   **Before:** `equals()`
   **After:**  `toFlatValue()` + `equals()`*

4. `One-time expression (when changed)`
   **Before:** `copy()` + 2 x `arrayClasses()` + `shallowCopy()`
   **After:**  `copy()`* + `toClassString()`* + 2 x `split()`

5. `$index modulo changed`
   **Before:** `arrayClasses()`
   **After:**  -

(*): on flatter structure

In large based on #14404. Kudos to @drpicox for the initial idea and a big part
of the implementation.

Closes #14404
---
 src/ng/directive/ngClass.js      | 133 +++++++++++++++++++------------
 test/ng/directive/ngClassSpec.js |  70 ++++++++++++++++
 2 files changed, 154 insertions(+), 49 deletions(-)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index e250574bc3ec..f4f1849d0094 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -9,13 +9,20 @@
 function classDirective(name, selector) {
   name = 'ngClass' + name;
 
-  return [function() {
+  return ['$parse', function($parse) {
     return {
       restrict: 'AC',
       link: function(scope, element, attr) {
+        var expression = attr[name].trim();
+        var isOneTime = (expression.charAt(0) === ':') && (expression.charAt(1) === ':');
+
+        var watchInterceptor = isOneTime ? toFlatValue : toClassString;
+        var watchExpression = $parse(expression, watchInterceptor);
+        var watchAction = isOneTime ? ngClassOneTimeWatchAction : ngClassWatchAction;
+
         var classCounts = element.data('$classCounts');
         var oldModulo = true;
-        var oldVal;
+        var oldClassString;
 
         if (!classCounts) {
           // Use createMap() to prevent class assumptions involving property
@@ -30,11 +37,10 @@ function classDirective(name, selector) {
             var newModulo = $index & 1;
 
             if (newModulo !== oldModulo) {
-              var classes = arrayClasses(oldVal);
               if (newModulo === selector) {
-                addClasses(classes);
+                addClasses(oldClassString);
               } else {
-                removeClasses(classes);
+                removeClasses(oldClassString);
               }
 
               oldModulo = newModulo;
@@ -42,22 +48,36 @@ function classDirective(name, selector) {
           });
         }
 
-        scope.$watch(attr[name], ngClassWatchAction, true);
+        scope.$watch(watchExpression, watchAction, isOneTime);
+
+        function addClasses(classString) {
+          classString = digestClassCounts(split(classString), 1);
+          attr.$addClass(classString);
+        }
 
-        function addClasses(classes) {
-          var newClasses = digestClassCounts(classes, 1);
-          attr.$addClass(newClasses);
+        function removeClasses(classString) {
+          classString = digestClassCounts(split(classString), -1);
+          attr.$removeClass(classString);
         }
 
-        function removeClasses(classes) {
-          var newClasses = digestClassCounts(classes, -1);
-          attr.$removeClass(newClasses);
+        function updateClasses(oldClassString, newClassString) {
+          var oldClassArray = split(oldClassString);
+          var newClassArray = split(newClassString);
+
+          var toRemoveArray = arrayDifference(oldClassArray, newClassArray);
+          var toAddArray = arrayDifference(newClassArray, oldClassArray);
+
+          var toRemoveString = digestClassCounts(toRemoveArray, -1);
+          var toAddString = digestClassCounts(toAddArray, 1);
+
+          attr.$addClass(toAddString);
+          attr.$removeClass(toRemoveString);
         }
 
-        function digestClassCounts(classes, count) {
+        function digestClassCounts(classArray, count) {
           var classesToUpdate = [];
 
-          forEach(classes, function(className) {
+          forEach(classArray, function(className) {
             if (count > 0 || classCounts[className]) {
               classCounts[className] = (classCounts[className] || 0) + count;
               if (classCounts[className] === +(count > 0)) {
@@ -69,31 +89,20 @@ function classDirective(name, selector) {
           return classesToUpdate.join(' ');
         }
 
-        function updateClasses(oldClasses, newClasses) {
-          var toAdd = arrayDifference(newClasses, oldClasses);
-          var toRemove = arrayDifference(oldClasses, newClasses);
-          toAdd = digestClassCounts(toAdd, 1);
-          toRemove = digestClassCounts(toRemove, -1);
+        function ngClassOneTimeWatchAction(newClassValue) {
+          var newClassString = toClassString(newClassValue);
 
-          attr.$addClass(toAdd);
-          attr.$removeClass(toRemove);
+          if (newClassString !== oldClassString) {
+            ngClassWatchAction(newClassString);
+          }
         }
 
-        function ngClassWatchAction(newVal) {
+        function ngClassWatchAction(newClassString) {
           if (oldModulo === selector) {
-            var newClasses = arrayClasses(newVal || []);
-            if (!oldVal) {
-              addClasses(newClasses);
-            } else if (!equals(newVal,oldVal)) {
-              var oldClasses = arrayClasses(oldVal);
-              updateClasses(oldClasses, newClasses);
-            }
-          }
-          if (isArray(newVal)) {
-            oldVal = newVal.map(function(v) { return shallowCopy(v); });
-          } else {
-            oldVal = shallowCopy(newVal);
+            updateClasses(oldClassString, newClassString);
           }
+
+          oldClassString = newClassString;
         }
       }
     };
@@ -118,24 +127,50 @@ function classDirective(name, selector) {
     return values;
   }
 
-  function arrayClasses(classVal) {
-    var classes = [];
-    if (isArray(classVal)) {
-      forEach(classVal, function(v) {
-        classes = classes.concat(arrayClasses(v));
-      });
-      return classes;
-    } else if (isString(classVal)) {
-      return classVal.split(' ');
-    } else if (isObject(classVal)) {
-      forEach(classVal, function(v, k) {
-        if (v) {
-          classes = classes.concat(k.split(' '));
+  function split(classString) {
+    return classString && classString.split(' ');
+  }
+
+  function toClassString(classValue) {
+    var classString = classValue;
+
+    if (isArray(classValue)) {
+      classString = classValue.map(toClassString).join(' ');
+    } else if (isObject(classValue)) {
+      classString = Object.keys(classValue).
+        filter(function(key) { return classValue[key]; }).
+        join(' ');
+    }
+
+    return classString;
+  }
+
+  function toFlatValue(classValue) {
+    var flatValue = classValue;
+
+    if (isArray(classValue)) {
+      flatValue = classValue.map(toFlatValue);
+    } else if (isObject(classValue)) {
+      var hasUndefined = false;
+
+      flatValue = Object.keys(classValue).filter(function(key) {
+        var value = classValue[key];
+
+        if (!hasUndefined && isUndefined(value)) {
+          hasUndefined = true;
         }
+
+        return value;
       });
-      return classes;
+
+      if (hasUndefined) {
+        // Prevent the `oneTimeLiteralWatchInterceptor` from unregistering
+        // the watcher, by including at least one `undefined` value.
+        flatValue.push(undefined);
+      }
     }
-    return classVal;
+
+    return flatValue;
   }
 }
 
diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index bac5efdfea89..9973bf6cbd9e 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -574,6 +574,76 @@ fdescribe('ngClass', function() {
       expect(element).not.toHaveClass('orange');
     })
   );
+
+  describe('large objects', function() {
+    var getProp;
+    var veryLargeObj;
+
+    beforeEach(function() {
+      getProp = jasmine.createSpy('getProp');
+      veryLargeObj = {};
+
+      Object.defineProperty(veryLargeObj, 'prop', {
+        get: getProp,
+        enumerable: true
+      });
+    });
+
+    it('should not be copied when using an expression', inject(function($compile, $rootScope) {
+      element = $compile('<div ng-class="fooClass"></div>')($rootScope);
+      $rootScope.fooClass = {foo: veryLargeObj};
+      $rootScope.$digest();
+
+      expect(element).toHaveClass('foo');
+      expect(getProp).not.toHaveBeenCalled();
+    }));
+
+    it('should not be copied when using a literal', inject(function($compile, $rootScope) {
+      element = $compile('<div ng-class="{foo: veryLargeObj}"></div>')($rootScope);
+      $rootScope.veryLargeObj = veryLargeObj;
+      $rootScope.$digest();
+
+      expect(element).toHaveClass('foo');
+      expect(getProp).not.toHaveBeenCalled();
+    }));
+
+    it('should not be copied when inside an array', inject(function($compile, $rootScope) {
+      element = $compile('<div ng-class="[{foo: veryLargeObj}]"></div>')($rootScope);
+      $rootScope.veryLargeObj = veryLargeObj;
+      $rootScope.$digest();
+
+      expect(element).toHaveClass('foo');
+      expect(getProp).not.toHaveBeenCalled();
+    }));
+
+    it('should not be copied when using one-time binding', inject(function($compile, $rootScope) {
+      element = $compile('<div ng-class="::{foo: veryLargeObj, bar: bar}"></div>')($rootScope);
+      $rootScope.veryLargeObj = veryLargeObj;
+      $rootScope.$digest();
+
+      expect(element).toHaveClass('foo');
+      expect(element).not.toHaveClass('bar');
+      expect(getProp).not.toHaveBeenCalled();
+
+      $rootScope.$apply('veryLargeObj.bar = "bar"');
+
+      expect(element).toHaveClass('foo');
+      expect(element).not.toHaveClass('bar');
+      expect(getProp).not.toHaveBeenCalled();
+
+      $rootScope.$apply('bar = "bar"');
+
+      expect(element).toHaveClass('foo');
+      expect(element).toHaveClass('bar');
+      expect(getProp).not.toHaveBeenCalled();
+
+      $rootScope.$apply('veryLargeObj.bar = "qux"');
+
+      expect(element).toHaveClass('foo');
+      expect(element).toHaveClass('bar');
+      expect(getProp).not.toHaveBeenCalled();
+    }));
+  });
 });
 
 describe('ngClass animations', function() {

From 739f7234671329e518e9b765ddd44c79744c958c Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Sat, 8 Oct 2016 10:51:55 +0300
Subject: [PATCH 10/15] fixup! refactor(ngClass): remove unnecessary dependency
 on `$animate`

---
 test/ng/directive/ngClassSpec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index 9973bf6cbd9e..8f504691f61e 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -1,6 +1,6 @@
 'use strict';
 
-fdescribe('ngClass', function() {
+describe('ngClass', function() {
   var element;
 
   beforeEach(module(function($compileProvider) {

From 181c51bb90613c80aa1415425f7c84b3b6aa2dc9 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Sat, 8 Oct 2016 16:20:50 +0300
Subject: [PATCH 11/15] fixup! refactor(ngClass): remove redundant `$observe`r

---
 test/ng/directive/ngClassSpec.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index 8f504691f61e..dcca83615fa6 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -334,34 +334,34 @@ describe('ngClass', function() {
       expect(e2).not.toHaveClass('four');
       expect(e2).toHaveClass('five');
 
-      $rootScope.$apply('two = "too"');
+      $rootScope.$apply('two = "another-two"');
 
       expect(e1).toHaveClass('one');
       expect(e1).not.toHaveClass('two');
-      expect(e1).toHaveClass('too');
+      expect(e1).toHaveClass('another-two');
       expect(e1).toHaveClass('three');
       expect(e1).not.toHaveClass('four');
       expect(e1).toHaveClass('five');
       expect(e2).toHaveClass('one');
       expect(e2).not.toHaveClass('two');
-      expect(e2).toHaveClass('too');
+      expect(e2).toHaveClass('another-two');
       expect(e2).toHaveClass('three');
       expect(e2).not.toHaveClass('four');
       expect(e2).toHaveClass('five');
 
-      $rootScope.$apply('two = "to"; four = "four"');
+      $rootScope.$apply('two = "two-more"; four = "four"');
 
       expect(e1).toHaveClass('one');
       expect(e1).not.toHaveClass('two');
-      expect(e1).not.toHaveClass('too');
-      expect(e1).toHaveClass('to');
+      expect(e1).not.toHaveClass('another-two');
+      expect(e1).toHaveClass('two-more');
       expect(e1).toHaveClass('three');
       expect(e1).not.toHaveClass('four');
       expect(e1).toHaveClass('five');
       expect(e2).toHaveClass('one');
       expect(e2).not.toHaveClass('two');
-      expect(e2).not.toHaveClass('too');
-      expect(e2).toHaveClass('to');
+      expect(e2).not.toHaveClass('another-two');
+      expect(e2).toHaveClass('two-more');
       expect(e2).toHaveClass('three');
       expect(e2).toHaveClass('four');
       expect(e2).toHaveClass('five');
@@ -370,15 +370,15 @@ describe('ngClass', function() {
 
       expect(e1).toHaveClass('one');
       expect(e1).not.toHaveClass('two');
-      expect(e1).not.toHaveClass('too');
-      expect(e1).toHaveClass('to');
+      expect(e1).not.toHaveClass('another-two');
+      expect(e1).toHaveClass('two-more');
       expect(e1).toHaveClass('three');
       expect(e1).not.toHaveClass('four');
       expect(e1).not.toHaveClass('five');
       expect(e2).toHaveClass('one');
       expect(e2).not.toHaveClass('two');
-      expect(e2).not.toHaveClass('too');
-      expect(e2).toHaveClass('to');
+      expect(e2).not.toHaveClass('another-two');
+      expect(e2).toHaveClass('two-more');
       expect(e2).toHaveClass('three');
       expect(e2).toHaveClass('four');
       expect(e2).not.toHaveClass('five');

From 16e666ba170d1671dc74f4651c49d2e2b8d9ed0c Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Sat, 8 Oct 2016 16:21:33 +0300
Subject: [PATCH 12/15] fixup! test(ngClass): add some tests about one-time
 bindings and objects inside arrays

---
 test/ng/directive/ngClassSpec.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index dcca83615fa6..b735934ddbbb 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -547,7 +547,7 @@ describe('ngClass', function() {
     })
   );
 
-  it('should do value remove the watcher when static map one-time binding',
+  it('should remove the watcher when static map one-time binding',
     inject(function($rootScope, $compile) {
       element = $compile('<div ng-class="::{foo: fooPresent}"></div>')($rootScope);
       $rootScope.$digest();
@@ -568,6 +568,8 @@ describe('ngClass', function() {
       element = $compile('<div ng-class="classVar"></div>')($rootScope);
       $rootScope.$digest();
 
+      expect(element).toHaveClass('orange');
+
       $rootScope.classVar[0].orange = false;
       $rootScope.$digest();
 

From dfe4307a971204355a7dad30426583f949c98dd2 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Sat, 8 Oct 2016 16:22:45 +0300
Subject: [PATCH 13/15] squash! fix(ngClassOdd/Even): keep track of classes
 even if odd/even do not match index

Change commit message to:
fix(ngClassOdd/Even): add/remove the correct classes when expression/`$index` change simultaneously
---
 test/ng/directive/ngClassSpec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index b735934ddbbb..9ee6765c4815 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -463,7 +463,7 @@ describe('ngClass', function() {
   }));
 
 
-  it('should keep track of old classes even if odd/even does not match `$index` atm',
+  it('should add/remove the correct classes when the expression and `$index` change simultaneously',
     inject(function($compile, $rootScope) {
       element = $compile(
           '<div>' +

From f7666987692fd7854f47c277b18ecf67241745e2 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Sat, 8 Oct 2016 21:13:02 +0300
Subject: [PATCH 14/15] fixup! perf(ngClass): avoid deep-watching (if possible)
 and unnecessary copies

---
 src/ng/directive/ngClass.js | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index f4f1849d0094..3aa41a6cd21e 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -32,20 +32,7 @@ function classDirective(name, selector) {
         }
 
         if (name !== 'ngClass') {
-          scope.$watch('$index', function($index) {
-            // eslint-disable-next-line no-bitwise
-            var newModulo = $index & 1;
-
-            if (newModulo !== oldModulo) {
-              if (newModulo === selector) {
-                addClasses(oldClassString);
-              } else {
-                removeClasses(oldClassString);
-              }
-
-              oldModulo = newModulo;
-            }
-          });
+          scope.$watch('$index', ngClassIndexWatchAction);
         }
 
         scope.$watch(watchExpression, watchAction, isOneTime);
@@ -89,6 +76,24 @@ function classDirective(name, selector) {
           return classesToUpdate.join(' ');
         }
 
+        function ngClassIndexWatchAction($index) {
+          // eslint-disable-next-line no-bitwise
+          var newModulo = $index & 1;
+
+          if (newModulo !== oldModulo) {
+            // This watch-action should run before the `ngClass[OneTime]WatchAction()`, thus it
+            // adds/removes `oldClassString`. If the `ngClass` expression has changed as well, the
+            // `ngClass[OneTime]WatchAction()` will update the classes.
+            if (newModulo === selector) {
+              addClasses(oldClassString);
+            } else {
+              removeClasses(oldClassString);
+            }
+
+            oldModulo = newModulo;
+          }
+        }
+
         function ngClassOneTimeWatchAction(newClassValue) {
           var newClassString = toClassString(newClassValue);
 

From a9742f9092ee902d8ffec15d6368989bdaf175cb Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Mon, 10 Oct 2016 13:20:43 +0300
Subject: [PATCH 15/15] fixup! refactor(ngClass): simplify conditions

---
 src/ng/directive/ngClass.js | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index 3aa41a6cd21e..a26c1c77187b 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -8,6 +8,7 @@
 
 function classDirective(name, selector) {
   name = 'ngClass' + name;
+  var indexWatchExpression;
 
   return ['$parse', function($parse) {
     return {
@@ -32,7 +33,14 @@ function classDirective(name, selector) {
         }
 
         if (name !== 'ngClass') {
-          scope.$watch('$index', ngClassIndexWatchAction);
+          if (!indexWatchExpression) {
+            indexWatchExpression = $parse('$index', function moduloTwo($index) {
+              // eslint-disable-next-line no-bitwise
+              return $index & 1;
+            });
+          }
+
+          scope.$watch(indexWatchExpression, ngClassIndexWatchAction);
         }
 
         scope.$watch(watchExpression, watchAction, isOneTime);
@@ -76,22 +84,17 @@ function classDirective(name, selector) {
           return classesToUpdate.join(' ');
         }
 
-        function ngClassIndexWatchAction($index) {
-          // eslint-disable-next-line no-bitwise
-          var newModulo = $index & 1;
-
-          if (newModulo !== oldModulo) {
-            // This watch-action should run before the `ngClass[OneTime]WatchAction()`, thus it
-            // adds/removes `oldClassString`. If the `ngClass` expression has changed as well, the
-            // `ngClass[OneTime]WatchAction()` will update the classes.
-            if (newModulo === selector) {
-              addClasses(oldClassString);
-            } else {
-              removeClasses(oldClassString);
-            }
-
-            oldModulo = newModulo;
+        function ngClassIndexWatchAction(newModulo) {
+          // This watch-action should run before the `ngClass[OneTime]WatchAction()`, thus it
+          // adds/removes `oldClassString`. If the `ngClass` expression has changed as well, the
+          // `ngClass[OneTime]WatchAction()` will update the classes.
+          if (newModulo === selector) {
+            addClasses(oldClassString);
+          } else {
+            removeClasses(oldClassString);
           }
+
+          oldModulo = newModulo;
         }
 
         function ngClassOneTimeWatchAction(newClassValue) {