En esta ocasión escribo por que tengo un problema en una pequeña app de AngularJS y es que estoy intentando conectarme a un controlador con un ejemplo que leo en un libro, pero no me esta mostrando la variable $scope que declaré en el controlador. Este es el código que estoy usando:
routing.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rutas</title>
<script type="text/javascript" src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.6.9/angular-route.min.js"></script>
<script src="controladores/controladorseccion1.js"></script>
<style>
ul{margin: 0; padding: 0; margin: auto; width: 400px;}
li{float: left; height: 30px; list-style-type: none; width: 100px;}
a{display: block}
h2{color: red}
div{clear: both}
</style>
</head>
<body data-ng-app="routingApp">
<div id="menu" data-ng-include="'plantillas/menu.html'"></div>
<div id="contenedor" data-ng-view></div>
<script>
var miRouting = angular.module('routingApp', ['ngRoute']);
miRouting.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/seccion1', {
templateUrl: 'plantillas/seccion1.html',
controller: 'miControlador'
}).when('/seccion2', {
templateUrl: 'plantillas/seccion2.html',
}).otherwise({
redirectTo: '/',
templateUrl: 'plantillas/inicio.html',
});
}]);
</script>
</body>
</html>
tienda.html:
<h1>Tienda de pantalones</h1>
menu.html:
<ul>
<li><a href="#!/">Inicio</a></li>
<li><a href="#!/seccion1">Sección 1</a></li>
<li><a href="#!/seccion2">Sección 2</a></li>
</ul>
seccion1.html:
<h1>Sección 1</h1>
<p>Estas viendo la primera sección</p>
<h2> {{ mensaje }} </h2>
sección2.html:
<h1>Sección 2</h1>
<p>Estas viendo la segunda sección</p>
controladorseccion1.js:
miRouting.controller('miControlador', function($scope){
$scope.mensaje = 'Esta es una variable almacenada en el controlador';
})
La estructura es la siguiente: routing.html controladores/controladorseccion1.js plantillas/inicio.html plantillas/menu.html plantillas/seccion1.html plantillas/seccion2.html
El problema en este caso es que la variable $scope.mensaje no esta mostrando el valor que le asigne y aparece "{{ mensaje }}" de la siguiente manera:
Sección 1 Estas viendo la primera sección
{{ mensaje }}
De antemano muchas gracias!
$routeProvider.when('/seccion1', { templateUrl: 'plantillas/seccion1.html', controller: 'miControlador' })