JustinK/1-index.html

## 1-index.html
<!--  index.html -->

<!DOCTYPE html>
<html ng-app="directoryApp">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div ng-view=""></div>
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.min.js"></script>
        <script src="app/app.js"></script>
    </body>
</html>

## 2-app.js
//app.js

(function () {
    'use strict';
    angular
        //define module and inject dependencies
        .module('directoryApp', ['ngRoute'])
        //configure the routes for the application
        .config(function ($routeProvider, $locationProvider) {
            //this app has one controller and one route
            $routeProvider.when('/', {
                controller: 'DirectoryController',
                controllerAs: 'vm',
                templateUrl: '../app/directory.html'
            });
            $routeProvider.otherwise({ redirectTo: '/' });
        })
        //set up the factory for the app
        .factory('dataService', dataService)
        .controller('DirectoryController', DirectoryController);

    //inject dependencies into the dataService factory
    dataService.$inject = ['$http', '$q'];

    //factory for the app used for data access
    function dataService($http, $q) {
        var service = {
            //expose the getUsers method so it can be use from other functions
            getUsers: getUsers,
        };
        //return the exposed methods
        return service;

        //get the user data
        function getUsers() {
            return $http.get('http://jsonplaceholder.typicode.com/users')
                .then(getUsersComplete)
                .catch(getUsersFailed);

            function getUsersComplete(result) {
                return result.data;
            }
            function getUsersFailed() {
            }
        }
    }

    DirectoryController.$inject = ['$scope', '$http', '$filter', 'dataService'];

    function DirectoryController($scope, $http, $filter, dataService) {
        var vm = this;
        //create array to store users returned from the factory
        vm.users = [];

        getUsers();

        function getUsers() {
            dataService.getUsers()
                .then(function (data) {
                    vm.users = data;
                });
        }
    }

})();

## 3-directory.html
<!--  directory.html -->

<div ng-controller="DirectoryController" class="container">
<h1>User Directory</h1>
    <div class="row">
        <div class="form-group col-lg-4">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-filter"></span></span>
                <input ng-model="vm.search" type="text" class="form-control" placeholder="filter">
            </div>
        </div>
        <div class="form-group col-lg-2">
            <input class="form-control" readonly="true" value="count: {{vm.users.length}}"></input>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <table class="table table-hover">
                <tbody>
                    <tr ng-repeat="user in vm.users | filter:vm.search">
                        <td>
                            <div class="row">
                                <div class="col-lg-2">
                                    <img class=" img-thumbnail" src="person-placeholder.jpg" style="max-height:160px;" alt="pic">
                                </div>
                                <div class="col-lg-6">
                                    <h3><strong>{{user.name}}</strong> ({{user.username}})</h3>
                                    <p><strong>Phone:</strong> {{user.phone}}</p>
                                    <p><strong>Email: </strong><a href="mailto:{{user.email}}">{{user.email}}</a></p>
                                    <p><strong>Website:</strong> {{user.website}}</p>
                                    <p><strong>Company:</strong> {{user.company.name}}</p>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
	<!-- index.html -->

	<!DOCTYPE html>
	<html ng-app="directoryApp">
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-lg-12">
	<div ng-view=""></div>
	</div>
	</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.min.js"></script>
	<script src="app/app.js"></script>
	</body>
	</html>
	//app.js

	(function () {
	'use strict';
	angular
	//define module and inject dependencies
	.module('directoryApp', ['ngRoute'])
	//configure the routes for the application
	.config(function ($routeProvider, $locationProvider) {
	//this app has one controller and one route
	$routeProvider.when('/', {
	controller: 'DirectoryController',
	controllerAs: 'vm',
	templateUrl: '../app/directory.html'
	});
	$routeProvider.otherwise({ redirectTo: '/' });
	})
	//set up the factory for the app
	.factory('dataService', dataService)
	.controller('DirectoryController', DirectoryController);

	//inject dependencies into the dataService factory
	dataService.$inject = ['$http', '$q'];

	//factory for the app used for data access
	function dataService($http, $q) {
	var service = {
	//expose the getUsers method so it can be use from other functions
	getUsers: getUsers,
	};
	//return the exposed methods
	return service;

	//get the user data
	function getUsers() {
	return $http.get('http://jsonplaceholder.typicode.com/users')
	.then(getUsersComplete)
	.catch(getUsersFailed);

	function getUsersComplete(result) {
	return result.data;
	}
	function getUsersFailed() {
	}
	}
	}

	DirectoryController.$inject = ['$scope', '$http', '$filter', 'dataService'];

	function DirectoryController($scope, $http, $filter, dataService) {
	var vm = this;
	//create array to store users returned from the factory
	vm.users = [];

	getUsers();

	function getUsers() {
	dataService.getUsers()
	.then(function (data) {
	vm.users = data;
	});
	}
	}

	})();
	<!-- directory.html -->

	<div ng-controller="DirectoryController" class="container">
	<h1>User Directory</h1>
	<div class="row">
	<div class="form-group col-lg-4">
	<div class="input-group">
	<span class="input-group-addon"><span class="glyphicon glyphicon-filter"></span></span>
	<input ng-model="vm.search" type="text" class="form-control" placeholder="filter">
	</div>
	</div>
	<div class="form-group col-lg-2">
	<input class="form-control" readonly="true" value="count: {{vm.users.length}}"></input>
	</div>
	</div>
	<div class="row">
	<div class="col-lg-12">
	<table class="table table-hover">
	<tbody>
	<tr ng-repeat="user in vm.users \| filter:vm.search">
	<td>
	<div class="row">
	<div class="col-lg-2">
	<img class=" img-thumbnail" src="person-placeholder.jpg" style="max-height:160px;" alt="pic">
	</div>
	<div class="col-lg-6">
	<h3><strong>{{user.name}}</strong> ({{user.username}})</h3>
	<p><strong>Phone:</strong> {{user.phone}}</p>
	<p><strong>Email: </strong><a href="mailto:{{user.email}}">{{user.email}}</a></p>
	<p><strong>Website:</strong> {{user.website}}</p>
	<p><strong>Company:</strong> {{user.company.name}}</p>
	</div>
	</div>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>