Good afternoon,
I'm doing a project using angular 1.5.8 and I have a couple of doubts that I do not know how to structure it correctly, let's go to the topic, I have a controller to add an object to my project, inside this controller I have 2 more, one It is responsible for uploading a small image that would be referenced to the index of the project, and the other has the upload of 3 more images that would be seen when "entering" the page of the object, the case is that when I save the object and create the object of 0 I can not change the values of the objects that are inside this controller, so the idea would be to pass the objects of these 2 controllers to a factory and do everything with it. Here are the questions:
Would it be the best option to pass these objects to the factory and work with it or pass it to $ rootScope? If I remove these 2 controllers, I would have everything in the same controler and I would not have this problem since I would see everything from the controller, would this be the most correct? Any suggestions on how to structure and order it.
main controller:
app.controller('addVehicleConcesionario', function ($scope, $http, $timeout) {
$scope.newCarConcesionario = {
matricula: '',
miniatura: '',
foto1: '',
foto2: '',
foto3: ''
};
$scope.matvalida = false;
$scope.matocupada = false;
$scope.successSaveNewCarCon = false;
$scope.insertVehiculoConcesionario = function () {
$scope.newCarConcesionario.miniatura = $scope.miniaturaConcesionario;
$scope.newCarConcesionario.foto1 = $scope.Foto1.imageConcesionario;
$scope.newCarConcesionario.foto2 = $scope.Foto2.imageConcesionario;
$scope.newCarConcesionario.foto3 = $scope.Foto3.imageConcesionario;
$http({
url: 'http://localhost/php/newVehicleConcesionario.php',
data: $scope.newCarConcesionario,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
method: 'POST'
}).then(function (response) {
console.log(response.data);
if (response.data.save) {
$scope.successSaveNewCarCon = true;
$scope.newCarConcesionario = {
matricula: '',
miniatura: '',
foto1: '',
foto2: '',
foto3: ''
};
$timeout(function(){
$scope.successSaveNewCarCon = false;
},3000);
$scope.miniaturaConcesionario = 'to_upload.png';
$scope.Foto1.imageConcesionario = 'to_upload.png';
$scope.Foto2.imageConcesionario = 'to_upload.png';
$scope.Foto3.imageConcesionario = 'to_upload.png';
$scope.matvalida = false;
}
}, function (response) {
console.log('error' + response);
});
};
$scope.checkMatricula = function () {
$http({
method: 'GET',
url: 'http://localhost/php/concesionarioFunctions.php',
params: {id: 5, mat: $scope.newCarConcesionario.matricula}
}).then(function (response) {
if (response.data.libre) {
$scope.matocupada = false;
$scope.matvalida = true;
} else {
$scope.matocupada = true;
$scope.matvalida = false;
}
}, function (data) {
console.log('hr' + data.data);
});
}
});
this driver would be inside the controller first, it manages the upload of images
app.controller('photoController', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.imageConcesionario = 'to_upload.png';
$scope.uploadComplete = {uno: false, dos: false, tres: false};
$scope.$parent.uploadComplete = {uno: false, dos: false, tres: false};
$scope.Foto1 = {progress: 0, imageConcesionario: 'to_upload.png'};
$scope.Foto2 = {progress: 0, imageConcesionario: 'to_upload.png'};
$scope.Foto3 = {progress: 0, imageConcesionario: 'to_upload.png'};
$scope.uploadFiles = function (id, file, errFiles) {
switch (id) {
case 1:
$scope.Foto1.file = file;
break;
case 2:
$scope.Foto2.file = file;
break;
case 3:
$scope.Foto3.file = file;
break;
}
$scope.errFile = errFiles && errFiles[0];
if (file) {
file.upload = Upload.upload({
url: 'http://localhost/php/uploadPhoto.php',
data: {file: file, tipo: 4},
method: 'POST',
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
switch (id) {
case 1:
$scope.uploadComplete.uno = true;
$scope.Foto1 = {file: '', imageConcesionario: response.data.name};
$scope.$parent.Foto1 = $scope.Foto1;
$scope.$parent.uploadComplete.uno = true;
break;
case 2:
$scope.uploadComplete.dos = true;
$scope.Foto2 = {file: '', imageConcesionario: response.data.name};
$scope.$parent.Foto2 = $scope.Foto2;
$scope.$parent.uploadComplete.dos = true;
break;
case 3:
$scope.uploadComplete.tres = true;
$scope.Foto3 = {file: '', imageConcesionario: response.data.name};
$scope.$parent.Foto3 = $scope.Foto3;
$scope.$parent.uploadComplete.tres = true;
break;
}
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
file.progress = Math.min(100, parseInt(100.0 *
evt.loaded / evt.total));
});
}
} }]);
This last one would be next to the previous one inside the main one, but it would be in charge of uploading thumbnails for the index
app.controller('miniaturaController', ['$scope', 'Upload', '$timeout','$http', function ($scope, Upload, $timeout, $http) {
$scope.miniaturaConcesionario = 'to_upload.png';
$scope.uploadCompleteMiniature = false;
$scope.$parent.uploadCompleteMiniature = $scope.uploadCompleteMiniature;
$scope.uploadFiles = function (file, errFiles) {
$scope.f = file;
$scope.errFile = errFiles && errFiles[0];
if (file) {
file.upload = Upload.upload({
url: 'http://localhost/php/uploadPhotoMini.php',
data: {file: file, tipo: 0},
method: 'POST',
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
$scope.miniaturaConcesionario = response.data.name;
$scope.$parent.miniaturaConcesionario = response.data.name;
$scope.f = '';
$scope.uploadCompleteMiniature = true;
$scope.$parent.uploadCompleteMiniature = $scope.uploadCompleteMiniature;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
file.progress = Math.min(100, parseInt(100.0 *
evt.loaded / evt.total));
});
}
}
}]);
here is the html:
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12" ng-controller="addVehicleConcesionario">
<div class="text-center center-block">
<form name="newVehicleCon" novalidate class="form">
<fieldset>
<legend>Insertar Vehiculo en el Concesionario</legend>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Matricula</span>
<input type="text" placeholder="Matricula" aria-describedby="basic-addon1" class="form-control" ng-change="checkMatricula()"
name="matriculaCon" required
ng-model="newCarConcesionario.matricula"/>
<span ng-show="matvalida" class="input-group-addon" tooltip-placement="right" uib-tooltip="Matricula libre"><span class="glyphicon glyphicon-ok"></span> </span>
<span ng-show="matocupada" class="input-group-addon" tooltip-placement="right" uib-tooltip="Matricula ocupada"><span class="glyphicon glyphicon-remove"></span> </span>
</div>
<div class="text-left" ng-show="newVehicleCon.matriculaCon.$invalid">
Campo Requerido
</div>
<br/>
<div class="col-lg-3" ng-show="newVehicleCon.descripcionCon.$invalid">
<div class="thumbnail">
<img ng-src="http://concesionario.antonioextremera.com/img/ventaVehiculos/miniatura/{{miniaturaConcesionario}}"
ng-show="miniaturaConcesionario.length>0"
class="img-responsive" ng-bind="miniaturaConcesionario"/>
<div class="caption">
<h3>Miniatura</h3>
<div ng-show="!uploadCompleteMiniature">
Sin imagen.
</div>
<br/>
<p>
<button type="file" ngf-select="uploadFiles($file, $invalidFiles)"
accept="image/*" ngf-max-height="150" ngf-max-width="320"
ngf-max-size="3MB">
<span class="glyphicon glyphicon-folder-open"></span>
</button>
<br><br>
File:
<div style="font:smaller">{{miniatura.file.name}} {{errFile.name}} {{errFile.$error}}
{{errFile.$errorParam}}
<div class="progress" ng-show="miniatura.file.progress >= 0">
<div class="progress-bar" role="progressbar" aria-valuenow="{{miniatura.file.progress}}"
aria-valuemin="0"
aria-valuemax="100" style="width:{{miniatura.file.progress}}%;"
ng-bind="miniatura.file.progress + '%'">
{{miniatura.file.progress}}%
</div>
</div>
</div>
{{errorMsg}}
<div ng-show="uploadCompleteMiniature">
<button class="btn btn-danger" role="button"
ng-click="deleteImageConcesionario(0,0,miniaturaConcesionario)"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
</div>
</div>
</div>
<div ng-controller="photoController">
<div class="col-lg-3">
<div class="thumbnail">
<img ng-src="http://concesionario.antonioextremera.com/img/ventaVehiculos/{{Foto1.imageConcesionario}}"
ng-show="imageConcesionario.length>0"
class="img-responsive"/>
<div class="caption">
<h3>Foto 1</h3>
<div ng-show="!uploadComplete.uno">
Sin imagen.
</div>
<br/>
<p>
<button type="file" ngf-select="uploadFiles(1,$file, $invalidFiles)"
accept="image/*" ngf-max-height="720" ngf-max-width="1280"
ngf-max-size="3MB">
<span class="glyphicon glyphicon-folder-open"></span>
</button>
<br><br>
File:
<div style="font:smaller">{{Foto1.file.name}} {{errFile.name}} {{errFile.$error}}
{{errFile.$errorParam}}
<div class="progress" ng-show="Foto1.file.progress >= 0">
<div class="progress-bar" role="progressbar"
aria-valuenow="{{Foto1.file.progress}}" aria-valuemin="0"
aria-valuemax="100" style="width:{{Foto1.file.progress}}%;"
ng-bind="Foto1.file.progress + '%'">
{{Foto1.file.progress}}%
</div>
</div>
</div>
{{errorMsg}}
<div ng-show="uploadComplete.uno">
<button class="btn btn-danger" role="button" ng-click="deleteImageConcesionario(1,1,Foto1.imageConcesionario)"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="thumbnail">
<img ng-src="http://concesionario.antonioextremera.com/img/ventaVehiculos/{{Foto2.imageConcesionario}}"
ng-show="imageConcesionario.length>0"
class="img-responsive"/>
<div class="caption">
<h3>Foto 2</h3>
<div ng-show="!uploadComplete.dos">
Sin imagen.
</div>
<br/>
<p>
<button type="file" ngf-select="uploadFiles(2,$file, $invalidFiles)"
accept="image/*" ngf-max-height="720" ngf-max-width="1280"
ngf-max-size="3MB">
<span class="glyphicon glyphicon-folder-open"></span>
</button>
<br><br>
File:
<div style="font:smaller">{{Foto2.file.name}} {{errFile.name}} {{errFile.$error}}
{{errFile.$errorParam}}
<div class="progress" ng-show="Foto2.file.progress >= 0">
<div class="progress-bar" role="progressbar"
aria-valuenow="{{Foto2.file.progress}}" aria-valuemin="0"
aria-valuemax="100" style="width:{{Foto2.file.progress}}%;"
ng-bind="Foto2.file.progress + '%'">
{{Foto2.file.progress}}%
</div>
</div>
</div>
{{errorMsg}}
<div ng-show="uploadComplete.dos">
<button class="btn btn-danger" role="button" ng-click="deleteImageConcesionario(2,1,Foto2.imageConcesionario)"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="thumbnail">
<img ng-src="http://concesionario.antonioextremera.com/img/ventaVehiculos/{{Foto3.imageConcesionario}}"
ng-show="imageConcesionario.length>0"
class="img-responsive"/>
<div class="caption">
<h3>Foto 3</h3>
<div ng-show="!uploadComplete.tres">
Sin imagen.
</div>
<br/>
<p>
<button type="file" ngf-select="uploadFiles(3,$file, $invalidFiles)"
accept="image/*" ngf-max-height="720" ngf-max-width="1280"
ngf-max-size="3MB">
<span class="glyphicon glyphicon-folder-open"></span>
</button>
<br><br>
File:
<div style="font:smaller">{{Foto3.file.name}} {{errFile.name}} {{errFile.$error}}
{{errFile.$errorParam}}
<div class="progress" ng-show="Foto3.file.progress >= 0">
<div class="progress-bar" role="progressbar"
aria-valuenow="{{Foto3.file.progress}}" aria-valuemin="0"
aria-valuemax="100" style="width:{{Foto3.file.progress}}%;"
ng-bind="Foto3.file.progress + '%'">
{{Foto3.file.progress}}%
</div>
</div>
</div>
{{errorMsg}}
<div ng-show="uploadComplete.tres">
<button class="btn btn-danger" role="button" ng-click="deleteImageConcesionario(3,1,Foto3.imageConcesionario)"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<div ng-show="matocupada" class="alert alert-danger">
La matricula <b>{{newCarConcesionario.matricula}}</b> esta ocupada, revise el campo.
</div>
<button type="button" ng-click="insertVehiculoConcesionario()" class="brn btn-primary form-control" ng-disabled="!newVehicleCon.$valid || !matvalida || !uploadComplete.uno || !uploadComplete.dos || !uploadComplete.tres || !uploadCompleteMiniature"><span
class="glyphicon glyphicon-floppy-disk"></span> Insertar Vehiculo
</button>
<br/>
<div ng-show="successSaveNewCarCon" class="alert alert-success">
Vehículo guardado correctamente.
</div>
</form>
</div>
</div>
Thank you very much,
a greeting.