This time I write because I have a problem in a small app of AngularJS and I am trying to connect to a controller with an example that I read in a book, but it is not showing me the variable $ scope that I declared in the controller . This is the code I am using:
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>
section2.html:
<h1>Sección 2</h1>
<p>Estas viendo la segunda sección</p>
driverseccion1.js:
miRouting.controller('miControlador', function($scope){
$scope.mensaje = 'Esta es una variable almacenada en el controlador';
})
The structure is the following: routing.html drivers / driverseccion1.js templates / home.html templates / menu.html templates / section1.html templates / section2.html
The problem in this case is that the variable $ scope.message is not showing the value assigned to it and "{{message}}" appears as follows:
Section 1 You are looking at the first section
{{message}}
Thank you in advance!