Angular transition to 2.0, part 3

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.

Part 3 of the transitional series continues to focus on controllers/views. The video will expand on reorganizing the existing dashboard page by refactoring the news area into component based directives. 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 back to step 3 in transitioning to angular 2.0.

So last time we went ahead and created a new web component or directive based component and we factored out our people directive. Earlier people grid here, we factored that out into its own component based directive. This component based directive is completely stand alone and allows us to make this reusable. Alright, Great! So what we are going to do today is we are going to add a second one because what’s good for this one would work great for this one. So were going to call this news. It’s where we are going to put our news feed and were going to go ahead and refactor this out and get it out of the dashboard controller. In this case here were going to go ahead and create a new directory, we are going to call it news. And inside of here were going to create a few files. So, News.Directive.js Great! And news.spec .

Now if you are wondering when we are going to start actually doing something with the spec files. That’ll be one of the last steps that we do. We will come back and show you how to run tests for this and be able to test our directives including writing stuff for our routes and our controllers and helping to push that code coverage towards one hundred percent. So let’s copy again and we want a news.html. Great. And you want a news.module.js. Alright, great! So, alright, let’s go ahead and start with our module again. We are going to start with an ify and we are going to have our use strict. And see here and angular.module. We are going to create our module here. So its app.components.news. And we want to have any dependencies. Great. So there’s our module.

So now what we need to do is go ahead and add this guy here. So that way we include our news directive with our components. So again if you remember our components that are loaded by our app module. Great! So now we’ve got all these files. Let’s go ahead and start putting these together. Can we add an ify? Alright! And use strict on this. Alright let’s put that in. alright now let’s go ahead and add in using our existing module that we already set up. App.components.news Alright! .directive called news and news directive. Great! And doesn’t know if this is quite right yet.

Alright and then we also know that we are going to need another one called news controller. Great, so now we have our two named functions here. So let’s go ahead and wire together or actually declare our directive here. So, again so we want this to be an element, so we are going to restrict it by element. We are going to give it its template url. And we are going to point that to app components news. News. Html.

We are going to isolate the scope again and we are going to point our controller to our news controller. And use our controller’s syntax so that we rid of our scope and we our viewmodel instead and we are going to have our bind to controller set to true. Alright, great! So there is the definition for our news directive. And now in our newscontroller we are enter var viewmodel = this. And where is this coming from. Let’s go back over at our dashboard here so the dashboard controller has the news here. So it’s not actually loading from anywhere. We do not need a data service. It’s actually just being hard coded. So for the purpose of this were going to go ahead and remove him out of there. And the rest of that can stay. We will go back over to our news directive. Alright get spacing right on that. So this is our directive. It’s that simple.

There again there’s no data being loaded from an external source. Obviously for news that would be something we probably want to load externally. Alright, so then we got our html. So let’s go find in our controller or our dashboard html. Let’s go find the news piece. Alright, well looks like its pretty much right here, it’s pretty small. We will go ahead and cut this out of here and place it over in the news html. Alright, great. So there’s our title, there’s our description. Alright great. And now when we pull it up. Alright let’s go ahead and shut this down and restart it. Alright, great. So now it was able to reload. We are good except for we don’t have our news component.

Let’s go back over our dashboard. It’s because we did not add it in here so let’s go ahead and add our directive. We save it and there it is. So what I want you to notice here is that with our dashboard html. What it is starting to become is scaffolding. Scaffolding for the structure of the page that we have bootstrap classes here, a div for the row, a div for a column in d6 and a column in d6 and then replacing our directives in it. This is ideal, this keeps our controller html super lightweight and allows it to be more of the structure of how we want directives to be placed and not so much being everything including the directive as it was originally generated this project. So alright this is a very short and sweet lesson on this on step 4 we are going to be taking a look at these two here and noticing we have a common container between the two of them. This common container we want to have be reusable and so were going to take a stab at how we might do that. Alright thanks so much for listening and have a good day.

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