<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="spaSample">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js"></script>
<script src="./script/app.js"></script>
<!--do not import all javascript code here. use dynamic loading with partial view-->
<script src="./script/header.js"></script>
<script src="./script/footer.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</body>
</html>
<ng-include src=" './partialview/subview/header.html' "></ng-include>
<div id="main" class="jumbotron text-center">
<h1>Home Page</h1>
<br />cotroller : {{name}}
<br />message: {{message}}
</div>
<ng-include src="'./partialview/subview/footer.html'" ng-controller="FooterCtrl"></ng-include>
<ng-include src=" './partialview/subview/header.html' "></ng-include>
<div id="main" class="jumbotron text-center">
<h1>Book Page</h1>
<br />cotroller : {{name}}
<br />Book Id: {{params.bookId}}
</div>
<ng-include src="'./partialview/subview/footer.html'" ng-controller="FooterCtrl"></ng-include>
<ng-include src=" './partialview/subview/header.html' "></ng-include>
<div id="main" class="jumbotron text-center">
<h1>Chapter Page</h1>
<br />controller: {{name}}
<br />Book Id: {{params.bookId}}
<br />Chapter Id: {{params.chapterId}}
</div>
<ng-include src="'./partialview/subview/footer.html'" ng-controller="FooterCtrl"></ng-include>
<nav class="navbar navbar-default" ng-controller="HeaderCtrl">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#/">{{title}}</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#/"><i class="fa fa-home"></i>Home</a>
</li>
<li><a href="#Book/Moby"><i class="fa fa-comment"></i>Moby</a>
</li>
<li><a href="#Book/Moby/ch/1"><i class="fa fa-comment"></i>Moby: Ch1</a>
</li>
<li><a href="#Book/Gatsby"><i class="fa fa-comment"></i>Gatsby</a>
</li>
<li><a href="#Book/Gatsby/ch/4?key=value"><i class="fa fa-comment"></i>Gatsby: Ch4</a>
</li>
<li><a href="#Book/Scarlet"><i class="fa fa-comment"></i>Scarlet Letter</a>
</li>
</ul>
</div>
</nav>
<footer class="text-center">
<a href="http://www.smilegate.com">{{company}}</a>
</footer>
// create the module and name it spaSample
var scotchApp = angular.module('spaSample', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'partialview/login.html',
controller: 'mainController'
})
// route for the about page
.when('/Book/:bookId', {
templateUrl: 'partialview/lobby.html',
controller: 'BookCtrl'
})
// route for the contact page
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'partialview/room.html',
controller: 'ChapterCtrl'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
$scope.name = "HomeCtrl";
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('BookCtrl', function($scope, $routeParams) {
$scope.name = "BookCtrl";
$scope.params = $routeParams;
});
scotchApp.controller('ChapterCtrl', function($scope, $routeParams) {
$scope.name = "ChapterCtrl";
$scope.params = $routeParams;
});
scotchApp.controller('HeaderCtrl', function($scope) {
$scope.title = "Angular Routing Sample";
});
scotchApp.controller('FooterCtrl', function($scope) {
$scope.company = "SmileGate Games corp";
});