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 app/scripts/app.js file:

angular.module('hlApp', ['ui.bootstrap'])

Now, 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 and navbar-fixed-top, to it. These are predefined bootstrap CSS classes that are used to style the navigation bar.

The navbar class is a default container that sets the overflow to visible for all elements within the navbar DOM.

The 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. The 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:

grunt serve

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.

Chapter 2 of 10