Welcome to Findnerd. Today we are going to build an application for searching the records. As we all know that we have written many blogs on angularJS as well as nodeJS. We want to recommend you to check these blogs for clear idea of these two frameworks. Now we are going to ready the student details in JSON format. Kindly follow the below steps.

Step1 : Create a blank folder for the application and inside this folder create folder named data. Now create file named students.json and paste below json data in this file. You can add more records as per the requirements. Kindly check the data below.

//students.json
[
	{
		"rollno": 112,
		"name": "Ankit kapoor",
		"city": "Amritsar",
		"course": "MCA" 
	},


	{
		"rollno": 343,
		"name": "Sandeep Yadav",
		"city": "Aligarh",
		"course": "BBA" 
	},


	{
		"rollno": 123,
		"name": "Mukesh Sharma",
		"city": "Sangrur",
		"course": "B.TECH" 
	},


	{
		"rollno": 423,
		"name": "kanu kapoor",
		"city": "Amritsar",
		"course": "MBA" 
	},


	{
		"rollno": 764,
		"name": "Geeta Rao",
		"city": "Lucknow",
		"course": "LLB" 
	},

	{
		"rollno": 345,
		"name": "Sheema jain",
		"city": "Jaladhar",
		"course": "MBA" 
	},

	{
		"rollno": 444,
		"name": "Ankit kapoor",
		"city": "Aligarh",
		"course": "B.TECH" 
	},

	{
		"rollno": 999,
		"name": "Sumit verma",
		"city": "Patiala",
		"course": "BBA" 
	},

	{
		"rollno": 373,
		"name": "Dev negi",
		"city": "Ramgarh",
		"course": "MCA" 
	},

	{
		"rollno": 843,
		"name": "maya wallia",
		"city": "Amritsar",
		"course": "BBA" 
	},

	{
		"rollno": 214,
		"name": "kiran Khan",
		"city": "Patiala",
		"course": "BBA" 
	},

	{
		"rollno": 340,
		"name": "Jeevan khaana",
		"city": "Amritsar",
		"course": "B.TECH" 
	},

	{
		"rollno": 732,
		"name": "Aasish khushwa",
		"city": "Bijapur",
		"course": "MBA" 
	},

	{
		"rollno": 765,
		"name": "heena saini",
		"city": "sangrur",
		"course": "MBA" 
	},

	
	{
		"rollno": 941,
		"name": "Ratnam singh",
		"city": "Amritsar",
		"course": "BBA" 
	},

	{
		"rollno": 963,
		"name": "deepak verma",
		"city": "Sangrur",
		"course": "MBA"
	},

	{
		"rollno": 513,
		"name": "deepak kapoor",
		"city": "Aligarh",
		"course": "B.TECH" 
	},

	{
		"rollno": 415,
		"name": "sonu kapoor",
		"city": "Ramgarh",
		"course": "MCA" 
	},

	{
		"rollno": 777,
		"name": "Ankita Tonk",
		"city": "Amritsar",
		"course": "B.TECH" 
	},

	{
		"rollno": 666,
		"name": "Ankit khanna",
		"city": "Aligarh",
		"course": "BBA" 
	},

	{
		"rollno": 909,
		"name": "Aachal kapoor",
		"city": "sangrur",
		"course": "MBA"
	},

	{
		"rollno": 184,
		"name": "Hemu kant",
		"city": "Amritsar",
		"course": "BBA"
	},

	{
		"rollno": 195,
		"name": "Sumit yadav",
		"city": "Patiala",
		"course": "B.TECH" 
	}

]

Step 2: Create package.json file in root directory to set the dependencies and run the below command to install the dependencies.

// go to application directory
npm install

Step 3: Create index.js in root directory and paste the below code.

// index.js
var express = require('express');
var http = require('http');
var students = require('./data/students.json');

//console.log(students);
var app = express().use(express.bodyParser()).use(express.static('public'));

app.get('/students', function  (req, res) {
  res.json(students);
});


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

http.createServer(app).listen(3000,function(){
console.log("Are you ready? Open link http://localhost:3000");
});

In above code we have loaded express, http and included student records as well. We have also created GET request for students records. We are also checking 404 page. We have created server which is listening to port 3000.

Step 4: Create  public folder inside root directory and create sub-folders css, js as well as views inside public folder. Download the angular.min.js, angular-resource.min.js, bootstrap.min.js and  bootstrap.min.css, bootstrap-responsive.css. Now create lib folder inside js folder and paste javascript files inside this folder. Paste the css files inside css folder.

Step 5: Create app.js inside js folder and write the code for module that is shortout.

// app.js
angular.module('shortout', ['shortoutServices']).config(shortoutRouter);

function shortoutRouter($routeProvider){
    $routeProvider.when('/',
        { 
    	templateUrl : 'views/students.html',
        controller: 'StudentsCtrl'
        });
}

In above code we created module named shortout and configured the route for the application. We set the main root using when() function. We also set the template as well as controller for the route.

Step 6: Create services.js inside js folder and paste below code.

//services.js

angular.module('shortoutServices',['ngResource']).factory('Students',function($resource){
	return $resource('/students');

});

Step 7: Create controllers folder inside js folder and create students.js file.

function StudentsCtrl ($scope, Students) {
	$scope.students = Students.query();
}

In above code we have created Students controller.

Step 8: Inside views folder create students.html file. Please have a look.

// students.html
<h3>Search for students</h3>

<div class="controls controls-row">
  <input type="text" class="input-small" placeholder="Course" ng-model="search.course" />
  <input type="text" class="input-small" placeholder="City" ng-model="search.city" />
</div>

<table class="table">
  <thead>
    <tr>
      <th>Rollno</th>
      <th>Course - City</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="student in students | filter:search">
      <td>{{student.rollno}}</td>
      <td>
        <a ng-href="#">
          {{student.course + ' - ' + student.city}}
        </a>
      </td>
      <td>{{student.name}}</td>
    </tr>
  </tbody>
</table>

Step 9: Create index.html file inside public folder. Kindly check the code below.

// index.html

<html ng-app="shortout">
<head>
	<title>Search Demo</title>
	<script type="text/javascript" src="js/lib/angular.min.js"></script>
	<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
	<script type="text/javascript" src="js/lib/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/controllers/students.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
	<script type="text/javascript" src="js/services.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">
		<h1>Angular Search Demo</h1>

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

In above code we have added the module shortout in the application and have attached the lib, module file, service file.

Step 10: Now you can run the application by using below command.

node index.js

We are going to attach complete code for the application. You can download the application below.

Thank you for being with us!