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.