<!DOCTYPE html>
<html>
<head>
<title>SIE Special Projects</title>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="angular-route@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="sp_app">
<div ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">{{ message }}</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#/">
<i class="fa fa-home"></i> Home
</a>
</li>
<li>
<a href="#projects">
<i class="fa fa-shield"></i> Projects
</a>
</li>
</ul>
</div>
</nav>
<div id="main">
<div ng-view=""></div>
</div>
</div>
</body>
</html>
var app = angular.module('sp_app', ['ngRoute']);
// configure our routes
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'mainController'
})
.when('/projects', {
templateUrl: 'allprojects.html',
controller: 'projectsController'
});
});
app.controller('mainController', function ($scope) {
$scope.message = 'Welcome to the Special Projects web page';
});
app.controller('projectsController', function ($scope) {
$scope.message = 'Here are the projects';
});
/* Styles go here */
<div>
here we are
<p>
{{ message }}
</p>
</div>
<div class="container">
<a href="#projects"> Home route is working, but Projects route is not</a>
</div>