AngularJS Directives Fundamentals

This course will teach you everything you need to know about directives in Angular.
Course info
Rating
(1174)
Level
Intermediate
Updated
Jan 30, 2015
Duration
3h 47m
Table of contents
Your First Directive
Events, Scope, and Controllers
Decorator Directives
Transclusion
Structural Directives
Controllers and Nested Directives
Directives and Services
Description
Course info
Rating
(1174)
Level
Intermediate
Updated
Jan 30, 2015
Duration
3h 47m
Description

Directives are one of the most complex pieces of Angular, but learning to do them properly doesn't have to be a chore. This course will take you from knowing nothing about directives, to knowing everything. Through this course, you will gain a comprehensive understanding of all the pieces of directives and how to build them. More importantly you will learn how to make small, focused, and maintainable directives.

About the author
About the author

Joe has been a web developer for the last 13 of his 16+ years as a professional developer. He has specialized in front end and middle tier development . Although his greatest love is writing code, he also enjoys teaching and speaking about code.

More from the author
Unit Testing in Angular
Beginner
3h 20m
22 May 2018
Angular: The Big Picture
Beginner
1h 7m
13 Dec 2017
More courses by Joe Eames
Section Introduction Transcripts
Section Introduction Transcripts

Events, Scope, and Controllers
In this module we will be discussing Events, Scope, and Controllers. This module is the second module that covers the absolute basics of directives. After creating the basic directive that simply displays data, the next step is to start adding some inner activity to your directives through events. Handling events is the job of functions on your scope, which will require a controller. These three pieces play an integral part in making you directives interactive. In this module, we'll learn how to do this, the different kinds of relationships that directive scopes can have with their containing controller, and we'll see how and when to use each of these effectively. By the end of this module, you will be able to create powerful interactive component directives.

Decorator Directives
In this module, we'll be covering Decorator Directives. Decorators are directives that add additional functionality to an existing tag or modify a display of that tag. Most of the built-in directives that we use are decorators. They are almost always implemented as attributes, and pretty much never have a template. We'll look at examples of built-in decorator directives in this module. as well as building several of our own decorators.

Transclusion
This module will be all about Transclusion. By far, the hardest part of transclusion is the name. It's such a weird word and it sounds so esoteric that it probably causes more confusion than the actual concept itself. By building some directives with transclusion, we will get a good foundation of what it is and how it works. By the end of this module, you will have no problem understanding and using transclusion in your own directives. Before we get into actual code, it's a good idea to look at what transclusion is from a conceptual standpoint, so that we can lay the groundwork for our later discussion. The best way to think about transclusion is to think of a picture frame. A picture frame has its own design and visual space. When someone chooses a picture frame, they care about how the frame itself looks, but the frame is completely separate from the picture that will go inside of it. We can decide what picture we will put inside a frame and we can change the picture if we need. This is just like transclusion. When it comes to Angular, we have some kind of controller with its scope, and inside of that we will place a directive that supports transclusion. This directive will have its own display and functionality, represented here by the blue area. With a non-transcluded directive, the inner display of the directive is decided by the directive itself, but with transclusion, just like a picture frame, we get to decide what goes inside the transcluded directive. This visualization is useful as a basis for how transclusion works, but there are certainly more details to it. We'll look at those as we get to the code in the following sections.

Controllers and Nested Directives
This module is all about controllers and directives and how nested directives work. Controllers are an important piece of directives. They turn directives into a sort of mini Angular environment, where we can essentially use everything that we can use outside of a directive inside of a directive. That lets us break our pages down into pieces with directives and they all have the features and functionality we're used to, but also are more compact and reusable. After we look at controllers and directives, we'll look at how to nest directives inside of each other and how they communicate. We'll start with the link function in its pre and post variations, then get into requiring controllers, which is a much better API to communicate between directives.

Directives and Services
The interplay between services and directives is very important to understand in Angular. So, in this module, we'll be talking about the relationship between directives and services. You can use services to hold business logic for directives, to allow directives to communicate, and sometimes there's functionality we think should be in a directive, but should actually belong in a service. We'll look at all these items and more in this module.