Last active
August 29, 2015 14:08
-
-
Save JustinK/3af56ada022fb06b27b0 to your computer and use it in GitHub Desktop.
User Directory Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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; | |
| }); | |
| } | |
| } | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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