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:
- html as a dsl
- abstractions in html
- $compile
- $templateRequest
- $templateCache
- directive definition object
- requiring other directives
- directive communication ($scope.$broadcast, $scope.$on)
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
