Search code examples
javascriptangularjsng-viewangularjs-ng-route

ng-view does not seem to be working. Nothing shows up

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>

Solution

  • 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: 

    mistApp.controller('mainCtrl',function($scope,$http,$route, $routeParams, $location){
    //routes
    mistApp.config(function($routeProvider,$locationProvider){
    ...
    }) //end routes
}) //end of mainCtrl

    Becomes: 

    mistApp.controller('mainCtrl',function($scope,$http,$route, $routeParams, $location){
}); //end of mainCtrl

//routes
mistApp.config(function($routeProvider,$locationProvider){
   ...
}) //end routes

    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:

    <span class="icon-bar""></span>

    should be updated like this:

    <span class="icon-bar"></span>

    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).

    <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>