Angular transition to 2.0, part 5

BrieBug Solutions has created an online video series that provides information, tips, and insight on the transition from Angular 1.x to Angular 2.0. This video is a great resource for those in the industry who are interested in programming, typically programmers, to be aware of the Angular changes, as well as receptive to technology growth.

This video is fifth in our series on how to transition from Angular 1.x controllers/views to Angular 2.0.

This short video covers refactoring the container directive and correctly using transclusion. This makes our container directive reusable. We hope these step by step videos are easy to follow for those that are interested in the transition to the new and updated Angular software.

Welcome to transitioning angular 2.0. We today are going to continue working on our component based directives so that we are ready for angular 2.0 when it comes out. So last time what we did is we went ahead and created a container component directive. Okay so this component based directive here now has the people object or the people directive directly inside of it. So it is a great idea except for the problem is that it is not reusable. I’m not able to use the same component based directive with hottowel for its container. So, what we want to do is look at how we can make this reusable.

The first step with this is we are going to have to refactor this and a couple of things. And it’s actually a lot easier than you might think, so here is our container directive. The one thing that we are missing here to make this work is a transclude. Transclude allows us to have directives contain other directives and this is very powerful as you’ll see here in just a minute. So the other thing that I need to change is our container html. Alright so you can see right here, the people directive hardcoded into our container html. This is bad, this is a really bad practice. Although it may work, initially for us, long term as we want to make this reusable this really binds us for and prevents us from doing so. However ng.transclude comes to the rescue. With this, it allows us to have directives inside of directives and it knows now where to render that at. So we can only have one ng.transclude per directive. However you could have these nested multiple layers deep. And let’s see.

The next step to this is let’s see if it actually works. Let’s go over to our dashboard and now when we run it lets see what happens. UH Oh well okay well we have our container however we no longer have people in it. Well why is that? Well we don’t have people inside of it. So all we really need to do here is come over here and type our people directive. And so now it is contained inside of the container so when we come over here we can see there is our people directive rendered inside of our reusable container. So I guess the next step here is, how reusable is our container? Well let’s see. Let’s go ahead and grab this here. And we are going to paste it here and let’s clean this up just a little. Alright we will save it and now we will look and uh oh. It is kind of what we wanted.

So we did this so we can demonstrate that we still have our news directive in it and it still has its container html with it. We have lost our coloring, so we are going to fix a couple things. Let’s first start out with green and before it was just called hottowel for the title but now let’s call it news. So okay great, now we are starting to see news and the hottowel is inside of that one. Ok, cool! So we are starting to make some progress. So now we want to come over to the news html. And we want to remove everything that is part of the container. So there is the top part and the bottom part. So really the only thing that makes up the news is the one small tag html tag with this description inside of it. Oh okay great! So now go ahead and save that and now we refactored that out successfully. So now what we see is that we have a reusable component that we can use on multiple pages.

Well what about the admin page? Okay so let’s go ahead and take a look at this. This will be a slightly different approach however I believe we can go over to the admin html and you can see here is our header, all the same stuff. Alright great. So really this here I’m going to come back over to the dashboard html because I want to grab this right here. No it’s really just this slide and were going to see if we can make this work. So inside of this row we are going to add the container our title, title is being passed by vm title. So pass it as vm.title and then our color we want to have it be violet. Alright great. Now we are going to remove all of this and we are going to remove all of this. And we just need to wrap it up and clean up the container and clean up the formatting a bit. And let’s see what happens here.

Uh oh well for the most part it worked. We didn’t get our title actually handed over. So I believe all we need to do is go ahead and change this to this, add the curly braces around it and tadah. So in 3 different places now we are using our new container component directive. And now we have a great reusable component that we can easily change stuff out and tada great. So this concludes this step on the video and next what we are going to do we are going to look at resolving our data in our routes and so we are going to simplify how we are using our data and resolve and be passed into the controllers and then onto the directives. So thanks so much for watching and we will see you in the next video.

Please enjoy, learn, subscribe, and like our channel on YouTube.

We would love to hear from you so don’t hesitate to share your ideas or provide us with constructive feedback.

BrieBug Solutions a Denver based website and mobile application development agency that specializes in Angular and Full Stack development. If this is a technology that you would be interested in to boost your business, feel free to contact us so we can get you started on your vision!

  • Contact Us
  • Telephone: 888.679.2201
  • Address:
    BrieBug |
    12596 W Bayaud Ave Suite 201 | Lakewood, CO 80228