Por alguna razón, mi ng-view ha decidido no funcionar. Ha pasado un poco desde que trabajé con angular, así que tal vez me esté perdiendo algo. En la vista home.html todo lo que tiene es texto hola en una etiqueta h1 pero no aparece.

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>
0
sumo 14 dic. 2016 a las 20:11
¿Qué sucede si mueves las cosas de mistApp.config para que estén fuera de tu definición de mistApp.controller?
 – 
Lex
14 dic. 2016 a las 20:19

1 respuesta

La mejor respuesta

El problema

La llamada del módulo (es decir, config () ) para el enrutador está dentro de la devolución de llamada del controlador.

Solución

Mueva la llamada del módulo fuera de la devolución de llamada del controlador. Consulte la documentación de ngRoute y el ejemplo para obtener más información.

Así que esto:

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

Se convierte en:

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

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

Véalo funcionando en este plunker actualizado.

Otro problema que noté fue HTML no válido. Hay tres líneas en el menú de hamburguesas que tienen una comilla doble adicional después del atributo class . Entonces estas líneas:

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

Debería actualizarse así:

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

En lugar de esos tres intervalos, podría considerar usar el nombre de la clase glyphicon-menu-hamburger para utilizar el ícono del menú Bootstrap (consulte la sección Componentes para obtener más información sobre ellos).

<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
0
Sᴀᴍ Onᴇᴌᴀ 14 dic. 2016 a las 22:40
¡¡Muchas gracias!!
 – 
sumo
19 dic. 2016 a las 21:25