<< back to code examples

afg Employee Directory App

This is an Angular JS app in progress. It is an employee directory for my current agency. The employee info is currently being pulled from local JSON objects. When it is finished it will be pulling the data in real time from a data base. Check git hub for updates. I will update this site again when it is complete.

var afgApp = angular.module('afgApp', ['ngRoute', 'ngAnimate']);

afgApp.config(function($routeProvider) {

    $routeProvider.

      when('/', {
        templateUrl: 'templates/talent.html',
        controller: 'talentController'
      }).
      when('/directory', {
        templateUrl: 'templates/directory.html',
        controller: 'talentController'
      }).
      when('/about', {
        templateUrl: 'templates/about.html',
        controller: 'aboutController'
      }).
      otherwise({
        redirectTo: '/',
        controller: 'talentController'
      });

  });

// Talent Controller
afgApp.controller('talentController', function($scope, $log, $filter) {

	/* The Page Title */
	$scope.title = 'The Team';

	/*Filter Groups*/
	$scope.alldept = false;
	$scope.leadership = true;
	$scope.interactive = true;
	$scope.account = true;
	$scope.studio = true;

	/* Toggle Search Filters */
	$scope.toggleFilters = function() {
		$scope.search = !$scope.search
	}

	/* Details Popup */
	$scope.details = function(x) {
		
		if(x.details == true) {
			this.purpBkg = false;
		}

		x.details = !x.details;
	}

	// Hover States
	$scope.talentHover = function() {
		this.purpBkg = true;
	}
	
	$scope.talentHoverOff = function() {
		this.purpBkg = false;
	}

	/* The Team */
	$scope.employees = [
	{img: 'frank.ginsberg.jpg', name: 'Frank Ginsberg', title: 'CEO', department: 'Leadership', group: 'leadership'},
	{img: 'joe.petruccio.jpg', name: 'Joe Petruccio', title: 'Chief Creative Officer', department: 'Leadership', group: 'leadership'},

	{img: 'craig.bauer.jpg', name: 'Craig Bauer', title: 'interactice developer', department: 'Interactive', group: 'interactive'},
	{img: 'jessica.kjer.jpg', name: 'Jessica Kjer', title: 'Digital Art Director', department: 'Interactive', group: 'interactive'},
	{img: 'nathan.waterman.jpg', name: 'Joe Namath', title: 'Interactive Developer', department: 'Account Person', group: 'account'},
	{img: 'irene.gutierrez.jpg', name: 'Mark Elbert', title: 'Designer', department: 'Art Studio', group: 'studio'},
	{img: 'irene.gutierrez.jpg', name: 'Irene Gutierrez', title: 'Account Executive', department: 'Account Person', group: 'account'},
	{img: 'craig.bauer.jpg', name: 'Craig Bauer', title: 'Director of Interactive', department: 'Interactive', group: 'interactive'},
	{img: 'jessica.kjer.jpg', name: 'Jessica Kjer', title: 'Digital Art Director', department: 'Interactive', group: 'interactive'},
	{img: 'nathan.waterman.jpg', name: 'Joe Namath', title: 'Interactive Developer', department: 'Account Person', group: 'account'},
	{img: 'nathan.waterman.jpg', name: 'Mark Elbert', title: 'Designer', department: 'Studio', group: 'studio'},
	{img: 'frank.ginsberg.jpg', name: 'Frank Ginsberg', title: 'CEO', department: 'Leadership', group: 'leadership'},
	{img: 'craig.bauer.jpg', name: 'Craig Bauer', title: 'Interactice Developer', department: 'Interactive', group: 'interactive'},
	{img: 'jessica.kjer.jpg', name: 'Jessica Kjer', title: 'Digital Art Director', department: 'Interactive', group: 'interactive'},
	{img: 'nathan.waterman.jpg', name: 'Joe Namath', title: 'Interactive Developer', department: 'Account Person', group: 'account'},
	{img: 'nathan.waterman.jpg', name: 'Mark Elbert', title: 'Designer', department: 'Art Studio', group: 'studio'},
	{img: 'nathan.waterman.jpg', name: 'Joe Namath', title: 'Interactive Developer', department: 'Account Person', group: 'account'},
	{img: 'nathan.waterman.jpg', name: 'Mark Elbert', title: 'Designer', department: 'Art Studio', group: 'studio'},
	];
	

});


afgApp.controller('aboutController', function($scope, $log, $filter) {
     //empty controller
});

html(index)

<!DOCTYPE html>
<html ng-app="afgApp">

	<head>

		<title>afg&Talent</title>

		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<link rel="stylesheet" type="text/css" href="css/app.css" />

	</head>

	<body>

	<header class="group">

		<img width="120px" ng-src="img/afg-logo.jpg" />

		<ul>
			<li><a href="#/">talent</a></li>
			<li><a href="#/directory">directory</a></li>
			<li><a href="#/about">about</a></li>
		</ul>

	</header>


	<!-- Talent Controller -->
	<div ng-view></div> 
	<!-- Close Talent Controller -->


	<footer>
		<span>AFG&</span>
		<span class="dash"> - </span>
		<span>885 2nd Avenue</span>
		<span class="dash"> - </span>
		<span>1 Dag Hammarskjold Plaza</span>
		<span class="dash"> - </span>
		<span>New York. NY 10017</span>
		<span class="dash"> - </span>
		<span>212.832.3800</span>
	</footer>

	<!-- <script src="js/angular.min.1.3.9.js"></script> -->
	<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
	<script src="https://code.angularjs.org/1.3.9/angular-route.min.js"></script>
	<script src="https://code.angularjs.org/1.3.9/angular-animate.min.js"></script>
	<script src="js/app.js"></script>
	</body>
</html>

main template

<img class="searchBtn" ng-click="toggleFilters()" ng-src="img/search.png" ng-model="searchit" />

<div class="fade" ng-show="search" style="text-align: center;">

	<label>all</label><input type="checkbox" ng-model="alldept" />

	<span ng-hide="alldept">
		<label>leadership<input type="checkbox" ng-model="leadership" /></label>
		<label>interactive<input type="checkbox" ng-model="interactive" /></label>
		<label>account<input type="checkbox" ng-model="account" /></label>
		<label>designers<input type="checkbox" ng-model="studio" /></label>
	</span>
	<p>
	<input class="searchBox" placeholder="Search by anything" ng-model="query" type="text" />
	<button ng-click="query = '' " ng-show="query.length">Clear</button>
	</p>

</div><!-- Close filters -->

<!-- employee template -->
<div ng-cloak ng-click="details(employee)" ng-repeat="employee in employees | filter: query">
<!-- | orderBy: 'name'  -->

	<!-- Returns the department value -->
	<div ng-show="{{ employee.group }} || alldept" ng-mouseover="talentHover()" ng-mouseleave="talentHoverOff()" ng-cloak class="employee" ng-class="{employeeBkg: purpBkg}">
		
		<img width="100%" src="img/team/{{ employee.img }}" />
		<small>
			<strong>
				{{ employee.name }}
			</strong>
		</small>
		<small>
			{{ employee.title }}
		</small>
		<small>
			{{ employee.department }}
		</small>

		<div class="fade e_details" ng-if="employee.details">

			<img width="40" class="closeBtn" src="img/close.png" />

			<div class="inside">

				<div class="group singleWrap">

					<img src="img/team/{{ employee.img }}" />

					<h1 class="detailTitle">
						{{ employee.name }}
					</h1>
					<p>{{ employee.title }}</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do tempor incididunt ut labore et dolore.</p>
					<p>Extension: 311 7247</p>
					<a href="{{ employee.email }}"><p>{{ employee.email }}</p></a>

				</div>

			</div>

		</div>

	</div>

</div>

More Code Projects