1.5 The Route Utility
You’ll now move on to the route utility, which gives you easy access to the current route from within your views.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
1.5 The Route Utility
In this lesson we will look at the UI route utility. THe UI route utility is a very handy way to give your templates access to what route is currently being displayed. So I've copied our template here and we have our route project and I'm going to go ahead and open up app.js. And inside of the dependency array we're gonna request ui.route, and then let's create an array of routes. Now, normally, you would not create your routes this way, but because we're going to have a couple of routes, this would really be the easiest way to do this. Let's go ahead and have route-1 and /route-2, and /route-3. And you'll see how we're gonna use these in our code in a second. But first we need to enable the ability to switch between different routes. And so to do this, we need to go back to our project here and do bower install angular-route. This is the angular router. This allows us to work with routes in angular. So now let's go ahead and open our index.html file. We'll copy this one and say angular-route and angular-route. So now we're importing that. Back in our dependencies here, we have to request ngRoute, okay? Now let's add a dot-config block to configure our router here. Our config function here will take two parameters. First will be $routeProvider. Second will be $locationProvider. Now the route provider, what we'll do is $routeprovider, we can use this to create a route. We're only going to have one route in this case and we're just going to say otherwise, which means for any route that we add, we want to have a template URL, URL of main.html. So this way, any route that our application gets, will render the main slash html template. Underneath this, we're going do $locationProvider.html5mode equals true. And this way, hash characters will not be used in our routes. We will use HTML5 routing. So now back in index.html let's change this div right here. Instead of using MainController we need to change this so that it uses ng-view because our main.html view here is going to be rendered for each one of our routes. This is how routing works in Angular. So now we need to create our main.html. This is going to be pretty simple. Let's start with an unordered list here. Actually we're going to have two unordered lists. And inside both of these, we're going to have a list item that's going to do ng-repeat, and we're going to do this for route and routes. Remember that this routes object that we're talking about here, is the array of routes that we just created down here for our main controller. And this actually reminds me, since we're using the main controller here, up here we need to say that the controller for each route is going to be the main controller. So now for each route, what we're gonna do is add an anchor element and this is going to be that route. It's actually that simple we'll also use this route as the text of the anchor element and this should give us a list of the different routes in our list. Now, we can't just open this up as an index.HTML file in the browser because we're planning to switch routes. This means we need an actual server. So what we're gonna do is run python-m SimpleHTTPServer. And this should boot up on port 8000. So if we open up localhost:8000 in the browser you can see we have route one, route two, and route three. And if we go ahead and click these routes you can see that we're successfully changing between them. The content doesn't change because we rendered the same view for each one, but notice that up here in our address bar the routes change as we go between them. And this reminds me. Let's add one more list item above this here, and this list item will have a href which will just take us back to the home path, and we'll just call this home. So now I can go to the different routes, or I can click Home, and we go back to the root route. >> Okay, so now that we can change the root routes, let's add another unordered list here, and in here we wanna have a list item for each one of the routes. So I'm gonna go ahead and paste that in. And in here is where we're actually going to use the UI route directive that AngularUI gives us. So we're gonna say ui-route. We pass it the route, so that is gonna be each individual route here. And so the way this directive works is we have UI route here, and then within this list item, within the element where we set UI route, we have access to the variable $uiRoute. And if the route of the current page that the user is on matches the route that we pass into uiRoute, then the $uiRoute variable here will be true. So, inside this list item we can say route, and then we can say is or is not active. Let's add active down here at the bottom. Now in here let's add a strong tag and we can say ng-show if $uI.Route is true. And we'll say is. Let me duplicate this. This one will be "not uI.Route". So, to go over how this works one more time, if the value that we passed to uiRoute matches the current route, then $uiRoute will be true. And if it's true, then IS will be displayed, and if it's false, IS NOT will be displayed in our little example here. If we refresh the page here, you can see the currently none of our routes are active. Route-1, route-2, route-3. All of them say route is not active. If I click route-1, notice the first one changes here to route is active. Route-3. Now route-3 is active. Route-2. Route-2 is active. And Home. None of them are active. Now we can actually use this utility in conjunction with the actual anchor element here and to do this all we would need to do is add you I wrote as an attribute directive to this anchor element. And then let's go ahead and add ng-class and inside this remember this is an object. If you haven't used ng-class what you need to know is that this is an object where the key is the class name and the value is either true or false. So I can say the class name here will be current, and the value is $uiRoute. Let's go back to index here and just add some styling.current. Let's set background to equal to orange. And, this way, if our anchor element here has this class, we know we're on that route. So, if I refresh this and I click one you can see route-1is now background orange. Route-2, route-3. It works all the way through. And that is how you can use the angular UI Route utility. This utility will actually be a great help for making, building your application's navigation system a lot simpler.