angular.js
Directives
Hunter Loftis
Skookum Digital Works
<hunter@skookum.com>
August 2013
How angular works
Bootstrap starts at the top-level app and compiles the DOM.
Scope glues model to view, provides context.
View projects scope onto templates, uses directives.
Model is POJSO referenced by scope, scope is responsible for detecting changes.
Controller constructs model and connects it to scope.
Directives extend the vocabulary of HTML!
benefits of directives
- Declarative UI
- Modularity
- Testability
- Reusability
- Memory management
So you get nested, tested, memory managed, reusable components!
why isn't everyone doing this?
- Directives look complex.
- Angular uses ridiculous, off-putting terminology.
- The documentation is terrible.
- Most examples are terrible.
- Thought to be SEO-unfriendly (mostly untrue).
- Thought to render slower (mostly true).
[ demo s4.touch directives ]
let's build some directives!
There are a million ways to build directives. We're going to use one simple pattern that works in all cases, defining:
- restrict
- link
- template
- templateUrl
- replace
- transclude
- scope
- controller
the template
angular
By hunterloftis
