Team insights: $location. VS window.location() in Angular Applications

So, as with most things related to Angular, if there is an option to use Angular, or another (JQuery, JavaScript, Some-Other-Library-That-Is-Not-Angular) resource, we recommending using Angular.

In the sysTree tool (on the “In The Lab” page of IIU’s project Apollo), we noticed the oddest behavior on a demo system on IE10. A type-ahead command (the little pop-down that shows up while typing out a query) that seemed to work on every other page on the site, caused a persistent and challenging “redirect loop” when an item was selected.

After some research by another member of our team, it was found that the function invoked in the sysTree controller by the type-ahead function, called for window.location(‘sysTree/’ + id).  This caused the browser to invoke a quick reload of the page outside of angular, which in IE resulted in a significant problem in the JavaScript engine (the controller ended up getting initialized over and over until IE put a stop to the loop).

The issue was resolved by implementing Angular’s location controller via $location.path(‘sysTree/’ + id).  Through this technique, instead of the browser being invoked by javascript to reload the page, Angular simply restarted the controller with the new ID.

So, as mentioned earlier, if there is an option to use Angular, as compared to another solution, (JQuery, JavaScript, Some-Other-Library-That-Is-Not-Angular), we recommend sticking with Angular.

 

angularLogo