Search in Angularjs app

    Feb 10, 2017       by Pankaj Kumar
search-angularj-app.jpg

In this demo, we will create an angular.js app in which we will have live search. Search is one of the most important part of any web app, which makes the app more user friendly when we have lots of the data in the application.

So let's have a look on the folder structure of the app.

js/

--angular.js

--angular.min.js.map

--app.js

node_modules/

views/

--index.html

package-lock.json

package.json

server.js

 

In the above code, we have majorly 3 section first is view, second is angularjs and last is nodejs.

 

So let's start with nodejs section. So in nodejs we have server.js file.

 

 
// including all dependencies...
let express =   require('express'),
   app     =   express(),
   mysql   =   require('mysql');
 
let connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '*******',
database : 'angular_search'
});
 
connection.connect(function(){});
 
app.use(express.static(__dirname + '/css'));
app.use(express.static(__dirname + '/js'));
 
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
 
app.get('/',function(req,res){
    res.render('index.html');
});
 
app.get('/fetch-users',function(req,res){
    connection.query("select * from users ",function(err,rows,fields){
        if(err) throw err;      
        res.end(JSON.stringify(rows));  
    });
});
 
app.listen(3000,function(){
        console.log("App running on port:3000");
});
 

 

In the above, At the top we can see all dependencies have been added. Below that we have mysql connection of our app. Below that we have served the html file on root method. After that we have a method get named 'fetch-users' which is fetching data from databse. And at the bottom app is started on port 3000.

 

Now lets have a look on the code inside package.json.

 

 
{
"name": "angular_search",
"version": "0.0.1",
"description": "Search in AngularJS and Node",
"main": "server.js",
"keywords": "NA",
"dependencies": {
"ejs": "^1.0.0",
"express": "^4.8.6",
"mysql": "^2.4.3"
}
}
 

 

In the above page we have basic detail of the app and information about the packages installed. Next file is package-lock.json, which is created by npm while instlling packages so don't need to look into it.

 

Now let's move to angularjs part, file app.js inside js folder.

 

 
var app = angular.module('angular_search', []);
 
app.controller('user_list',function($scope,$http){
load_users();
function load_users(){
$http.get("http://localhost:3000/fetch-users").success(function(data){
$scope.users=data;
})
}
 
});
 

 

In the above file we can see and app is created and a controller below that we have a controller which is calling nodejs api to fetch the user list and sets it to users variable. We have two another files which are libraries  of angularjs, so no need to discuss that in detail.

 

Now let's move to view part, So have a look on index.html

 

<style>#search{ margin-left:400px;}</style>
 
        <div id="container" ng-app='angular_search' ng-controller='user_list'>
            <h1 style="text-align:center;">Json World Demo for seach in angularjs app</h1>
            <input style="margin-top:50px;" type="search" size="40" placeholder="Search user from the list." ng-model="search" id="search">         
            <table class="table" style="margin-top:50px;">      
                <tr>
                    <td><strong>Full name</strong></td>
                    <td><strong>Address</strong></td>
                    <td><strong>Interests</strong></td>
                </tr>       
            <tr ng-repeat="data in users | filter:search">
                <td>{{data.full_name}}</td>
                <td>{{data.address}}</td>           
                <td>{{data.interests}}</td>             
            </tr>
            </table>    
            </div>  
 

 

Please note this line ng-repeat=”data in users | filter:search. This line basically performing search in users list. Everything related to search task  Angular does this internally.

We have also mysql database in it. so we have below schema and data of that:

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `user_id` int(9) NOT NULL,
  `full_name` varchar(40) NOT NULL,
  `address` varchar(250) NOT NULL,
  `interests` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`user_id`, `full_name`, `address`, `interests`) VALUES
(1, 'Ravi Kumar', 'South Delhi, New Delhi', 'playing cricket'),
(2, 'Rani Kumari', 'Raja Bagh, Lucknow', 'watching movie'),
(3, 'Rohit Kumar', 'North Delhi, New Delhi', 'playing guitar'),
(4, 'Ravina Kumari', 'Railway Bagh, Lucknow', 'watching tv');

 

By this way can fulfill task of search in angular app. You can download the complete zipped demo code for this site also.

 

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends. 

Thanks!!

You can download complete code from here. Download Code

Angular demo angular seach

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS