Angular transition to 2.0, part 4

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 fourth in our series on how to transition from Angular 1.x controllers/views to Angular 2.0. This video covers refactoring the people directive’s container into its own component based directive while taking advantage of transclusion. 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 to angular 2.0. In this we are doing our next step. Step 4. We are going to decompose our directive into smaller components. This is a common theme for application development whereas we start to learn more about our component based directives and how they’re going to interact in our application. We look at ways that we can decompose them down further so that they are more reusable so when we look at this project here, we just created our news directive. And we created our people directive in step 2. However, the one thing that is common between these two is that they both have this container and this certain look and feel and with that it asks why are we having to recreate this container structure each time and potentially get out of sync with how the look and feel is.

The first thing we want to do is refactor that out and look at how the people directive is doing here. So this component, as you can see right here as I’m highlighting we’ve got everything up to here. We’ve got all of our structure for what this container is and a little bit down here on the footer and what not. However this is our container. It has a title it looks like it’s getting a color applied and some stuff with tech center and what not. Alright so great. Let’s go ahead and refactoring this out. We’re going to go ahead create a new directory called container and inside of it we are going to create a few files just like we have before, container.directive.js and then spec. alright. And create our module and last let’s create our html file. Alright fantastic. So we have our standard four files. Again notice that everything is self-contained. Everything that we need for this directive is right here.

The html, the directive, the spec, one of the additional things that we would add at a later date is the end testing. For this directive so that we can test is completely independent of everything else. The rest the application allows us to write super-fast tests that don’t take a lot of time to execute because they’re not depending on everything else. We can drop the directive on a web page and it tests it with multiple browsers and knows that our directive works the way that we anticipate. Great! So again let’s go over our module first. We are going to use an ify. Alright. We are going to use a use strict and Great. There’s our module declaration.

Let’s go back over to it and grab that right quick. Save ourselves a little bit of typing and I’m going to go ahead and add it here. Alright. So now same thing. We are going to go ahead and define our directive. Alright. So angular.module. Don’t need the quotes. There we go. And don’t need that. Let’s go ahead and .directive and container and containerdirective. Excellent. Copy the name of that and we are going to go ahead and create our main function that will define our directive. And we will return, restrict, element based again. Let’s see here. Given our template url, and that components/container/container.html and scope. We are going to come back to this because that is going to be something that is going to be a little different on this one as we start to use our isolated scope and be able to pass in our values to our directive from the html. Alright so our controller is going to be the container controller. We are going to use controllers, viewmodel and we are going to use scope model instead and this is going to be important now to bindtocontroller set to true. So again what that does is anything that is passed in on the isolated scope will automatically get down directly to vm so that we do not have to have an additional step to manually handle that.

Alright let’s create another named function called containercontroller. Alright, great! And we will just do our standard var vm= this. And great so now on the isolated scope if we go back and look at what is in people directive html. Notice that they are passing this title and they’re passing a color. So we want to have that happen as well. Let’s go ahead and remove this code out really quick and let’s put these down here. Just remove this out. Oh I think we are missing. Let’s just back this up a little bit. Alright! Yep okay I see now. Let’s go ahead and cut that there paste there, and cut. I like to keep the code nice and formatted and clean. We will come back to it later and it will still work and look nice and paste this in here. Great. And inside here for the purpose of this I don’t recommend this for this video demonstration.

We are going to go ahead and put our people directive directly inside of here. This is a common technique that’s used. It’s one directive containing another directive. I definitely do not recommend this. However for the purpose of this lesson it will help us to understand why we do not do it and in the next video we will refactor this out. So the next step here is we want to get rid of this here. We don’t want to have this hardcoded to violet. It’s great that its violet but it would be great if we could pass another color and make this more reusable. So what we want to do here is go ahead and remove it and we want to say ng.class = vm.w color. Alright well where does that come from? We will get to that in just a second. The other one that we want to do here really quick is do vm.title. So that we can pass a title in. Again where is this coming from?

Well, we know that we want to get a color and we want to get a title and we want to pass it to the directive. Okay so let’s go ahead and add these here. This says I want a title and a color. So what this allows us to do is pass along the isolated scope, it will expect a title and a color to be passed in and the @ symbol says that we are going to be a type string object so we pass an = if you need more information on that look up isolated scope and you can learn more about the different types. So now what need to do is go ahead and go to the dashboard html page and now we want to do container instead. And title, we want to set the title to people and we want to set the color to = to violet. Alright great!

I think our webpage is coming up here so we are going to go ahead and close those out, stop the project, research it back up and tada! Well sort of! It is very hard to see however we do have people. The text is there. We don’t have the actual color. So what happened? Well the good news is that our new container directive correctly renders the peoples directive and our container does look right except for the color. So the challenge we have here is that we are actually passing it in as just color. However on the container directive itself, actually not on the container directive, in the container html it has a W color. Well if you remember, look at the news version here really quick. The news version is pass w green so not just the color green it pins a w to it, so that’s why we created a w color and so for this to work we want to say vm.wcolor=w+vmcolor. Great lets refresh it and tada. There’s our purple color. Alright fantastic.

So in this video here we showed how we can decompose and existing component based directive into two smaller directives. Albeit not exactly reusable technique because now the news directive here is feeling rather lonely because he has to create his own container and our container is not really reusable. What we want to look at next is how can we make our container reusable by using transudes so that it can be decorated with other directives. So until then have a great day and we will see you at the next video.

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

Find us on YouTube by searching for “BrieBug”.

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