angular-ui/bootstrap

Lessons learned: improving flexibility

pkozlowski.opensource@gmail.com / @pkozlowski_os

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

I'm into climbing and open-source

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

http://angular-ui.github.io/bootstrap/

Philosophy

• Lightweight, native directives based on Bootstrap CSS
• Flexible / Customizable
• Tested

Try it at home

Customising look & feel

Not so easy with jQuery plugins...

templateUrl

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

"API"...

controller

Example: closing alerts on timeout

"One size fits all"

Example: closing alerts on timeout

controller

• 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

Aggregation

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

Takaways

• 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

That's all

Thank you for having me.

https://github.com/pkozlowski-opensource/ng-europe-2014