Instantly share code, notes, and snippets.

What would you like to do?
User Directory Template
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="directoryApp">
<link rel="stylesheet" href="">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div ng-view=""></div>
<script src=""></script>
<script src=""></script>
<script src="app/app.js"></script>
(function () {
'use strict';
//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('')
function getUsersComplete(result) {
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 = [];
function 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="" type="text" class="form-control" placeholder="filter">
<div class="form-group col-lg-2">
<input class="form-control" readonly="true" value="count: {{vm.users.length}}"></input>
<div class="row">
<div class="col-lg-12">
<table class="table table-hover">
<tr ng-repeat="user in vm.users |">
<div class="row">
<div class="col-lg-2">
<img class=" img-thumbnail" src="person-placeholder.jpg" style="max-height:160px;" alt="pic">
<div class="col-lg-6">
<h3><strong>{{}}</strong> ({{user.username}})</h3>
<p><strong>Phone:</strong> {{}}</p>
<p><strong>Email: </strong><a href="mailto:{{}}">{{}}</a></p>
<p><strong>Website:</strong> {{}}</p>
<p><strong>Company:</strong> {{}}</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment