Just over a week ago an Angular project went live after several years of development. Our team peaked at over 25 developers distributed around the world. The source ended up at over 80,000 lines of TypeScript code (although I jokingly note this ends up as just one line of minified JavaScript) and includes hundreds of controllers, services, views, etc. You don’t get that far in an enterprise app without learning a thing or two about debugging and performance.
I just released my video “AngularJS: Debugging and Performance” as the 12th lesson in my course, Mastering AngularJS. This course covers everything you need to know to build business apps in Angular. Topics start out with fundamentals that provides an end-to-end overview, followed by a deep dive into scope and the digest loop. Learn about advanced filters, how dependency injection works, and what the built-in Angular services are. Lessons cover consuming web services from Angular (using both $http and ngResource), handling routing with ngRoute and ui-router, fundamentals of directives and advanced directives. I cover testing using Jasmine and this latest video is all about debugging and performance.
The debugging and performance lesson starts by covering some of the built-in Angular services like $exceptionHandler and $log, and how to leverage the JavaScript debugger key word. I then dive into how to troubleshoot Angular applications by inspecting the HTML DOM and using that to dive into source code and unravel the HTML nodes generated by templates. I cover the Chrome Batarang extension and then go into using Chrome Developer Tools to troubleshoot a memory leak. Learn how to use the Zone library to instrument your apps, how to avoid the overhead of extra watches when data-binding to render static data, and how to deal with extremely long (one million records or more) lists on the client. I include tips for using the right directives to condition rendering of the DOM, how to minimize overhead of watches, and how to take advantage of lazy-loading or instantiation of new components “on the fly.”
The course includes full access to working examples and source code. If you are working with Angular, I know you will want to check this lesson out.
