Fjallbacka Fjallbacka - 2 months ago 10
AngularJS Question

Separating angular modules into components

I first had everything into one app.js but this is not a good approach. So I wanted to separate into different files, and I thought the best way would be making 3 different files (since I just have controllers and services).
The main entrance point app.js and then controllers.js and services.js
So after reading it is supposed to define the main module, and then use the others as dependencies, so I did it. But it isn't working.
Here are the file definitions:

app.js:

angular.module("personasApp", ["ngRoute", "personasApp.services", "personasApp.controllers"])
.config(function($routeProvider) {
$routeProvider
.when("/", {
controller: "ListController",
templateUrl: "list.html",
resolve: {
personas: function(Personas) {
return Personas.getPersonas();
}
}
})
.when("/facturas/nueva", {
controller: "CargarFacturaControlador",
templateUrl: "facturas-form.html"
})
.when("/personas/nueva", {
controller: "NuevaPersonaControlador",
templateUrl: "contact-form.html"
})
.when("/personas/:personaId", {
controller: "EditarPersonaControlador",
templateUrl: "contact.html"
})
.otherwise({
redirectTo: "/"
})
});


controllers.js

angular.module("personasApp.controllers", ["ngRoute"])
.controller("ListController", function(personas, $scope) {
$scope.personas = personas.data;
});
.controller("CargarFacturaControlador", function($scope, $location, Facturas) {
$scope.atras = function() {
$location.path("#/");
}

$scope.cargarFactura = function(factura) {
Facturas.cargarFactura(factura).then(function(doc) {
var facturaUrl = "/facturas/" + doc.data._id;
$location.path(facturasUrl);
}, function(response) {
alert(response);
});
}
})
.controller("NuevaPersonaControlador", function($scope, $location, Personas) {
$scope.atras = function() {
$location.path("#/");
}

$scope.guardarPersona = function(persona) {
Personas.crearPersona(persona).then(function(doc) {
var personaUrl = "/personas/" + doc.data._id;
$location.path(personaUrl);
}, function(response) {
alert(response);
});
}
})
.controller("EditarPersonaControlador", function($scope, $routeParams, Personas) {
Personas.getPersona($routeParams.personaId).then(function(doc) {
$scope.persona = doc.data;
}, function(response) {
alert(response);
});

$scope.toggleEdit = function() {
$scope.editMode = true;
$scope.contactFormUrl = "contact-form.html";
}

$scope.atras = function() {
$scope.editMode = false;
$scope.contactFormUrl = "";
}

$scope.guardarPersona = function(persona) {
Personas.editarPersona(persona);
$scope.editMode = false;
$scope.contactFormUrl = "";
}

$scope.borrarPersona = function(personaId) {
Personas.borrarPersona(personaId);
}
});


services.js

angular.module("personasApp.services", ["ngRoute"])
.service("Facturas", function($http) {
this.cargarFactura = function(factura) {
return $http.post("/facturas", factura).
then(function(response) {
return response;
}, function(response) {
alert("Error cargando factura.");
});
}
})
.service("Personas", function($http) {
this.getPersonas = function() {
return $http.get("/personas").
then(function(response) {
return response;
}, function(response) {
alert("Error intentando encontrar personas.");
});
}
this.crearPersona = function(persona) {
return $http.post("/personas", persona).
then(function(response) {
return response;
}, function(response) {
alert("Error creando persona.");
});
}
this.getPersona = function(personaId) {
var url = "/personas/" + personaId;
return $http.get(url).
then(function(response) {
return response;
}, function(response) {
alert("No se pudo encontrar esta persona.");
});
}
this.editarPersona = function(persona) {
var url = "/personas/" + persona._id;
//console.log(contact._id);
return $http.put(url, persona).
then(function(response) {
return response;
}, function(response) {
alert("Error al editar esta persona.");
console.log(response);
});
}
this.borrarPersona = function(personaId) {
var url = "/personas/" + personaId;
return $http.delete(url).
then(function(response) {
return response;
}, function(response) {
alert("Error al borar esta persona.");
console.log(response);
});
}
})
);


And from my index.html I use the script app.js

Answer

And from my index.html I use the script app.js

You definitely should include all files to HTML page, if you want to make them work. In case you added single files, your services.js and controllers.js just will not be executed.