Excluding Object Properties in AngularJS's $scope.$watch

Want to $watch an object in Angular, but ignore changes on certain properties?  Here's a function that will help you out:

function diff(obj1, obj2, exclude) {
    var r = {};

    if (!exclude) exclude = [];

    for (var prop in obj1) {
        if (obj1.hasOwnProperty(prop)) {
            if (exclude.indexOf(obj1[prop]) == -1) {

                // check if obj2 has prop
                if (!obj2.hasOwnProperty(prop)) r[prop] = obj1[prop];

                // check if prop is object, if so, recursive diff
                else if (obj1[prop] === Object(obj1[prop])) {
                    if (obj2[prop] == undefined || obj2[prop] == null)
                        r[prop] = obj2[prop];
                    else {
                        var difference = diff(obj1[prop], obj2[prop]);
                        if (Object.keys(difference).length > 0) r[prop] = difference;
                    }
                }

                // check if obj1 and obj2 are equal
                else if (obj1[prop] !== obj2[prop]) {
                    if (obj1[prop] === undefined)
                        r[prop] = 'undefined';
                    if (obj1[prop] === null)
                        r[prop] = null;
                    else if (typeof obj1[prop] === 'function')
                        r[prop] = 'function';
                    else if (typeof obj1[prop] === 'object')
                        r[prop] = 'object';
                    else
                        r[prop] = obj1[prop];
                }
            }
        }

    }

    return r;
}

And here's how to use it...

$scope.$watch(function () { return vm.objectToWatch; }, function(newValue, oldValue) {

var difference = diff(newValue, oldValue,
        [ 
            newValue.ignoredProp1,
            newValue.ignoredProp2,
            newValue.ignoredProp3,
            newValue.ignoredProp4, 
        ]);

// If 'difference' is empty, then return 
if (Object.keys(difference).length === 0) return;

// 'difference' contains properties that we DON't want to ignore so do something...

}, true);

And, finally a jsfiddle example.


Karma + Jasmine + Visual Studio (including Visual Studio Code)

I've been developing a LOT of Angular applications lately. Some of them are hybrid projects (Angular w/ MVC); some of my projects have been completely separated (Angular for client-side, with a separate project for an API). Regardless, I always want to ensure that my code has been thoroughly tested with unit tests and acceptance (E2E) tests. When developing hybrid projects, my preferred IDE is Visual Studio. When developing a pure, client-side project, my preferred IDE is Visual Studio Code as it has a lot less remnants/artifacts tied to a solution (.vs, .xproj, .csproj, etc.) eliminating the need for a ridiculously large .gitignore file.  Additionally, I will use WebStorm depending on the need.

Jasmine is a great framework for providing both unit testing and end-to-end, acceptance testing.  Coupled with Karma, Jasmine can monitor file changes to our client-side code and execute tests on every file change in order to ensure that all tests are always passing.  In this blog post, I will demonstrate how to set up and use Karma and Jasmine in both development environments.

Read more