Welcome to Part 5 of this review of the Pluralsight course Angular JS Fundamentals by Joe Eames and Jim Cooper. This module is presented by Jim Cooper.

Jim is a software developer at Pluralsight, with more than 20 years of software development experience.

He has a passion for Agile processes, especially lean software development, and has been developing production Angular apps since before v1.0.

Jim has over 10 years of TDD and pair programming experience.

Also in this series:

Part 1: Angular JS Fundamentals
Part 2: Angular Controllers & Markup
Part 3: Creating and Using Angular JS Services
Part 4: Angular Routing

Creating Custom Angular Directives

For Angular JS beginners, this module dives deep into the mechanics of Angular Directives.

For more experienced Angular JS developers who are looking to go even deeper and really master Angular JS Directives, you can see Angular JS Directives Fundamentals by Joe Eames.

Angular v1.5 introduced Components, and Scott Allen says components are the best way to program with Angular. I have decided to leave this part of the review unfinished until I have seen Scott Allen’s Building Components with Angular 1.5 course, so that I can point any demos which may not be the best way to program anymore.

Introduction to Angular Directives

Jim explains why we might need directives by giving a brief history of how our use of the world wide web has evolved over the years.

In particular Jim talks about Web components Custom elements.

Angular Directives give us the same sort of functionality without the restriction of it only working on the latest browsers.

This is actually a big simplification. For more details on the advantages and level of support for web components in several of the top JavaScript frameworks see Choosing a JavaScript framework.

Jim says he believes Angular JS Directives are more powerful and easier to write than web components.

My own view on that is writing web components natively does require quite a lot of work but Polymer 2.0 should make this quite a bit easier. For an overview of all of this and also using Polymer with TypeScript, see Taylor Savage’s opening keynote from Polymer Summit 2016.

Back to Angular JS Directives, we learn these give us the power to do:

• Custom Elements
• Custom Events
• Observe and React to Changes

We’ll be seeing how to do all of these things in this module.

Creating Your First Angular Directive

We create a directives.js file and write our first directive, which compiles some HTML (a div element) and outputs the compiled version.

Jim also shows us that we can change the HTML to use our own custom element.

We learn a bit about the restrict option, which is typically set to one of these values:

• 'A' – only matches attribute name
• 'E' – only matches element name
• 'C' – only matches class name
• 'M' – only matches comment

Domain Specific Language via Custom Elements

We can write our HTML using Domain Specific language, i.e. language to match the business problem we are working on.

We can have a single element that encapsulates a multitude of HTML tags.

Isolating Directive Scope

Exploring Isolate Scope Bindings

Handling Events with Directives

Observing and Responding to Changes

Using Controllers within Directives

Sharing Directive Controllers via Require

Directive Priority and using Terminal

Using Require with Nested Directives

Understanding Transclusion

Using Compile to Transform the DOM

Making jQuery More Explicit with Directives