Book Review|Mastering AngularJS Directives


Mastering AngularJS Directives“ by Josh Kurz is a deep dive into the magic of writing directives using the AngularJS framework by Google. This review is based on the eBook which was amply sponsored by Packt Publishing. The book is divided into nine chapters on roughly 200 pages.

The first chapter introduces the reader to the directives‘ basics, explaining the definition object from the scratch as it is the foundation of every directive. Each property resp. function gets a detailed description and it usage is shown in an example where applicable. It is noteworthy that the author provides links to the fully runnable examples on JSFIDDLE, so that the reader can easily reproduce and experiment with the code samples without any hassle. After finishing the chapter the reader has a basic understanding of the different properties as well the compilation and linking process taking place if a directive comes alive.

The following chapter deepens comprehension of directives by build a stop watch utilizing the scope, compile and link fields. It is pointed out how directives are used to separate the logic from the presentation without manipulating the DOM directly from the business logic. This separation of concerns leads to clean maintainable code besides being the state-of-the-art approach to modern web applications. Using AngularJS correctly will enforce the production of clean, reusable code without giving any chance for mixing up logic and presentation code.

The third chapters put the focus on incorporating third party libraries into AngularJS.  Wrapping third party libraries by directives allows handing over the initialization control to AngularJS. Furthermore it is discussed how to provide proper tests for directives using third party code by introducing mock and spying concepts as applied by Jasmine or Mocha.

The next chapter is dedicated to AngularJS directives $compile service which is the starting point to  dynamically insert or destroy HTML into an application. This process involves several steps and takes place before the linking phase. The author covers the whole life cycle in depth and the significant use cases transclusion, recursion and dynamic templates.

Developing a fairly real world application will incorporate several directives which have to exchange their states. In the fifth chapter the author emblazes the aspects of communication between and with directives as well as the collaboration with controllers.

“Working with live data” covers the processing of large amounts – and probably remote – data. It introduces asynchronous concepts like futures and promises putting the focus once again on proper use and testing. The chapter finishes by building a charting directive utilizing the D3 library.

The following chapter gives on overview on the optimization opportunities – mainly the importance of the correct view organization and the relationship to the digest life cycle. The digest life cycle is the key for performance optimization for AngularJS apps. Writing clear and fast code will drive  the performance, readability and (re-)usability.

The eighth chapter shows how to support animations as there are already build into the AngularJS framework. There are two main varieties of animations, CSS‑based and JavaScript‑based ones, which are both covered.

The book is concluded by a summarizing chapter repeating the key points from the previous chapters and putting it all back into one global scope.

After finished the book and doing a bit of hands on work you probably feel like an AngularJS directive ninja wearing the black belt from the book cover. The author has a clear and easily understandable writing style making it enjoyable for the reader to follow his thoughts. Personally I really like the provided JSFIDDLE links to try out and experiment with the code samples instantly. Hopefully I will get some time soon to practical incorporate my new directive design knowledge into my projects.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

dreizehn − sechs =