3.4 The UI-Router Component
Finishing up with components, you’ll learn all about the UI-Router component, which offers a different feature set than the built-in Angular router.Related Links
1.AngularUI Utilities7 lessons, 35:13
2.AngularUI Modules3 lessons, 22:13
3.Other AngularUI Components4 lessons, 26:14
4.Conclusion1 lesson, 00:58
3.4 The UI-Router Component
In this screen cast, we're going to look at the very last component of angular UI, and that is the UI router. Now obviously, angular comes with its own router, however the angular UI router is a little bit different, and has some other features, and we're going to look at a basic example of how to use it in this screen cast. So I've copied our template into a router project here, and let's go ahead and do bower install angular-ui-router. And now let's open up the index.html file, and we don't need utilities but we do need router. So, we'll go ahead and replace it, and I happen to know this is at angular-ui-router/release/angular-ui-rout- er.min.js, excellent. Now, the UI router is not based around the route terminology that the default angular router is based around. It uses the term state to refer to the different pages or states of our application. So let's go ahead and open up our application.js file. And we won't forget to require UI router. And then, we actually don't need our controller at all for this screen cast. Instead, we're going to have a config block, and our config function here will take the state provider. And this is the way that we can create our different states. So we have StateProvider and this object has a state function, which we pass an object to. So we'll start by naming this state. We give it a name attribute and we will call it home. And from here on, this is how we will refer to this state, with the keyword home. So we also want to give it a URL, and for us, that will just be the home route. And then finally, we can give it a template, and. In the style of regular Angular routes, we can either give it any templateURL, which will be a path to a template. Or we can just pass a template string right in here. And for us, we're just gonna do a template string, and we'll just pass in each one that says home. Now we can chain on another .state call. And create a second state. And this state we can actually give it the name as a first parameter and pass the options as an object. So, for example, let's say we wanna have an About page. So, we can give it a URL of slash about. And then let's give it a template, we'll just do the same thing again and, with this in place, let's go ahead and go back to our index dot HTML file here. And, right here, we have our main controller. Let's actually get rid of that main controller. And instead, we will have a div with a U I dash view attribute. Now, you know if we were using a normal angular router, we would have n g view, but since we're using the ui router it's called ui view. Now, above this, let me just add an unordered list, and we will put two links in here. The first one will go to pound slash, and that will be a link to the home page, and the second one will be pound slash about. And that will be a link to the About page. So now, if we open this web page up in our browser, you can see we have our two links here. And currently the div with our UI View Directive is empty, but if I click Home, you can see our Home template is being displayed. And if I click About, our About template is being displayed. Now one thing to note here is that we've had to create our anchor tags here with the proper paths. So because we're not using HTML 5 routing, we have to put the # in here and if we ever needed to change these, for example over in our state objects here, these would have to change here. This seems to be a little poorly designed. Well the UI router gives us another directive that we can use in place of href, and it will make things a little bit easier. And that is the UI-sref. And this stands for UI state reference. And instead of putting the actual route, instead we put the name of the route. So the name here is home, where the name about, we put those instead. So here this will be home. And then down here, a ui dash state ref, and this is about. And now, if I refresh this page, you can see we have home and about. And those are working out just find. Now how about routes that are not a single static word like about, or just route? Well we can handle those too. Let's create another state here and this state, we'll just call user-view state for example. And this is where we want to view a single user, for example. So we'll say the URL is going to be /user/:user ID. And of course like most routing systems, the colon user id here is a token that will be replaced with something else. But then once we get the user id in our route, we need a way to actually get that user id and find, say the user record in a database that matches that user id. So let me paste in a little user data here at the top. Just a small array with three users up above here. So now back in out user view state here, we need to give this state a controller. Now, we could either put a function in line here, or we can put a reference to the user view controller. And that's what we're gonna do here. So down below, let's create a controller that we'll call UserViewController. And our callback function here will not just take a scope. It will also take $stateParams and this stateParams object will be whatever parameters are provided in our URL here. So down here $scope dot user equals, and we'll just say users which is the object we created up at the top here, and we can just pass it dollar state params dot user ID. Now of course this date doesn't have a template yet, so let's go ahead and add a template right here and let's just have an h1 and we can say User.name and then maybe in a paragraph after that, we can have user ID. Excellent. Just like that. And now, if we come back to our webpage here and we go /user/1, you can see we get Joe Smith. If we go to 2, Polly Perkins. And finally, 3 gives us Joan Watson. So that is a look at the core features of the angular UI router. There are a few other features that I'm not mentioning here, that you can check out in the documentation. But overall, I think it's a very nice replacement for the native angular router.