Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Making a navbar directive in AngularJs

    • 0
    • 0
    • 0
    • 0
    • 2
    • 0
    • 0
    • 0
    • 3.02k
    Comment on it

    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

 2 Comment(s)

  • Mate, i was in big trouble and you were the only one able to help me! Thank you so much!!!!!!!!! I was searching for answers everywhere and i found many answers(StackOverFlow too), but none was as good as your approach on this! Thanks mate!
Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: