Well, my problem is that I do not know why I'm getting this error ... I'm 99% sure that the scripts are loaded in the right order ... and I have another application using the attribute resolve of $routeProvider It works and I do not understand why this project does not work. What I am looking for is that before loading the index.html get data from a database, and that, after obtaining that data, load the index.html , since I use that data to generate a drop-down menu in the bar navigation with links to another page that expand the information displayed in that navigation bar (a drop-down menu of products that tells you the products and when you click on one it takes you to another page with a more detailed report of the product).
I leave the html and js files I use:
index.html:
<!DOCTYPE html>
<html ng-app="tangoInfinito">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tango Infinito - Todo el tango que estas buscando</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/bootstrap-social.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link rel="icon" type="image/png" href="favicon32x32.png">
<link rel="shortcut icon" type="image/x-icon" href="favicon32x32.ico">
<script src="js/angular.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/app.js"></script>
<script src="js/Controllers/ProductosController.js"></script>
<script src="js/Services/ProductosService.js"></script>
<!--<script src="js/app-route.js"></script>-->
<script src="js/Filters/IdFilter.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-controller="ProductosController">
</body>
</html>
app.js:
(function() {
var app = angular.module("tangoInfinito", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "main.html",
controller: "ProductosController",
resolve: {
datosResolve: ["ProductosService", function(ProductosService){
var datos = ProductosService.getDatos();
console.log(datos);
return datos;
}]
}
})
.when("/index.html", {
templateUrl: "main.html",
controller: "ProductosController",
resolve: {
datosResolve: ["ProductosService", function(ProductosService){
return ProductosService.getDatos();
}]
}
})
});
})();
ProductosService.js:
(function() {
var module = angular.module("tangoInfinito");
var ProductosService = function($http) {
var getDatos = function() {
return $http.get("php/get-productos.php").success(function(response) {
console.log(response);
return response;
});
};
return {
getDatos: getDatos
};
};
module.factory("ProductosService", ProductosService);
}
)();
ProductosController.js:
(function(){
var module = angular.module("tangoInfinito");
var ProductosController = function($scope, ProductosService, datosResolve) {
var datos = datosResolve;
$scope.productos = [{},{}];/* Esto es un array de objetos */
$scope.rubros = [ "Musica", "Baile", "Otros"];
$scope.tipos = [{},{}]; /* Esto es un array de objetos */
var armarLista = function() {
var lista = [];
var rubrosTemp = $scope.rubros.slice(0);
var tiposTemp = $scope.tipos.slice(0);
for(var i = 0; i < rubrosTemp.length; i++) {
var rubro = rubrosTemp[i].toUpperCase();
lista.push( {descripcion: rubro, isHeader: true} );
for(var j = 0; j < tiposTemp.length; j++) {
if(tiposTemp[j].rubro === rubrosTemp[i]) {
lista.push( {descripcion: tiposTemp[j].tipo, isHeader: false} );
}
}
}
return lista;
};
//Lista para armar el menu desplegable (menu productos) de la barra de navegación
//Esta lista es tomada por index.html y productos.html
//(en un script al final de la página) para armar el menu dinamicamente
$scope.navbarList = armarLista();
};
module.controller("ProductosController", ProductosController);
})();
I hope you can help me ... Thanks in advance