AngularJS: Het verschil tussen Components en Directives

AngularJS: Het verschil tussen Components en Directives

AngularJS is een uitstekend framework om snel client-side apps mee te maken. Het MVC framework biedt controllers, services, factories, views, directives en componenten. Servies, controllers en views hebben een duidelijke functie binnen de app, maar components en directives hebben veel gemeen.

Belangrijkste kenmerken

Components

  • heeft een template
  • maakt een component (nieuw DOM element)
  • is technisch een directive

Directives

  • voegt gedrag toe aan een bestaand component (of ander DOM element)

Verschil

Het belangrijkste verschil tussen een component en directive is dat een component wordt gebruikt om templates te laden, je kunt de template voorzien van logica door bijvoorbeeld ng-click, ng-if en ng-submit directives te gebruiken.

Een Directive wordt gebruikt om gedrag toe te voegen aan een DOM element. Voorbeelden zijn; required-directive op een input element.

Directive Component
bindings Nee Ja
bindToController Ja Nee
compile function Ja Nee
controller Ja Ja
controllerAs Ja Ja
link functions Ja Nee
multiElement Ja Nee
priority Ja Nee
replace Ja Nee
require Ja Ja
restrict Ja Nee
scope Ja Nee
template Ja Ja
templateNamespace Ja Nee
templateUrl Ja Ja
terminal Ja Nee
transclude Ja Ja


Conclusie

Met de volgende vuistregel kun je altijd snel een keuze maken of je een component of directive moet maken; Gebruik component als je een element wilt maken (restricted to 'E'). Gebruik een directive als je een attribute wilt maken (restricted to 'A').

Lees ook

The bullshit of implementing web accessibility

Do you retroactively apply web accessibility (WCAG) to your apps, or is it already on your backlog for this sprint? Then you need to read this article. We – all frontend developers – are approaching WCAG completely wrong. It’s part of our job, but we treat it as an afterthought. Stop the bullshit about being EAA-compliant and make accessibility a real part of your work.

Continue reading

The bullshit of frontend development

Do you ever feel like the frontend of every website and application has become increasingly complex over time? In the past, we built everything using CSS, HTML, and a little bit of JavaScript, but now everything is done with Angular, React, or Vue, with just a bit of CSS and HTML. What has changed, and is this shift actually a positive one?

Continue reading

How I added my Porsche EV to Homekit

Since my childhood, I have been passionate about cars and everything related to them. Even at a young age, I knew every model. I spent hours flipping through car magazines searching for new facts and always dreamed of owning an exotic car. Initially, I used to dream of owning a Ferrari, but as I grew older and wiser,…

Continue reading