For some reason my ng-view has decided not to work. Its been a bit since I've worked with angular so maybe I'm missing something. On the view home.html all it has is text hello in an h1 tag but its not showing up.
var mistApp=angular.module('mistApp',['ngRoute']);
mistApp.controller('mainCtrl',function($scope,$http,$route, $routeParams, $location){
//routes
mistApp.config(function($routeProvider,$locationProvider){
$routeProvider.when('/',{
templateUrl:'views/home.html',
controller:'homeCtrl'
})
$routeProvider.when('/calendar',{
templateUrl:'views/calendar.html',
controller:'calendarCtrl'
})
.otherwise({
redirectTo:'/'
});
}) //end routes
}) //end of mainCtrl<!DOCTYPE html>
<html ng-app="mistApp">
<head>
<title></title>
<!-- boostrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<!-- controllers -->
<script type="text/javascript" src="js/mainCtrl.js"></script>
<script type="text/javascript" src="js/calendarCtrl.js"></script>
</head>
<body ng-controller="mainCtrl">
<!-- NAVBAR -->
<nav class="nav navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false" class="navbar-toggle collapsed">
<span class="sr-only"> Toggle Navigation</span>
<span class="icon-bar""></span>
<span class="icon-bar""></span>
<span class="icon-bar""></span>
</button>
<a href="#/" class="navbar-brand"></a>
<h3>GameTown</h3>
</div>
<div id="navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a ng-href="#/">Home</a>
</li>
<li ng-hide="loggedIn">
<a ng-href="#/calendar">Calendar</a>
</li>
<li ng-hide="loggedIn">
<a ng-href="#/updates">Updates</a>
</li>
<li ng-hide="loggedIn">
<a ng-href="#/chat">Chat</a>
</li>
<li ng-hide="loggedIn">
<a ng-href="#/ideas">Ideas</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="views" ng-view></div>
</body>
</html>
The problem
The module call (i.e. config()) for the router is inside the controller callback.
Solution
Move the module call outside the controller callback. Look at the documentation for ngRoute and the example for more information.
So this:
Becomes:
See it working in this updated plunker.
One other issue I noticed was invalid HTML. There are three lines in the hamburger menu have an extra double quote after the class attribute. So these lines:
should be updated like this:
Instead of those three spans, you could consider using the glyphicon-menu-hamburger class name to utilize the Bootstrap menu icon (see the Components section for more information about those).