Angular transition to 2.0, part 6

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 sixth in our series on how to transition from Angular 1.x controllers/views to Angular 2.0. This short video covers refactoring the router to use resolves for loading data. 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 transitioning to angular 2.0. Where we are refactoring the John Papa hot towel project into component-based directives. So far we have been able to refactor our container object and to reuse now with people and news and over on the admin page. As well as were able to refactor and create component-based directives for this people grid and our news feed here. So, our next step is looking at resolving data for controllers before the controller is loaded. So, if we go over John Papa’s style guide, he talks about route resolve promises and why you would use those and what not. Definitely, this is great reading. You need to understand when and when not to use these and in this example we are just going to go ahead and cover how to implement this in this project.

Alright so we’re going to come over here and were going to go to our features and open up our dashboard and look at our route here. So our route specifies the dashboard route is on the route url. Here is the route url template. It is controlleras. There are some other settings and what not that are used here. However, it does not have a resolve so our resolve for getting data into the controller we want go ahead and create a resolve object here on this existing object. And we want to have a couple different pieces of data returned so were going to do a message count. We want to be able to load people data and we want to be able to get our news data. Alright, great! So unfortunately though we do not have any methods already declared for these. So the next step of this is to change and add a couple of main functions here: message count. Alright! And you want to get this from the data service and dataservice.getmessagecount. Now you just want to return that. Alright, Great!

Now in this case though we need to inject data service into message count and the easiest way to do that we’ve been doing already, is using dollar sign inject. And were going to inject data service directly into this function. Alright. So now we need to copy this down and people.injectdataservice and now we are going to have a function people as well and that is going to have a data service in it as well and it is going to return data service.getpeople. Great! And then the last one function news. And in this case here I’m actually going to go to a news directive and pull this directly out. And going to move this back here and were going to return this right here. Alright, so now what has happened here is before this controller is actually given control the resolve last result for all three of these methods.

So if any one of these methods then you will throw an error that we can handle and alert the user to not go ahead and route directly to the controller. This could be useful when we need to check a piece of data before we actually allow another controller to load. That may be redirected to another controller instead. So in that case wed actually have our method go out load data and let’s check that the message count was under 50 that we would take into dashboard. Let’s see if it was greater than 50 we wouldn’t take them to the dashboard, we would take them straight to the inbox where they could see all of their mail and they could address that. So those type of business rules could be difficult to be able to implement and not have some flashing going on.

I’m going first to the dashboard feature and then to the inbox feature. So this type of functionality allows us to do this before the actual content gets loaded. Alright so great, now we have data that we can inject into our controller. So now I’ll come back over to our dashboard controller and now what we will want to do is we will want to inject into the dashboard the new pieces of data we have resolved on our route. So were going to have to make a couple of adjustments here. We’re going to do is go ahead and change these two message count, people and news. And sometimes it’s easier to type it.

Alright people and news. Alright excellent! So now these three items are being directly injected into our dashboard controller. And on these now we need to go ahead and set our message count equal to our message count on our viewmodel. Alright vm.people = people and vm.news = news. And everything else is in there and alright. So thank you, that looks good. So now we have is our route that is resolving these three pieces of data and we are now injecting them directly into the dashboard controller and so let’s see. Now the next step on this is we are going to need to modify our dashboard html so we can inject this data directly into the pieces that need them.

So the first step with that is we look at our message count but we don’t have to change that one because the message count itself its being handled, it is already being set and its being passed in so that one’s okay. And we did not refactor that one yet actually do the message count as a directive. So then on the people controller we can go ahead and say people=vm.people. And we can say news=vm.news. Alright excellent! So now what we are doing is actually injecting into the people directive property called people that is getting the value from our dashboard controller in people. So this is going to be an array of people and this is going to be an object of news. Inject each one of those.

Now if we come over here and we rerun it. Alright, great that looks good. We lost our news though and our people are still rendering. The reason being we did our resolve, we actually cut and pasted from the news directive what was in here. And on the people one it is still manually loading the people data were going to change that really quickly. Let’s go ahead and fix the news, first though and were going create a new property and it’s a type of object and we are going to go ahead and place it on the scope because were doing bindtocontroller news is actually going to be vm.news. bindto controller will go ahead and do it for us. Let’s go ahead and save that. Then now you can see why have news displaying. Great.

Let’s go ahead and look at the people directive so in this case here we are still loading people but we will no longer need to do that so let’s go ahead and remove that and we will remove the array there as well. And in this case here were are going to go ahead and modify our isolated scope and create a property called people and type object and going to go ahead and save it. Excellent. And now you can see we have it. I’m going to have you take this back off really quick just to prove what is actually happening here. See? Now we have no data, so it wasn’t smoke in mirrors, this is actually what is happening. The process happens from the dashboard route, it resolves, goes and loads people and then the dashboard controller actually has the people injected directly into it and those are placed onto the vm.

From the viewmodel here when we are created the directive we can go ahead and assign and this is the way that we pass data to the directive or any sort of properties whether they be like what we are doing here, title and color, we do these with an isolated scope and we can then go ahead and pass the data to it from the controllers view model we are passing people into a new property on the people directive called people. I know that’s quite a mouthful, maybe we should have named that data or something else to make it easier to understand. Go ahead and place that code back in, save it and we can see that it has refreshed and we can see that we now have the data back in there. Alright.

So what we have learned is how to successfully apply a resolve to a route, to inject our data into our controllers. I think that the most important part to understand is when not to do this so we what we find is that we evaluate on a case-by-case basis when we were going to actually user resolve. We are using a third-party resource that could be down or let’s say it’s being extremely slow or if we have a long running process that pulls a lot of data to be on display in some sort of grid then we would want to go ahead and not put that into a resolve and we would actually want to come over and have that happen either inside of the controller here or with the directive itself. That is really a preference thing.

Most likely we wouldn’t want to do it in the controller. Again as controllers are going away and so we would want to place that where the people is a long running piece that we want to go ahead and handle it in here than have it be based off of some ng or mechanism to go ahead and fire that off. Alright that’s everything that we are going to cover in this video on how to handle resolves and next time we are going to cover how to text each one of these directives. Alright thanks so much.

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