FREELessons: 17Length: 2.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Adding Navigation

In this screencast, we're going to kind of go around a corner and create a feature that is a little different from any of the features we've created so far, something you might consider a little more basic but it will be still very important in our application. If I open our application here, you can see this is the main page where we can view all of our contacts. And then we can click a contact to go ahead and update that contact in some way. And then we just click back, and we go back to the main list of contacts here. Wouldn't it be nice if we had a navigation bar up here so we can chose to go back to the main contacts or even have a link to our new contact form? So in this screencast, we are going to create our navigation. So this part starts here on our main.html page in our public directory, and what we're gonna do is create another row right underneath our page header above the row that contains our view. So this going to be a div with a class row. And then in here, we will have a div with a class of col-sm-12, just like we do below this one. Except this one, instead of the ng-view directive, is gonna have the ng-include directive, and ng-include allows us to basically create a one-off view, if you will. Basically, we'll be able to create a template for our navigation and this is how we just stick it into the page here. And this has to go in quotes, because ng-view does expect an expression, and this will be views/nav.html. So let's go ahead and create that, public/views/nav.html. So we will create a nav element and we'll give it a class of navbar and navbar-default. And inside of this, we will have a div with a class of container-fluid. And then in here, we can have an unordered list which has its own class of nav and navbar-nav, and that is all just for the sake of Twitter Bootstrap. So yes, Bootstrap makes it really easy to make reasonably pretty applications, but it certainly is heavy on the markup. So in here, we have list items and these list items will have anchors going to, for example, the first one will be /contacts and this will go to the we'll say, All Contacts page. And then the one below this can go to /contact/new and this will go to the New Contact page. Now these links are great but we want to show which page we're on when we're on that page. So for example, when we're on the main page, we want All Contacts to be highlighted in some way. And so to do this, we can add ng-class to our list item here, and we've looked at ng-class before. This allows us to add a class conditionally based on an expression. And the class we wanna add is active. And we wanna add it if it we'll do capital P-A-G-E, PAGE equals, in this case, if it equals all. And we'll do the very same thing down here if PAGE equals new. Now, where are we getting this all upper-case PAGE value? Well we haven't created it yet. So let's go and open up our public/src/controllers file. And in the ListController here, we need to set this PAGE value, and we need to set it to all. But we can't just do this, of course, because that's just internal. And we can't set it on the scope either, because remember, this controller will only be used in our view here. And our navigation is outside of our view, and therefore doesn't have access to this controller. So what we need to do is add the rootScope to our parameter list up here. Now, the rootScope is kind of like the globalScope in JavaScript. It's not a very smart idea to use too many global variables. In our application, we're just gonna have this one global variable, which is PAGE, and it will allow us to control our navigation. So, instead of setting this on scope, I will set it on the rootScope. And I'm going to have to do the same thing down here on NewController. We'll call for the rootScope property and I will set equals new. And I'm going to have to do this on all the controllers even the SingleController here. Because otherwise, we're on the list controller for example, and if we go to our single page we need to change rootScope so that it doesn't still say all when we move to this page. So I'll just change this to singe here, even though there's no navigational element for a single page. So with that all in place and we've created our navigation, we've stuck it into the page here, that should be just fine. So now if we come back and refresh the page, you can see, here's our navigation bar. As you can see, we're on the All Contacts page, so that is highlighted. If I click on New Contact, oh, it looks like that change didn't work, let's go make sure we didn't make any typos. Oh, and the problem was we put page in all lowercase, so we need to make sure PAGE is in all uppercase. So here I didn't even put PAGE. Okay. So rootScope.PAGE in all uppercase. And so now if I refresh the contacts/new page, there you go. You can see now the navigation bar is highlighting New Contact. If I go back to old, All Contacts, that is selected, but if I view a single contact you can see nothing is selected. So that's great. And now, we can easily go to a single contact, edit their stuff, and then click All Contacts to go right back to our All Contact page. So that was a quick and easy way to add navigation to our application.

Back to the top