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)

    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