Simple Sidebar navigation example using angular

We love how easy it is to create navigation using good old jQuery,  but when you are new to angular and just starting to pick up it's bare bones and things like creating navigation come up, usually first thought that comes into mind is "How can I create navigation with Angular", let's find out.

What we will build

In this example, we are going to create a simple sidebar which is hidden by default, and when you click navigation button our sidebar will slide from left and when we click on button again it will hide.

Our HTML markup

The first thing we need some kind of skeleton for navigation in place, let's create HTML for the navigation. I will be creating a very simple unordered list which will have few links also navigation toggle button which will be used to toggle navigation( nothing fancy here ).

HTML

<!doctype html>
<html ng-app="app">
    <head>
        <title>This is directive test</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    
    </head>
    <body>
        <div class="container">
            <div ng-controller="SidebarController" class="sidebar" sidebar-directive="state">
                <a href="#" id="navigation-toggle" ng-click="toggleState()">Navigation</a>
                <ul class="navigation">
                    <li class="navigation-items"> <a href="/">Link1</a> </li>
                    <li class="navigation-items"> <a href="/">Link2</a> </li>
                    <li class="navigation-items"> <a href="/">Link3</a> </li>
                    <li class="navigation-items"> <a href="/">Link4</a> </li>
                    <li class="navigation-items"> <a href="/">Link4</a> </li>
                </ul>
            </div>
        </div>
        
    <script src="script.js"></script>
    </body>
</html>

Both List and toggle button are wrapped by div, it also have Controller SidebarController where we will put our logic for hiding or revealing navigation. Our dive will also contain directive called sidebar-directive, which will be used for DOM Manipulation. There is also ng-click directive on toggle button which will toggle navigation state.

Styling our navigation with CSS

Now I have HTML in place lets create some styling, also revealing and hiding navigation will be done using CSS so let's create some CSS rules,

CSS

body {
    font-family : arial;
}
.sidebar {
    position : absolute;
    top : 0;
    left : -160px;;
    transition : 100ms left;
}
#navigation-toggle {
        position : absolute;
        left : 160px;
        background : rgba(3,159,244,.95);
        color : white;
        text-decoration : none;
        padding : 20px;
}
.show {
    left : 0;
}
.navigation {
    list-style : none;
    padding : 0;
    margin : 0;
}
.navigation-items a {
    display : block;
    background-color : #444;
    color : white;
    line-height : 2em;
    text-decoration : none;
    padding : 10px 30px;
    width : 100px;

}
.navigation-items a:hover {
    background-color : #222;
}

Our AngularJs code

Now we are done with HTML and CSS, we can finally focus on our angular part, let's create our SidebarController and sidebarDirective. 

JavaScript ( AngularJS )

(function() {
/* global angular */
var app = angular.module('app', []);

app.controller('SidebarController', function($scope) {
    
    $scope.state = false;
    
    $scope.toggleState = function() {
        $scope.state = !$scope.state;
    };
    
});

app.directive('sidebarDirective', function() {
    return {
        link : function(scope, element, attr) {
            scope.$watch(attr.sidebarDirective, function(newVal) {
                  if(newVal)
                  {
                    element.addClass('show'); 
                    return;
                  }
                  element.removeClass('show');
            });
        }
    };
});
    
}());


Every time the toggle button is clicked toggleState function is called and state property on the scope is reversed. 
Now in the sidebarDirective we are watching for state property to change, we will use angular $watch for this, so each time state property of scope changes we will add or remove "show" class appropriately. 

Note: We could do all the work in the controller, but it is best practice in AngularJS to do dom manipulation in directive instead of the controller.

That's it, now we have simple navigation with toggle button in place.

Plunker: http://plnkr.co/edit/xzcjStdvmkI2rpfMzLjI?p=preview

If you have any question or getting some kind of error, please hit the comment section or create guest thread in the forum to get answered quickly.

Something to say? Tell us in comment section.