Experiments with AngularJS -1 (Contacts Search Application)

10. October 2014 · Write a comment · Categories: angularJS, JavaScript

Below is my first application using AngularJS and without using jQuery.
Thanks to Viral Patel’s tutorials for teaching me basic concepts of AngularJS .

Its a simple contact search application where user can search for contacts by their first name or surname.
It searches and show results real time when user keeps typing.
Results are sorted by contact’s first name using angularJS filter ‘orderby’.

AngularJS ‘$http’ service is used for requesting data from server.
Also angularJS ‘ngRoute’ module is used when contact name is clicked, and a request is made to retrieve contact details.

Full Screen Demo (new tab/window)

index.html

<!DOCTYPE html>
<html>
<head>
<title>Experiment with AngularJS -1 ( Contact Search Application )</title>
</head>
<style>
tr:nth-child(even) {
    background-color: #EBF5FF;
}
tr:nth-child(odd) {
    background-color: #E6E6E6;
}
</style>
<body>
<div ng-app="contacts" ng-controller="ContactSearch">
	<label>Search for contacts:</label>
	<input type="text" name="searchFor" ng-keyup="search()" ng-model="searchFor"/><span style="font-size:9px">('john','james' etc)</span>
	<div style="width:75%;padding:15px 0 0 10px">
		<div style="float:left;min-height:250px">
			<table cellspacing="0" cellpadding="0" border="0" width="100%">
			<tr ng-repeat="contact in contacts | orderBy:'name':false">
				<td>
					<a href="#detail/{{ contact.id }}">{{ contact.name }}</a>
				</td>
			</tr>
			</table>
		</div>
		<div style="margin-left:150px" ">
			<div ng-view style="background:#F5F0E6;width:300px">
			</div>
		</div>
	</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js

templates/detail.html

« Older articles
Newer articles »