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:
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.
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.