Components and Containers

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 11 years ago
Updated 5 years ago

This lesson describes fundamentals for creating custom directives (broken down into Components and Containers). The component demonstrates how to use the service template to create a simple clock directive whereby AngularJS will bind with objects in the template property and access element attributes. The component example will provide a demonstration of how you can nest components and containers, taking advantage of AngularJS transclusion capabilities.

John Lindquist: I found a good way of explaining directives, is to break them into two categories; components and containers.

A component would be something like a clock matched with a timezone, we'll say it's MST, and then we'll create our directive here, app, clock, restricted to an element. Scope where we let the time zone come in as a string and then the template can be something simple that just displays a div that binds, we'll do 12 PM, and then binds to the timezone. If we look at that it's just 12 p.m. MST, MST is coming in from that attribute. So that's a component just display the data you pass into the attributes and that's all you have to worry about.

Now a container would be something like a panel where you'd pass in an attribute like "I'm a title" and when you create this panel, you'd say again app, panel, restrict, E, scope. This time we're passing in a title as a string, and then our template is gonna look a little bit different this time.

We'll have a div, which is just going to be, well, let's just fake a style here. Order, 3 pixels, all black. We'll put some stuff inside of our container, the first thing will be the title we passed in, so create another div. This'll have a class of, I don't know, all our boxes are title-ish, and then we'll pass in the title. For your refresh, you can see we have this black border in the title thing. Let's break that into a couple lines.

Now that we have the title, separate that there as well, we can also add content underneath of it. Underneath the title itself. What we can do here is actually add a component inside of the container, so say timezone is PST this time. We can add that content in using transclusion by simply saying transclude true. When you create our div in here you just say N G transclude, and that'll yank the content, again, out from here and then paste it in our copy paste, however you want to think of it, to wherever you drop that.

Now we have what I like to call containers, where we've created this panel component which is everything. We can separate these just by cheating. So we have the regular component, just up there at the top, which is just displaying the time with the timezone attribute. We have a container component, which has it's own attribute just for the title, but then it also allows you to put in any sort of components or any other data you want to pass in and any linings or anything you want to pass in, simply by using transclusion to drop it inside of what your component is going to be.

Hopefully that explains conceptually, the way of approaching directives, one way of building reasonable components which just display a data through the attribute, but nothing inside of those tags, and then containers which allow you to pass additional content into the container. Say for example, if I were to duplicate this, and add a few more clocks, you can see I have two panels, each of them have different content inside of the containers, and transclusion allows us to modify the content inside of the containers.

egghead
egghead
~ 2 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today