Component or Directives

Component or Directives

Components
In AngularJS, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

This makes it easier to write an app in a way that’s similar to using Web Components or using the new Angular’s style of application architecture.

Advantages of Components:

simpler configuration than plain directives
promote sane defaults and best practices
optimized for component-based architecture
writing component directives will make it easier to upgrade to Angular

When not to use Components:

for directives that need to perform actions in compile and pre-link functions, because they aren’t available
when you need advanced directive definition options like priority, terminal, multi-element
when you want a directive that is triggered by an attribute or CSS class, rather than an element.

Directive
The notion of a directive is not something unique to Angular, although AngularJs did both give a name to the concept and popularized the term.

But something similar to the concept of Directive has actually always been there since the beginning of browsers and the web!

The browser has this built-in feature that seems very useful for creating new HTML elements from existing ones. Using it we can:

define a public XML-like API to an element of the page
define the look and feel of the element using HTML
we can add behavior to that new element
we can even style it while keeping those styles isolated

This combined specification of a look and feel, an API and a behavior is a useful concept, so let’s give it a name: let’s call it a Directive.

Directive types

$compile can match directives based on element names (E), attributes (A), class names (C), and comments (M).

The built-in AngularJS directives show in their documentation page which type of matching they support.

 

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course.

Angular 4 Tutorial IndexBack to Angular 4 Tutorial Main Page

Share this post
[social_warfare]
Angular Directive Basics
Angular Attribute Directives

Get industry recognized certification – Contact us

keyboard_arrow_up