Adding the ui.bootstrap dependency
The next step is to add the Angular Bootstrap dependency to the Angular app.
We do this by modifying the following line in the
angular-bootstrap will be available for use across our application.
Creating the navigation bar
To create the navigation bar, let’s open up the
app/index.html file and add the
<nav> part of the code, which is shown as follows:
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <a class="navbar-brand" href="/">dunebook blog</a> <ul class="nav navbar-nav"> <li> <a href="/#/articles">Articles</a> </li> <li> <a href="/#/gallery">Gallery</a> </li> <li> <a href="/#/subscribers">Subscribers</a> </li> </ul> </div> </nav> <!-- Add your site or application content here --> <div class="container" ng-view=""></div>
As you can see from the preceding code, we defined the header tag and applied the CSS classes,
navbar-fixed-top, to it. These are predefined bootstrap CSS classes that are used to style the navigation bar.
navbar class is a default container that sets the overflow to
visible for all elements within the navbar DOM.
navbar-fixed-top class will make the navigation bar stick to the top of the page, and it will stay fixed even as the page scrolls. You can also use
navbar-fixed-bottom to make your navigation bar stick to the bottom of the page.
Now, we’ll add the
<div> tag with a class named
container class will set the width of this element to 940 px and also center the element horizontally on the page.
We will add our dunebook blog website within an anchor tag and give it a class named
navbar-brand, as this is what our brand name is supposed to be.
Navigation links for the Articles, Gallery, and Subscribers pages will be added as hyperlinks within an unordered list, which is styled using the
nav class. Note the ‘
/#/‘ in the href values.
Save the file and start the server using the following command:
This will run the serve task defined within our
Gruntfile.js file. You should now be able to see the navigation bar at the top of the page.