Angular 1.5 Component vs Directive Notes

When you use a  .component(), you create DOM, when you use  .directive() you decorate DOM, that is the mindset
components
  • Templates can be a String literal or a function that returns a template for compilation
  • The  $onInit lifecycle hook
    • Use for initialisation logic
    • Also use for inheriting parent Controller behaviour through  require: {} (as Object syntax)
  • Use  $postLink for DOM manipulation
  • Components are always created with isolate scope.
directive
  • Use a Directive for binding custom behaviour to existing DOM.
Other thoughts/notes:
  • writing component directives will make it easier to upgrade to Angular 2
  • Angular 1.5 introduced the  .component() helper method, which is much simpler than the  .directive()
  • for BDD tests you will need to match the ng-repeat selector elements for it to work with ng-repeat
Links:
Accessing parent components controllers through child components
Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and love to share what he learns.

Leave a Reply

Your email address will not be published. Required fields are marked *