advanced-directives-with-angular-js's Introduction

Advanced Directives with Angular JS

This repository is the companion to two screencasts:

Part One 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. 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)

Part Two continues the examination of some of the advanced features in Part 1. This screencast covers:

bugfixes for the inline editor
auto toggling of editing state using CSS content generation and the angular $scope
leveraging the DSL from the first screencast as an interface to a 3rd party JavaScript data grid component: js-grid

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;

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 [email protected]: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)~~ Fixed Here
~~Feature: make the expandy arrow thing point down when expanded and to the right when collapsed.~~ Added Here

advanced-directives-with-angular-js's People