unidades:07_rutas:03_parametros

<!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/hola">Ir a la pagina 1</a></li>
    <li><a href="#/pagina2/hola/mundo?idCuenta=345&importe=678">Ir a la pagina 2</a></li>
    <li><a href="#/pagina3/rojo/34/verde/hola/azul">Ir a la pagina 3</a></li>
    <li><a href="#/pagina4/hola/mundo/cruel">Ir a la pagina 4</a></li>  
    <li><a href="#/pagina5/">Ir a la pagina 5</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/:variable1', {
    templateUrl: "pagina1.html",
    controller: "Pagina1Controller"
  });
    
  $routeProvider.when('/pagina2/:variable1/:variable2', {
    templateUrl: "pagina2.html",
    controller: "Pagina2Controller"
  });
    
  $routeProvider.when('/pagina3/rojo/:variable1/verde/:variable2/azul', {
    templateUrl: "pagina3.html",
    controller: "Pagina3Controller"
  });  
    
  $routeProvider.when('/pagina4/:variable1*', {
    templateUrl: "pagina4.html",
    controller: "Pagina4Controller"
  }); 
    
  $routeProvider.when('/pagina5/:variable1?', {
    templateUrl: "pagina5.html",
    controller: "Pagina5Controller"
  });   
  
  
  $routeProvider.otherwise({
        redirectTo: '/pagina1/nada'
  });   

}]);


app.controller("Pagina1Controller", ["$scope","$routeParams",function($scope,$routeParams) {
   $scope.mensaje="variable1='" + $routeParams.variable1 + "'";
}]);

app.controller("Pagina2Controller", ["$scope","$routeParams",function($scope,$routeParams) {
   $scope.mensaje="variable1='" + $routeParams.variable1 + "' , variable2='" + $routeParams.variable2 + "' , idCuenta='" + $routeParams.idCuenta + "' y importe='" + $routeParams.importe + "'";
}]);

app.controller("Pagina3Controller", ["$scope","$routeParams",function($scope,$routeParams) {
   $scope.mensaje="variable1='" + $routeParams.variable1 + "' y variable2='" + $routeParams.variable2 + "'";
}]);

app.controller("Pagina4Controller", ["$scope","$routeParams",function($scope,$routeParams) {
   $scope.mensaje="variable1='" + $routeParams.variable1 + "'";
}]);

app.controller("Pagina5Controller", ["$scope","$routeParams",function($scope,$routeParams) {
   $scope.mensaje="variable1='" + $routeParams.variable1 + "'";
}]);

Ejemplo de parámetros en rutas

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

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

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

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

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