Angular directives

The definition of a directive stated by the Angular team is pretty clear.

Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

The context in which I use the term directive would be as follows:

I'm going to build a directive to lazy load images.

I have got an image:

 <img src="image.jpg"/> 

Lets add a marker on the image element so the AngularJs framework knows we want to manipulate that html element, or the html within the element.

<img lazy-load src="image.jpg" /> 

To make sure the image.jpg does not get fetched yet before javascript kicks in, we just add a placeholder to the src and add a attribute on the element which will be available in the directive.

<img lazy-load src="placeholder.jpg" origin-src="image.jpg" /> 

Now lets build the actual directive within the AngularJs Framework.

app.directive('lazyLoad', function() { return { restrict: 'A', link: function (scope, element, attrs) { var imagesrc = attrs.originSource; // further logic to lazyload image } }; }); 

You can find many examples on Directives right here: https://docs.angularjs.org/guide/directive

Directive - I guess the terminology itself creates confusion to most of people. That's why angular people coming with 'Component' terminology with 2.0.

Directive is nothing but writing our own reusable custom tag and assigning some meaningfull functionality to it.

Lets say, we want to show an advertise panel over and over on all pages. It should depend on user history, preferences and also support lazy loading of images etc.

We can create a directive which will take image-name, preferece etc and will render it on its own.

We can create this as a reusable component and use it anywhere in the app by just including it in the html markup.

Directives are defined classes that can add new behaviour or modify the existing behaviour to the DOM. The term "directives" Angular often refers to a combination of elements, attributes, and behaviours that work together to extend the functionality of HTML. It also contains the JavaScript functions (logic) that execute when these directives are applied.

There are basically following types in directives:

1. Attribute Directives: It includes *ngModel, *ngClass, *ngStyle.

   2. Structured Directives: It includes *ngFor, *ngIf *ngSwitch.
   3. Custom Directives: To create a custom directive we create a class with @Directive Let us take the samoke below example:
   4. Create a new angular project
   5. Generate a component for example let us create item-list component
   6. Define a list of component

import { Component } from '@angular/core';

@Component({ selector: 'app-item-list', templateUrl: './item-list.component.html', styleUrls: ['./item-list.component.css'] }) export class ItemListComponent { items = ['Item 1', 'Item 2', 'Item 3']; showList = true; } 

4.Using directives in the template

 <div *ngIf="showList"> <h2>List of Items</h2> <ul> <li *ngFor="let item of items">{{ item }}</li> </ul> </div> <div *ngIf="!showList"> <p>The list is hidden.</p> </div> <button (click)="showList = !showList"> Hide the list </button> 

Directives are the central coding idea in Angular and the source of most of its power. They are an implementation of "Domain Specific Languages," which means that you, the programmer, get to make up your own language.

Although other comments here have focused on the HTML or the Javascript which defines the directive, neither of those is really the most important concept. The big takeaway is that writing a directive in your HTML results in both HTML and Javascript code (and likely Angular code, too) getting run. At the time a directive is defined, a template is indicated which tells which HTML will actually be output in place of the directive you wrote. But more importantly, a controller is also indicated which tells which code will be available for your HTML to access, including objects and functions.

ungallery.directive('footer', function() { return { restrict: "E", controller: "footer", controllerAs: "footerController", templateUrl: 'directives/footer.html' } }); 

If this directive definition exists in my index.html (or any script loaded by it), then I can later write:

<footer></footer> 

Into that index.html and have access to two things: the template that lives at "directives/footer.html" and a controller named "footer". Here's the definition of footerController. It exists only to give the HTML page visibility to the version number of the app, which I want to display in the footer of all pages:

var footerController = function() { this.version = CONSTANT.version; }; ungallery.controller("footer", footerController); 

The controller can assign any objects or functions to the object called this and those objects and functions will be available to the template HTML because of this directive wiring. This controller assigns one value to this, this.version, so that I can get to that value from my template.

In the directive's definition, the controllerAs syntax sets the name that I use to access the controller's this from the template. The reason that controllerAs syntax and separate names are used instead of just writing {{this.something}} is to prevent confusion when a page has several directives, each with its own meaning for this. In the definition of the footer controller, this is accessed with the prefix footerController. Here's what this looks like in the template HTML when I want to display the actual version number.

 <span>Version {{footerController.version}}.</span> 

Hope that helps! Let me know if I need to expand upon or clarify any of this.

-- D