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


'Hello World' with Node.js and Visual Studio Code

As I've shared in other posts, I like trying new things. One new thing I've been working with over the past couple of weeks is Visual Studio Code (VSC) - a lightweight editor from Microsoft that recognizes and offers IntelliSense for many different file formats. Unlike the commercial or even community editions of Visual Studio, VSC is not solution- or project-based. Instead, VSC is based on directory structures.

For those of you interested in building native JavaScript applications using Node.js, I wanted to provide a demo in how to accomplish this using Visual Studio Code. While full versions of Visual Studio do support Node.js applications, it can sometimes be overkill, especially if you're not needing pre-compiled libraries based on the .NET Framework (VSC does support referencing external libraries and compilation with MSBuild, but then we get into the discussion of should we use VSC vs. Visual Studio, which is not the point of this blog post). Again, the demonstration below is to assist you as you look to build native JavaScript applications.
Read more