Hello, reader's in this tutorial we will create a navigation menu with angular js. Angular js is a framework for dynamic web pages. By the use of Angularjs, we will create dynamic menus.

First, we create a folder for our application by any name which is suitable. Inside the main folder, we put the index.html file in which all the view will come when we open it in the browser. Inside the main folder, we create a sub folder for our HTML, CSS and js files. Under the "CSS" folder put bootstrap CSS for HTML framework. Inside the "js" folder i am using angular and a custom js file for navbar directive called "navbarDirective.js". Below is the folder structure:-

Folder structure:-

    CSS >
        bootsrtap.css
    js >    
        angular.js
        navbarDirective.js
    view >
        navbar.html

    index.html

navbar.html:-
Now we create a "navbar.html" for navigation. The structure for the navbar are as follows :-

 <div class="navbar navbar-default">
        <div class="container">
            <ul class="nav navbar-nav">
                <li ng-class="{active:isActive('/')}"><a
                href="#!/">Home</a></li>
                <li ng-class="{active:isActive('#/about')}"><a
                href="#!/about">About</a></li>
                <li ng-class="{active:isActive('#/news')}"><a
                href="#!/news">News</a></li>
                <li ng-class="{active:isActive('#/company')}"><a
                href="#!/company">Company</a></li>
            </ul>
        </div>
    </div>

In the above code first, we create a main div "navbar" inside that we add "container" and list items for menus. By using bootstrap it will create the styling for the menu.

index.html
Now create the "index.html".  

 <!--Beginning-->
    <!-- Insert the Navbar -->
        <simple-navbar></simple-navbar>
        <section id="wrapper" class="container" scroll-to>
            <div class="view-slide-in" ng-view="main-app"></div>
        </section>
    <!--End-->

navbarDirective.js:-
For menu, functionality creates a js file in which we add directives for the menu. Directive is very important part in angular. Directives are functions of JavaScript that request when the Document Object Model is run by the framework of Angular JS.
In the directive file, we create our module and controller and set the path for the URL. Controller will show the page when clicked on the menu the default view is the home page.

'use strict';
angular.module('navbar')
.directive('simpleNavbar', function () {
    return {
        restrict: 'E',
        templateUrl: 'app/modules/navbar/navbar.html',
        controller: function($scope, $location) {
            $scope.isActive = function(path){
                var currentPath = $location.path().split('/')[1];
                if (currentPath.indexOf('?') !== -1) {
                    currentPath = currentPath.split('?')[0];
                }
                return currentPath === path.split('/')[1];
            };
        },
    };
});

Have a look at the code:-

$scope.isActive = function(path){
var currentPath = $location.path().split('/')[1];
if (currentPath.indexOf('?') !== -1) {
currentPath = currentPath.split('?')[0];
}
return currentPath === path.split('/')[1];
};

The above code inside the controller will check the link state and send a state if is active with a router using $location.path() function. Then the template from the controller gets the state and add the selected CSS class to the link using the ng-class built-in directive.

Hope, this tutorial will help you to make a navigation with Angular js