So I was trying to make a SPA using angular but when I try to open my page on a localhost the navbar displays but none of the content I have in separate HTML documents loads. I feel as if I'm missing something but I'm not sure what.
HTML
<html lang="en" ng-app="App"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--External Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Internal Styles -->
<link rel="stylesheet" href="css/style.css">
<!-- External Scripts -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/anime.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/a1dcc6967b.js"></script>
<!-- Internal Scripts -->
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var CSStransforms = anime({
targets: '#CSStransforms .el',
translateX: 250,
scale: 2,
rotate: '1turn'
});
</script>
<title>Bootsrap Shell With Navabar</title>
</head><body ng-controller="mainController">
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link active" href="#/">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/Page-Name">Page</a>
</li>
<!-- Dropdown - Delete from this comment to the next if you don't want it -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separted</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown user">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Signed in as </a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#"><i class="fa fa-user-circle" aria-hidden="true"></i> Edit Profile</a>
<a class="dropdown-item" href="/logout.php"><i class="fa fa-sign-out" aria-hidden="true"></i> Log Out</a>
</div>
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">User</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" data-toggle="modal" data-target="#register-modal" href="#"><i class="fa fa-user-circle" aria-hidden="true"></i> Register</a>
<a class="dropdown-item" data-toggle="modal" data-target="#login-modal" href="#"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</a>
</div>
</li>
</ul>
</div>
</nav>
<div id="login-modal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="login-modal-container">
<form id="login-form" role="form">
<div class="modal-body">
<h2 class="modal-text">Login To Your Account </h2>
<div id="err-msg"></div>
<div class="form-group">
<input type="text" id="username" name="username" placeholder="Your Username" class="form-control input-lg" />
</div>
<div class="form-group">
<input type="password" id="password" name="password" placeholder="Password" class="form-control input-lg" />
</div>
<div class="form-group">
<div id="captcha"></div>
</div>
<div class="form-group">
<input type="submit" id="login" name="login" value="Log In" class="btn btn-primary btn-block btn-lg" data-toggle="tooltip" data-placement="bottom" title="Press To Sign In" />
</div>
</div>
<div class="modal-footer modal-text">
Don't have an account? <a data-toggle="modal" data-target="#register-modal" href="#" data-dismiss="modal">Sign Up here</a>
</div>
</form>
</div>
</div>
</div>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
JavaScript
var App = angular.module('App', ['ngRoute']);
// configure our routes
App.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
})
.otherwise({redirectTo: '/'});
});
// create the controller and inject Angular's $scope
App.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
App.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
App.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
Edit
Bower was used to get angular
{"name": "site","authors": ["Luculent"],"description": "","main":"index.php","license": "MIT","homepage": "/","ignore": ["**/.*","node_modules","bower_components","test","tests"]}
Edit 2
got angular 1.6.3 but still does not work
Edit 3
when I launch the page it generates the following exception:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.3/$injector/modulerr?p0=App&p1=Error%3A%20%…%20%20%20at%20eb%20(http%3A%2F%2Flocalhost%2Fjs%2Fangular.min.js%3A46%3A44)
at angular.min.js:6
at angular.min.js:42
at p (angular.min.js:7)
at g (angular.min.js:41)
at eb (angular.min.js:46)
at c (angular.min.js:21)
at Pc (angular.min.js:22)
at ue (angular.min.js:20)
at angular.min.js:332
at HTMLDocument.b (angular.min.js:38)
But as you can see above I have both angular.js and angular-route.
