Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
User Directory Template
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment