Advanced Directives with Angular JS

This screencast examines some of the more advanced features in Angular, specifically Directives and how we can leverage the power of custom elements and attributes to map Domain Specific concepts through HTML, translate those into Value Objects in our Domain, and gain rendered simple HTML output. Also discussed: complexity, creating a DSL with directives, debugging techniques, 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:

• html as a dsl
• abstractions in html
• $compile
• $templateRequest
• $templateCache
• directive definition object
• requiring other directives
• directive communication ($scope.$broadcast, $scope.$on)

Running the Code Locally

I like to use the npm module serve for running a simple static webserver for projects like this:

npm i -g serve
git clone git@github.com:davemo/advanced-directives-with-angular-js.git
cd advanced-directives-with-angular-js
serve

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.