More Reading:

  • permanent-lovely

  • permission-prevention

  • persuade-cloth

  • photograph-abroad

  • pile-steel

  • pin-companion

  • pink-expensive

  • pipe-bold

  • pity-pin

  • plaster-arch-friendship

  • John Chacko | JavaScript Programmer

    Below is a variation to my first application using AngularJS.

    In that sample http calls to server was handled inside controller. That was moved to a custom service provider, viz ‘dataService’, which take care of communication to server.
    That custom service was defined using factory method.

    Both ‘ContactSearch’ & ‘DetailsController’ controllers depends on ‘dataService’.
    A dependency to ‘dataService’ was injected to both controllers and so it can use methods provided by that service.

    Full Screen Demo (new tab/window)


    <!DOCTYPE html>
    <title>Experiment with AngularJS -1 ( Contact Search Application )</title>
    tr:nth-child(even) {
        background-color: #EBF5FF;
    tr:nth-child(odd) {
        background-color: #E6E6E6;
    <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">
    					<a href="#detail/{{ }}">{{ }}</a>
    		<div style="margin-left:150px" ">
    			<div ng-view style="background:#F5F0E6;width:300px">
    <script src=""></script>
    <script src=""></script>
    <script src="app.js"></script>