unidades:07_rutas:02_routeprovider

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js'></script>
  <script src="//code.angularjs.org/1.2.19/i18n/angular-locale_es-es.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>Esto es el titulo y no cambia</h1>
  <ul>
    <li><a href="#/pagina1">Ir a la pagina 1</a>
    </li>
    <li><a href="#/pagina2">Ir a la pagina 2</a>
    </li>
    <li><a href="#/pagina3">Ir a la pagina 3</a>
    </li>
  </ul>
  <div ng-view></div>

  <h3>Esto es un pie y no cambia</h3>

</body>

</html>

var app = angular.module("app", ['ngRoute']);


app.config(['$routeProvider',function($routeProvider) {
  

  $routeProvider.when('/pagina1', {
    templateUrl: "pagina1.html",
    controller: "Pagina1Controller"
  });
  
  $routeProvider.when('/pagina2', {
    templateUrl: "pagina2.html",
    controller: "Pagina2Controller"
  });
  
  $routeProvider.when('/pagina3', {
    templateUrl: "pagina3.html",
    controller: "Pagina3Controller"
  });  
  
  $routeProvider.otherwise({
        redirectTo: '/pagina1'
  });   

}]);


app.controller("Pagina1Controller", ["$scope",function($scope) {
   $scope.mensaje="Texto cargado desde el controlador Pagina1Controller";
}]);

app.controller("Pagina2Controller", ["$scope",function($scope) {
   $scope.mensaje="Texto cargado desde el controlador Pagina2Controller";
}]);


app.controller("Pagina3Controller", ["$scope",function($scope) {
   $scope.mensaje="Texto cargado desde el controlador Pagina3Controller";
}]);

Ejemplo básico de las rutas

<h1>Soy la pagina 1</h1> 
{{mensaje}}

<h1>Soy la pagina 2</h1>
{{mensaje}}

<h1>Soy la pagina 3</h1>
{{mensaje}}