Lessons learned: improving flexibility / @pkozlowski_os

ng-europe, October 22nd-23rd, 2014

I'm into climbing and open-source

AngularJS, AngularUI, Karma runner, angular-app, ...


Try it at home

Customising look & feel

Not so easy with jQuery plugins...


templates in angular-ui/bootstrap datepicker

Angular Foundation

Markup customisation

  • Externalise markup with templateUrl
  • Keep _all_ the markup / CSS out of your JavaScript code
  • Preload templates ( templateUrl is just an unique id)
  • You might want to have a separate module for templates

Customising functionality

Settings / configuration

"Essential" vs. configuration attributes

  • Allow people to specify defaults for the optional arguments
  • Limit number of "config" attributes:
    • too much "weight"
    • too much complexity
    • too much $watch-ing

Examples: alert, pagination, datepicker



Example: closing alerts on timeout

Initial proposal

"One size fits all"

Example: closing alerts on timeout

Implemented solution


  • more than API for inter-directive communication
  • extension point for the functionality
  • controllers could be:
    • invoked from other directives
    • monkey-patched
    • decorated in the DI container
  • grow the API / open-up gradually


Example: draggable modals

Build from small directives

Sometimes directives are not the best abstraction

<modal> vs. $modal

Know the rules

and break them when needed


  • Externalise markup (templateUrl)
  • Open up logic API with a controller
  • You don't need to code everything
  • Write small, focused directives
  • Sometimes a directive is not the right abstraction
  • Don't guess - enlarge APIs as use-cases emerge

A note on testing

Some more hacking tips

Hacking Core Directives in AngularJS

That's all

Thank you for having me. / @pkozlowski_os