var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'contact.html',
controller : 'contactController'
})
// route for the events page
.when('/events', {
templateUrl : 'events.html',
controller : 'eventsController'
})
// route for the events page
.when('/donate', {
templateUrl : 'donate.html',
controller : 'donateController'
})
// route for the forum rules page
.when('/forumrules', {
templateUrl : 'forumrules.html',
controller : 'forumrulesController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = '';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = '';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = '';
});
scotchApp.controller('eventsController', function($scope) {
$scope.message = '';
});
scotchApp.controller('donateController', function($scope) {
$scope.message = '';
});
scotchApp.controller('forumrulesController', function($scope) {
$scope.message = '';
});
<!doctype html>
<html ng-app="scotchApp">
<head>
<title>Utah Kids Foundation</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<link type="text/css" rel="stylesheet" href="ukf.css" />
<script src="ukf.js"></script>
<base href="/">
<!--
<base href="/index.html">-->
<script src="spaController.js"></script>
</head>
<body ng-controller="mainController" style="background-color:#eeeeee;">
<div class="pr fl tz lz">
<div class="pr fl tz lz cb">
<div class="pr fl tz lz cb" style="height:300px;">
<img id="image" src="Images/mainpage/aiden.png" alt="..." class="tz lz w100pc" style="position:absolute;height:300px;"
class="img-responsive center-block" />
<div class="pr fl tz lz cb">
<a href="#"><img id="imglogo" src="Images/mainpage/ukflogo.png" alt="..." class="img-responsive center-block" /></a>
</div>
<div class="pr fl tz lz cb w100pc">
<nav class="navbar navbar-default">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="margin-left:25%;">
<li><a href="#">HOME</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">OUR MISSION</a></li>
<li><a href="#">MEET OUR BOARD</a></li>
<li><a href="#">OUR KIDS IN THE NEWS</a></li>
<li><a href="#forumrules">FORUM RULES</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECTS<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">JACKPACKS</a></li>
<li><a href="#">MEET OUR UTAH KIDS</a></li>
<li><a href="#">MEDICAL SUPPPLY EXCHANGE</a></li>
<li><a href="#">EMPTY STOCKING FUND</a></li>
<li><a href="#">LIST OF NON-PROFITS</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SPONSORSHIP<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">HOW YOU CAN HELP</a></li>
</ul>
</li>
<li><a href="#events">EVENTS</a></li>
<li><a href="#">UTAH KIDS SWAG</a></li>
<li><a href="#donate">DONATE</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="pr fl cb w100pc">
<img id="shadow" src="Images/mainpage/shadow.png" alt="..." class="img-responsive center-block" />
</div>
</div>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main" style="width:100%;height:100%;">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.