AngularJS - Nav Menu

Hello there, future web developers! Today, we're going to dive into the exciting world of AngularJS and learn how to create a navigation menu. As your friendly neighborhood computer teacher, I'm here to guide you through this journey step by step. So, grab your favorite beverage, get comfortable, and let's embark on this coding adventure together!

What is a Nav Menu?

Before we jump into the code, let's take a moment to understand what a nav menu is. Imagine you're in a huge library with millions of books. How would you find the book you want? You'd probably look for signs or a directory, right? Well, a navigation menu on a website is just like that library directory. It helps users find their way around your website easily.

Why Use AngularJS for Nav Menus?

You might be wondering, "Why should I use AngularJS for my nav menu?" Well, my curious friend, AngularJS makes creating dynamic and interactive menus a breeze. It's like having a super-powered Swiss Army knife for web development!

Getting Started with AngularJS Nav Menu

Step 1: Setting Up Your Project

First things first, let's set up our project. We'll need to include AngularJS in our HTML file. Here's how we do it:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My AngularJS Nav Menu</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <!-- Our content will go here -->
    <script src="app.js"></script>
</body>
</html>

In this code, we're telling our HTML that we're using AngularJS by adding ng-app="myApp" to the <html> tag. We're also including the AngularJS library and our own JavaScript file (app.js) where we'll write our AngularJS code.

Step 2: Creating the AngularJS Module and Controller

Now, let's create our AngularJS module and controller. In your app.js file, add the following code:

var app = angular.module('myApp', []);

app.controller('NavController', function($scope) {
    $scope.menuItems = [
        { name: 'Home', url: '#/' },
        { name: 'About', url: '#/about' },
        { name: 'Contact', url: '#/contact' }
    ];
});

Here, we're creating an AngularJS module called myApp and a controller called NavController. The controller has an array of menu items that we'll use to generate our nav menu.

Step 3: Creating the Nav Menu HTML

Now, let's add the HTML for our nav menu. Update your HTML file to include this:

<body ng-controller="NavController">
    <nav>
        <ul>
            <li ng-repeat="item in menuItems">
                <a href="{{item.url}}">{{item.name}}</a>
            </li>
        </ul>
    </nav>

    <script src="app.js"></script>
</body>

In this code, we're using the ng-controller directive to tell AngularJS to use our NavController. We're also using the ng-repeat directive to loop through our menu items and create a list item for each one.

Advanced Features

Adding Active State to Menu Items

Let's make our menu a bit fancier by adding an active state to the current page. Update your controller in app.js:

app.controller('NavController', function($scope, $location) {
    $scope.menuItems = [
        { name: 'Home', url: '#/' },
        { name: 'About', url: '#/about' },
        { name: 'Contact', url: '#/contact' }
    ];

    $scope.isActive = function(viewLocation) {
        return viewLocation === $location.path();
    };
});

And update your HTML:

<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
    <a href="{{item.url}}">{{item.name}}</a>
</li>

Now, the current page's menu item will have an 'active' class.

Creating a Dropdown Menu

Let's take it up a notch and add a dropdown menu. Update your controller:

$scope.menuItems = [
    { name: 'Home', url: '#/' },
    { 
        name: 'Services', 
        url: '#/services',
        subItems: [
            { name: 'Web Design', url: '#/services/web-design' },
            { name: 'SEO', url: '#/services/seo' }
        ]
    },
    { name: 'Contact', url: '#/contact' }
];

And update your HTML:

<nav>
    <ul>
        <li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
            <a href="{{item.url}}">{{item.name}}</a>
            <ul ng-if="item.subItems">
                <li ng-repeat="subItem in item.subItems">
                    <a href="{{subItem.url}}">{{subItem.name}}</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Conclusion

And there you have it, folks! You've just created a dynamic, interactive nav menu using AngularJS. Remember, practice makes perfect, so don't be afraid to experiment with different styles and features.

Here's a table summarizing the main AngularJS directives we used:

Directive	Purpose
ng-app	Defines the root element of an AngularJS application
ng-controller	Specifies which controller to use for the HTML element
ng-repeat	Repeats a set of HTML a given number of times
ng-class	Dynamically binds one or more CSS classes to an HTML element
ng-if	Conditionally renders an HTML element

Keep coding, keep learning, and most importantly, keep having fun! Until next time, this is your friendly neighborhood computer teacher signing off. Happy coding!

Credits: Image by storyset

Previous Tutorial:

AngularJS - In-line Application

Next Tutorial:

AngularJS - Switch Menu