Welcome to FindNerd. Today we are going to build navigation bar in angularJS. We are using nodeJS as a back-end framework. As we all knows, we have provided other blogs based on angularJS and nodeJS. You can check these blogs for getting a clear idea of these two frameworks. We are going to list the folders and files which include in the application. Please have a look.

A) package.json : Set the dependencies for the application.

B) index.js : It is main file which starts the server for the application.

C) public : It includes css,js, extras folders and angularJS files for the application.

Now we are going to list the steps for building the application. Please have a look.

Step1: Install the dependencies using below command.

npm install

Step2: Create index.js file in the root directory and paste the following code.

var express = require('express'),
  http = require('http');

var app = express()
  .use(express.bodyParser())
  .use(express.static('public'));

app.get('/*', function  (req, res) {
  res.json(404, {status: 'not found'});
});

http.createServer(app).listen(3000, function () {
  console.log("Server ready at http://localhost:3000");
});

In above code we have loaded the express and http modules and starts the server.

Step3 : Create public folder and create sub-folders such as css, js, img and extras. Download the bootstrap and angularJS files and paste the css files inside css folder and create controllers as well as lib folder inside js folder, paste js files inside js folder. Create findnerd.js and paste below code inside it.

function FindnerdCtrl ($scope) {
  $scope.setActive = function (type) {
    $scope.studentsActive = '';
    $scope.teachersActive = '';
    $scope.workersActive = '';

    $scope[type + 'Active'] = 'active';
  }

  $scope.students = {
    "343": {
      "rollno": "343",
      "name": "Ajeet Khan",
      "city": "Meerut",
      "courses": [
        "Math",
        "Physics",
        "Chemistry",
        "Hindi",
        "English"
      ]
    },
    "344": {
      "rollno": "344",
      "name": "Kiran Singh",
      "city": "Aligarh",
      "courses": [
        "Biology",
        "Physics",
        "Chemistry",
        "Hindi",
        "English"
      ]
    },
    "345": {
      "rollno": "345",
      "name": "Mohan Taank",
      "city": "Dehradun",
      "courses": [
        "History",
        "Computers",
        "Social Science",
        "Hindi",
        "English"
      ]
    }
  };
  $scope.sidebarURL = 'extras/student.html';
  $scope.currentStudent = null;

  $scope.setStudent = function (rollno) {
    $scope.currentStudent = $scope.students[rollno];
  };
}

In above code we have object named students which includes students details like name, rollno, city, courses. We have also written the setActive function which  highlights the menu-item on click. We have other function that is setStudent which is useful to set the current student active. In this example we are not using this function. We will create a sidebar in main template file and will show the student courses and name in the sidebar so we have set the template file for the sidebar that is student.html.

Step4: Create file app.js inside js folder and write the code for angular module. We are going create module named college. Please have a look.

angular.module('college', [])
	.config(collegeRecords);

function collegeRecords ($routeProvider) {
	$routeProvider
		.when('/', {templateUrl: 'extras/students.html',
            controller: function($scope){
              $scope.setActive('students');
            }}
			)
		.when('/teachers', {template: '<h3>Teachers</h3>',
          controller: function($scope){
              $scope.setActive('teachers');
            }

	})
		.when('/workers', {template: '<h3>Other Worker</h3>',
              controller: function($scope){
              $scope.setActive('workers');
            }
	});
}

In above module we have created routes or other pages or links for navigation. We are using when() function to create the route. Here we have created three different routes such as students which will show the list of all students, we have also assign the template for this page that is students.html, other routes is teacher and workers in which we are showing only headings.

Step5: Create extras folder inside lib folder and create students.html file and paste the below code.

// students.html
<div class="pull-left span6">
	<h3>All Students</h3>
	<ul>
		<li ng-repeat="student in students">
			<a href="" ng-click="setStudent(student.rollno)">{{student.rollno}} - {{student.city}}</a>
		</li>
	</ul>

</div>
<div class="span5" ng-include src="sidebarURL"></div>

In this template we create pull-left div as well as sidebar to show the single student details on click event.

Now create student.html file and paste below code.

//student.html
<div ng-show="currentStudent">
  <h3>{{currentStudent.name}}</h3>

  <h4>Courses</h4>

  <ul>
    <li ng-repeat="course in currentStudent.courses">
      {{course}}
    </li>
  </ul>
</div> 

Step6: Now create index.html inside public folder and paste the following code.

<html ng-app="college">
<head>
	<title>Demo</title>
	<script type="text/javascript" src="js/lib/angular.min.js"></script>
	<script type="text/javascript" src="js/controllers/findnerd.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
</head>
<body>
	<div class="container" ng-controller="FindnerdCtrl">
		<h1>Student Details</h1>

		<ul class="nav nav-pills">
			<li ng-class="studentsActive">
				<a href="#" >Students</a>
			</li>
			<li ng-class="teachersActive">
				<a href="#/teachers" >Teachers</a>
			</li>
			<li ng-class="workersActive">
				<a href="#/workers" >workers</a>
			</li>
		</ul>

		<div ng-view></div>
	</div>
</body>
</html>

This is main angular file. In this file we have added required bootstrap and angular files. We have created div.container and assign the controller to this div. We have also created the navigation in ul tag.

You can also download the demo code from below link. Thank you for being with us!