blog.davemo.comthoughts on software, music, art, and meaning.

Advanced Directives with AngularJS (Part 1)

This screencast examines some of the more advanced features in Angular, specifically Directives. We’ll see how we can leverage the power of custom elements and attributes to map Domain Specific concepts through HTML and translate those into Value Objects in our Domain, resulting in cleaner HTML output. Also discussed: complexity, creating a DSL with directives, debugging techniques, and other tips and tricks.

If you’re interested in some more context prior to watching, check out my other angular screencasts and an earlier post on the power of web components as abstractions. This screencast covers:

Code

Extra Credit

Some things in the screencast aren’t complete and some things could definitely done better. This section is a challenge to you, the reader/watcher to improve the code and level up your knowledge in the process! Try and tackle some of these challenges if you want:

  • Bugfix: the editor currently shows up multiple times, fix it so this doesn’t happen (hint: maybe an ‘edit’ state that’s tracked could help the directive know if it should execute .insertAfter)
  • Feature: make the expandy arrow thing point down when expanded and to the right when collapsed.

Resources

This is part of a screencast series on Angular JS

  1. Intro to Angular JS
  2. End to End with Angular JS
  3. Security with Angular JS
  4. Frontend Workflows with Grunt and Angular JS
  5. Testing Strategies for Angular JS
  6. Advanced Directives with Angular JS (Part 1)
  7. Advanced Directives with Angular JS (Part 2)