From fcca1975de1f6d055d020bdab4bbcdf9cdc89c66 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 1/9] refactor(ngClass): remove unnecessary dependency on
 `$animate`

---
 src/ng/directive/ngClass.js      | 12 ++++------
 test/ng/directive/ngClassSpec.js | 39 ++++++++++++++++++++------------
 2 files changed, 30 insertions(+), 21 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..8fb89bffe4d7 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -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 ec72ec6d921fbbbc6bdc210f317ed97801636c11 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 2/9] 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 8fb89bffe4d7..dd91a3224edb 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -311,37 +311,79 @@ describe('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 = "another-two"');
+
+      expect(e1).toHaveClass('one');
+      expect(e1).not.toHaveClass('two');
+      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('another-two');
+      expect(e2).toHaveClass('three');
+      expect(e2).not.toHaveClass('four');
+      expect(e2).toHaveClass('five');
+
+      $rootScope.$apply('two = "two-more"; four = "four"');
+
+      expect(e1).toHaveClass('one');
+      expect(e1).not.toHaveClass('two');
+      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('another-two');
+      expect(e2).toHaveClass('two-more');
+      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('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('another-two');
+      expect(e2).toHaveClass('two-more');
+      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 f4cb66a8e896ee421a6f5b6bf98aa4d39e1e2410 Mon Sep 17 00:00:00 2001
From: David Rodenas Pico <david.rodenas@gmail.com>
Date: Mon, 10 Oct 2016 20:58:01 +0200
Subject: [PATCH 3/9] test(ngClass): add some tests about one-time bindings and
 objects inside arrays

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

diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index dd91a3224edb..5bd5eb463ca2 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -310,7 +310,6 @@ describe('ngClass', function() {
     expect(e2.hasClass('D')).toBeFalsy();
   }));
 
-
   it('should reapply ngClass when interpolated class attribute changes',
     inject(function($compile, $rootScope) {
       element = $compile(
@@ -477,6 +476,100 @@ describe('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.$apply('className = "foo"');
+      expect(element).toHaveClass('foo');
+
+      $rootScope.$apply('className = "bar"');
+      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.$apply('className = "foo"');
+      expect(element).toHaveClass('foo');
+
+      $rootScope.$apply('className = "bar"');
+      expect(element).toHaveClass('foo');
+      expect(element).not.toHaveClass('bar');
+    })
+  );
+
+  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.$apply('fooPresent = true');
+      expect(element).toHaveClass('foo');
+
+      $rootScope.$apply('fooPresent = false');
+      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();
+      expect(element).toHaveClass('orange');
+
+      $rootScope.$apply('classVar[0].orange = false');
+      expect(element).not.toHaveClass('orange');
+    })
+  );
+
+  describe('large objects', function() {
+
+    var verylargeobject, getProp;
+    beforeEach(function() {
+      getProp = jasmine.createSpy('getProp');
+      verylargeobject = {};
+      Object.defineProperty(verylargeobject, 'prop', {
+        get: getProp,
+        enumerable: true
+      });
+    });
+
+    it('should not be copied if static', inject(function($rootScope, $compile) {
+      element = $compile('<div ng-class="{foo: verylargeobject}"></div>')($rootScope);
+      $rootScope.verylargeobject = verylargeobject;
+      $rootScope.$digest();
+
+      expect(getProp).not.toHaveBeenCalled();
+    }));
+
+    it('should not be copied if dynamic', inject(function($rootScope, $compile) {
+      $rootScope.fooClass = {foo: verylargeobject};
+      element = $compile('<div ng-class="fooClass"></div>')($rootScope);
+      $rootScope.$digest();
+
+      expect(getProp).not.toHaveBeenCalled();
+    }));
+
+    it('should not be copied if inside an array', inject(function($rootScope, $compile) {
+      element = $compile('<div ng-class="[{foo: verylargeobject}]"></div>')($rootScope);
+      $rootScope.verylargeobject = verylargeobject;
+      $rootScope.$digest();
+
+      expect(getProp).not.toHaveBeenCalled();
+    }));
+
+    it('should not be copied when one-time binding', inject(function($rootScope, $compile) {
+      element = $compile('<div ng-class="::{foo: verylargeobject}"></div>')($rootScope);
+      $rootScope.verylargeobject = verylargeobject;
+      $rootScope.$digest();
+
+      expect(getProp).not.toHaveBeenCalled();
+    }));
+  });
 });
 
 describe('ngClass animations', function() {

From 62f6e977f53a91f934fe9335e9c9d7c3a045755c 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 4/9] fix(ngClassOdd/Even): add/remove the correct classes when
 expression/`$index` change simultaneously

---
 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 5bd5eb463ca2..29f27a5e65c6 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -461,6 +461,47 @@ describe('ngClass', function() {
     expect(e2.hasClass('odd')).toBeFalsy();
   }));
 
+
+  it('should add/remove the correct classes when the expression and `$index` change simultaneously',
+    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 f31df40c9a05753778a44d24f1fd640ef6cb9493 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 5/9] 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 baddb326e720524daace03572e67d9ccafa5465c 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 6/9] refactor(ngClass): simplify conditions

---
 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 20e7096b1e76..d56e5fcb01e1 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -8,12 +8,14 @@
 
 function classDirective(name, selector) {
   name = 'ngClass' + name;
+  var indexWatchExpression;
 
-  return [function() {
+  return ['$parse', function($parse) {
     return {
       restrict: 'AC',
       link: function(scope, element, attr) {
         var classCounts = element.data('$classCounts');
+        var oldModulo = true;
         var oldVal;
 
         if (!classCounts) {
@@ -24,18 +26,22 @@ 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)) {
-              var classes = arrayClasses(oldVal);
-              if (mod === selector) {
-                addClasses(classes);
-              } else {
-                removeClasses(classes);
-              }
+          if (!indexWatchExpression) {
+            indexWatchExpression = $parse('$index', function moduloTwo($index) {
+              // eslint-disable-next-line no-bitwise
+              return $index & 1;
+            });
+          }
+
+          scope.$watch(indexWatchExpression, function(newModulo) {
+            var classes = arrayClasses(oldVal);
+            if (newModulo === selector) {
+              addClasses(classes);
+            } else {
+              removeClasses(classes);
             }
-            /* eslint-enable */
+
+            oldModulo = newModulo;
           });
         }
 
@@ -77,8 +83,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 9bb43ba62617753d35bf965e885790237d262ec5 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 7/9] 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 d56e5fcb01e1..faaa26c51e16 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -100,41 +100,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 7319bd328fff6b0403b24d86412925fe4c41780f 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 8/9] 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 faaa26c51e16..8e4181ab6fa5 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -104,6 +104,9 @@ function classDirective(name, selector) {
 
   // Helpers
   function arrayDifference(tokens1, tokens2) {
+    if (!tokens1 || !tokens1.length) return [];
+    if (!tokens2 || !tokens2.length) return tokens1;
+
     var values = [];
 
     outer:
@@ -114,6 +117,7 @@ function classDirective(name, selector) {
       }
       values.push(token);
     }
+
     return values;
   }
 

From 120f60b84347324bf67aad6c91da9bd6ac72ff67 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 9/9] 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      | 150 +++++++++++++++++++------------
 test/ng/directive/ngClassSpec.js |  55 ++++++++----
 2 files changed, 135 insertions(+), 70 deletions(-)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index 8e4181ab6fa5..a26c1c77187b 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -14,9 +14,16 @@ function classDirective(name, selector) {
     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
@@ -33,34 +40,39 @@ function classDirective(name, selector) {
             });
           }
 
-          scope.$watch(indexWatchExpression, function(newModulo) {
-            var classes = arrayClasses(oldVal);
-            if (newModulo === selector) {
-              addClasses(classes);
-            } else {
-              removeClasses(classes);
-            }
-
-            oldModulo = newModulo;
-          });
+          scope.$watch(indexWatchExpression, ngClassIndexWatchAction);
         }
 
-        scope.$watch(attr[name], ngClassWatchAction, true);
+        scope.$watch(watchExpression, watchAction, isOneTime);
 
-        function addClasses(classes) {
-          var newClasses = digestClassCounts(classes, 1);
-          attr.$addClass(newClasses);
+        function addClasses(classString) {
+          classString = digestClassCounts(split(classString), 1);
+          attr.$addClass(classString);
         }
 
-        function removeClasses(classes) {
-          var newClasses = digestClassCounts(classes, -1);
-          attr.$removeClass(newClasses);
+        function removeClasses(classString) {
+          classString = digestClassCounts(split(classString), -1);
+          attr.$removeClass(classString);
+        }
+
+        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)) {
@@ -72,31 +84,33 @@ 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 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);
+          }
 
-          attr.$addClass(toAdd);
-          attr.$removeClass(toRemove);
+          oldModulo = newModulo;
         }
 
-        function ngClassWatchAction(newVal) {
-          if (oldModulo === selector) {
-            var newClasses = arrayClasses(newVal || []);
-            if (!oldVal) {
-              addClasses(newClasses);
-            } else if (!equals(newVal,oldVal)) {
-              var oldClasses = arrayClasses(oldVal);
-              updateClasses(oldClasses, newClasses);
-            }
+        function ngClassOneTimeWatchAction(newClassValue) {
+          var newClassString = toClassString(newClassValue);
+
+          if (newClassString !== oldClassString) {
+            ngClassWatchAction(newClassString);
           }
-          if (isArray(newVal)) {
-            oldVal = newVal.map(function(v) { return shallowCopy(v); });
-          } else {
-            oldVal = shallowCopy(newVal);
+        }
+
+        function ngClassWatchAction(newClassString) {
+          if (oldModulo === selector) {
+            updateClasses(oldClassString, newClassString);
           }
+
+          oldClassString = newClassString;
         }
       }
     };
@@ -121,24 +135,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 29f27a5e65c6..ae671d050bd3 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -568,46 +568,71 @@ describe('ngClass', function() {
   );
 
   describe('large objects', function() {
+    var getProp;
+    var veryLargeObj;
 
-    var verylargeobject, getProp;
     beforeEach(function() {
       getProp = jasmine.createSpy('getProp');
-      verylargeobject = {};
-      Object.defineProperty(verylargeobject, 'prop', {
+      veryLargeObj = {};
+
+      Object.defineProperty(veryLargeObj, 'prop', {
         get: getProp,
         enumerable: true
       });
     });
 
-    it('should not be copied if static', inject(function($rootScope, $compile) {
-      element = $compile('<div ng-class="{foo: verylargeobject}"></div>')($rootScope);
-      $rootScope.verylargeobject = verylargeobject;
+    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 if dynamic', inject(function($rootScope, $compile) {
-      $rootScope.fooClass = {foo: verylargeobject};
-      element = $compile('<div ng-class="fooClass"></div>')($rootScope);
+    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 if inside an array', inject(function($rootScope, $compile) {
-      element = $compile('<div ng-class="[{foo: verylargeobject}]"></div>')($rootScope);
-      $rootScope.verylargeobject = verylargeobject;
+    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 one-time binding', inject(function($rootScope, $compile) {
-      element = $compile('<div ng-class="::{foo: verylargeobject}"></div>')($rootScope);
-      $rootScope.verylargeobject = verylargeobject;
+    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();
     }));
   });