[AngularJs] placer un watcher (surveillance) sur un objet complet JSON

angularjs-300x300
Introduction

Si on veut surveiller un objet JSON en temps réel, et pas seulement un ensemble clef valeur, la syntaxe est différente .
RAPPEL : Un objet Json peut contenir tout un formulaire et des tas de données diverses, en TEMPS REEL, avec angularJs et le 2 ways binding. Un watcher peut servir à sauver un form en local Storage, au cas ou la personne pars de l’app pendant quelques temps .

Le code :

Sur un objet de ce type :

 $scope.form = {
        name: 'my name',
        surname: 'surname'
    }

Le watcher -> Ajouter true:
Call $watch with true as the third argument:

$scope.$watch('form', function(newVal, oldVal){
    console.log('changed');
}, true);

Lien :
https://stackoverflow.com/questions/19455501/watch-an-object

Publicités

[AngularJs] Filtre qui calcule l’age d’une personne en fonction de la date de naissance .

angularjs-300x300
Introduction

un filtre qui calcule l’age d’une personne en fonction de sa DDN

Le code :

app.filter('ageFilter', function() {
     function calculateAge(birthday) { // birthday is a date
         var ageDifMs = Date.now() - birthday.getTime();
         var ageDate = new Date(ageDifMs); // miliseconds from epoch
         return Math.abs(ageDate.getUTCFullYear() - 1970);
     }

     return function(birthdate) { 
           return calculateAge(birthdate);
     }; 
});

Utiliser dans une vue:

{{ footballeur.date_naissance | ageFilter }}

[Json] Encoder toutes les photos d’une application en base64

angularjs-300x300
Introduction

Ouiiin , J’ai Pas envie de stocker les photos des gens sur mon server au format JPEG ou BMP ou TIFF etc … ?

Il faut alors Encoder en Base 64 toutes les photos, puis les placer en base de donnée.

Code Compatible big data ou relationnel avec un bouton qui permet lupload, et le convertisseur base 64 …
Pour encoder une image en ligne : https://www.base64-image.de/

Le Code :
Dans la vue Html, un img src pour afficher et un boutton pour uploader :

// Limage 
<img src="{{footballeur.photo ||'defaut.png'}}" />

// Le bouton 
<div id="upload_button">
	<label>
	<input name="inputFileToLoad" id="inputFileToLoad" ng-model="logo"  type="file"  onchange=""  /> </input>
	<span class="btn btn-primary">Modifier la photo</span>
	</label>
</div>

Le code Front
Le code AngularJs (version $scope)qui permet de récupérer une photo, et le convertit en base 64 , ensuite, il ne reste plus qu’à le mettre en bdd big data ou relationnelle.

// GESTION UPLOAD PHOTO 
 $scope.encodeImageFileAsURL = function() {
		
		var filesSelected = document.getElementById("inputFileToLoad").files;
		if (filesSelected.length > 0) {
		  var fileToLoad = filesSelected[0];

		  var fileReader = new FileReader();

		  fileReader.onload = function(fileLoadedEvent) {
			
                        var srcData = fileLoadedEvent.target.result; // <--- data: base64
			
			$scope.footballeur.photo = srcData ; // Affiche la photo en temps réel dans la vue
			$scope.$apply();
			

		  }
		  fileReader.readAsDataURL(fileToLoad);
		}
	  }
	  $(document).on('change', 'input[type="file"]' , function(){
		$scope.encodeImageFileAsURL();
	
		// R?cup?ration des donn?es de la photo apr?s clic sur UPLOAD
		var file = this.files[0];
		var name = file.name;
		var size = file.size;
		var type = file.type;
	
	}); 

Explication : $(document).on fait office de watcher quand on uploade une photo avec le button . $scope.footballeur.photo contient ensuite la photo coenvertie au format base 64 du footballer Lionel Messi, par exemple, ça ressemble à ça :

 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBuRXhpZgAASUkqAAgAAAABAGmHBAABAAAAGgAAAAAAAAABAIaSAgA6AAAALAAAAAAAAABDUkVBVE9SOiBnZC1qcGVnIHYxLjAgKHVzaW5nIElKRyBKUEVHIHY4MCksIHF1YWxpdHkgPSA3NQoA/9sAQwAIBgYHBgUIBwcHCQkICgwUDQwLCwwZEhMPFB0aHx4dGhwcICQuJyAiLCMcHCg3KSwwMTQ0NB8nOT04MjwuMzQy/9sAQwEJCQkMCwwYDQ0YMiEcITIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy/8AAEQgBWwE9AwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A8CoooqhBRRRQAUUUUAFFFFABRRRQAUoViCccDqaljt3ljJQEup5XHJrR07T5JW2cqzdivBH+SfyFJtDsZIBPSnmJ9pYDIAzW+/hq/hu18uI5bJUbchiOw9RV5PDN2bWe6hgMkS/62Mj5lz/n9KnnQWZysUe9PY9fb3pI4zl0I5xj8a3oNAn8vz4FeWFsblUZYfh6Vqx+FpbqBpFRoz8oYOMY980OaGotnElGyeOnWrVvZPNFKADvCeYox1Uda6G48J6hY3flvbt5bLuUE8AH0PSpbfTZdKlVpYnCEkgnO1h7H39RRzoOVnItG3YfdOMVGVIGTXWXnh+SaTzrH7m0OmWB4/u571mNpUs0TuqEEfM4C5x/nH86fMhWMWip2tXRgAQSQCMdxTHQjHFUIjxRTgCTgdaGHbFADaKMUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABiilpMUAGKKWkxQAYoxS0UAJiilpKAFCsxAUEk9hUiQMy7iOCMj3+lPtlYOsiOQynPAx+tdNp9tEshP7phLkmBsjzPxxjPuDUuVhpXJdA0u3ltirSL8/LcAhD785AroYtMtIzGUlMbBieuMntj27YqojQWYDxIYznoQO3Tn/APXUE9+JySH2MeSOvNc7cmzVWOjS++yx7PLSWIgDhR84H9aki123EqyxqVJ4PAG4dq4ptQlifBcqR0KngVFLqhIKtz05HekoNj5jt5tYtvtKzWypk/LKhTAatLT9QtpAzwKsbNkFAeCR2xXmSaqFdjuI3dR1qxBq0sEqmNuCQePUUOmwUj1VWgu7famwxgAiNuSPYe1Z93BbWVyXESqpALKB972IPB+vXiuIi1xo7sMrEOG3r836V0ra3DqYXzk3Hb93PX6elTZxHoy5DpdldQxYUwx5L/KNvPX5T9fbvVifTre4ky1sS4X/AI+FQgtzjDEcD+mKxbS7WxAQTStbnJUSHO0+g9K1vOljLXtszB1iBeNWIBX1A5/rTuKxz2t+DhaXBvrFQbcnEy7cqmeCf61xeoaJPFeONgXPOP8ACvSLfXo5XmSMsyzD50dsFDn8sVl3kSyu8d15S7CSqsMZ47HscY5/p01UmiXG551NZyQqAiEu3H1FUzGwbBzn0xXf32jwACbBBU7Qhb5u3Tv+lctd20ks9zNMG3sxwegJJ/8ArmtIyuQ42McqVOD1puKnkj+Zick7sVEyMpwVI9eKsQ2jFOxxSUCExRilooATFFLS0ANxRilooASijFGKACijFFABRRRigBaMUYpaAEooxRQAUUUYoAKfGqs4DEBT3NMxU9usLPtmBAPccEUmBqaZYpLNtEkasP4SuSa6xlTTkZY49jheoG4H8O361kaXp4KL5t07IOVUZB/Tg1dvcI2FOMDuOf51zzd3Y1irIz7u9MwbBKHt6flWa0hUbmZs064wWbD1VLfws24HrVxWgrj/ALQSRg/1pwkDDlgD71AI1HIJoKgjA4/pVkiyjH1HSo1mePkZ45H1qMyjGxu3Q0wk460AXzdeZGrA4YYyPSrFtq8lvPG2ThPescFlY+hoZmzScQudf/bMZjdScqegzWxp+tB7dUaT54z+7fPK150sxxgk9OKmivJImBUke1Q4aaFKTO71a7t5pS0yCIlcxSR+ndTWZBq7pI8UspZRgB+CenH+fescXsxQPvB44J5x2/lVWWdpn3SLGHyMlUC/yxTUdNQudVb3gdAASSp4AGQc8dOnTFSz6Qb543e4hRAMMNvb0rnEvSFUlicYxn/61ai3zIbTe7GEjcQBytTZgQ3umwrOEty5KjAYrk/h6frWDNbkFj94+7ZrsHtRHG0zu/7xMbw2cg+3Y1jalBHHENhZVJ4zhgaqMgaOZYHdg0mKnuCjSEK+76Lioa1RmJijFLijFMBMUtGKMUAJiilxSYoAKKMUYoAKTFLRigBMUtGKMUALRRRQAUmKWigBMUtFGKACrNlB5twvKgZ5LDOKrYq3YBXuVB3Be+0/17UnsNbnfWKm0sgBISvQRxxjn8ewrH1S4XJyFQf3Q2avyXAi06NYcIzDBIPJrEuDEgJLFmPoc1zpa3Nm9CkzAggKfrUJZB2GfenSuXydu0D0qtsLHJBJrRGYO+OgqLzS3Uk+9SiNvTNH2aVv4SKdwsyEru60BTnmrkdjIe351YTTpWIGCSfSi4crKCxlhgKalS0dh93mt2x8O3c7BRDJ7EDiuts/A0rJGZgqg+h5qXNIrkbPNDZvgkL061F5bYzivXJvBMAjwXPmf3j3rktR8JXlqT+7LR/3lHFCmmDptHJo7BcdqVl3DIPNX5NMlhba6svuRULRNCOc/wDfNVdE2I7bIchywDfpWsEeQIy4UJwwHIcZ4P1rLExQghcnPerlreMZByAw4FJ3BG/bPHDayyBWlRgAYXOVQ5/MimMIb4/vYhF8vDR1c0+RJLeNZEC7wRgD/Oagm06K1mZxOZEPIUMVIH0IA/Ws7oo4m+tpLa4ZJOmcjJ7VWre8S2iW94rbpBIQMhl/r/8AWrDroWxDGUYp1JimISinUUgG0mKfRQIZRTsUUAMxS0uKWgBuKMUuKKYCYoxS0UAJijFLRQAmKWjFGKACrFtPJFIuwgEdOOKhoBwT60gN6K5YwkPLvfnJ7D2qpLJuJbpnpTrKPdau7HABxjufeqkshaQgdB0rOxdyYsQgUHLN1Fa1vpreVuYEu5AVQOTmquhWEuo6rDCi5DHOSM8CvUrfSltrsFY1c28W4ZHLyNwDn2ANROdjWnC5yMHhOeR0Tyv3jchB0Ueprcg8FIBgyEv/ABNjpXa2OmMibAf3jcyyZ6n/AD09K2YNMUoMDESjp3as+Zs35UjzVfAZK7hNgH1XNbdn4GggKv5gc4/iFdw0KqAoUbeKc8SKoyBSdw5UYdppMdnEMRqMVYkhB4CKFx0xWsUjEY4HNQypHjIPNIZktbKxIfn69PyqCZFGVwDnjBHStWQKo9RWPcnPKkZzRctK5kX2h2d4MCJVIHP/ANauVv8AwxJGHeOIle2K7qJt7HK5zxV77OkseVK49OfQVcWZTijw+60oxsw2kFTtP1qvb2fmk7Tye47H3r0zxbooi/eL96VedvGDXmNzM9pqE8aH5WbH/wBetdTmehu6Jf7cQXBcqG+YAnhh049+/StPXrLzIEaILEycsd+eP8PpXMxyAnz2iVznLgcH65rqYtVglijLCZY3QKyfe3HpzkY7emalxC5y+r2izWSzFCHQhW2knA9frXM16Nc2kV3oF6Edo5IkLKc4VhjPHt/nFed4xn2rSD0IYyinUVYhtFOoxQA3FGKfQaQDKTFPxRQIZijFPxRQAykp+KTFO4EdFGKMUwCjFFLQAUUAU6gBMUY5pcUUAWYLgiPyu3rUcMJkuNrNgA8mmRqWkUKOTjArRKAyqoAG0AH3+tS9Bo73wHZRQu985+6hC57Dj/CvRLK3kkheVkHmytuIP8I42/oP1rlPB9kq6WskgDEtleOld3ZDejY6ZGDXHN3Z3U1aJagtti7SR6nnqavpKir5a8ge1QIOOgzUgQtnrmmthvUZLJlhgdBSbsgA4JpzwOW74xUfl7fXNTqPQcygoeeoqnKSOAQT6Gr2w7cEGoJoNu4/maNwVjKupn24IwAO1ZxJfJxVy8DKzAcVQEiHIyCaVjXSwW6orklSeMjHHNalgzSXHzIVzx65+lUrfYc78nt1rRtHBugoIVgQRk5FaQ3MamwzxZp6yaR5kas8kRzgD868C1gGbUGOw7y3TPU19GazObexeQFQ4BHlgcN+v+c14XrsJjuZZViCl8Accr3zW/U5HqjBtWlVlVW6jBBGcitWGeK4gjCtiaFMNydpXkbsetZRjaMJuLb+mQff/Amr2mEMZpCvQFhnscfy61RmdVoySajpFxZKTHcxx4Rm6Pjkgcehx+Nec3SNHPIsqKjhsMRx/OvUtLkNrNFNC+QCZGiHUE8Efpx+FeeeIZIpdauJoCdrtuzjGD9BST94Zk0U6irAbilp1JSEJSU+kpAJSUtFACYopcUmKAEoxTqTFMCDFFLikxVCExSgUUoFAC0YoxS4oAKMUYpaAJ7Nts+eOhOT2q5bL5lwoOSWOfxqra4DNnBJU4rY8OwCfWIImPVxnPbmok9CorU9f0aGO30mEdMov/166GzP7gfpWBLPFAioSAikDmqV14sWzHlwRhf9vOa4Vdu53qyid/CAF+ZgPx5q1Gdh+X5q8jPjyeKQE5J77myKdF8SriJgRjPfJrZaIhtdz183EYUllwfSonvLfeoCck155B46S4RXJ3E88jvW5p+qJfMrLnI681LmCin1OpeaCIhic57VBNJFJG3p7VgarqDRzoOg+tZF/wCJvsYC4B38H2pKd3YrksW7ic+fcAnIA4rMhYl2PQe9YV94sWKVmQrWXJ4xbIJGT7Gq5Wy/aRR3Bd9y7QSQe1bGnNmVZGySp3D3rzCPxZJn92Sh9TzW3pfjYg+XOiFmB+YHpRFNMzlJSVkenapaxSWyGVA7SEbRjkn/AD/KvHfFumtBdSyxBigHOa9l0nXLTVNDWSJka4hB+X19K4vxHbSXzy+aoLMNxVR0zWzfU5Ut0zx0ckABdwO7BqSBxEyEDCu5BHSpdTs/st26/dweD3IrMaUmYbjlSfyNNO5NjvNEu4jdhH3q0uFVwR6jA+lcFref7UnLDDCRl6e9dR4dlgjmjmm+cBh97oP88Vy+tyiTVrohdhMrEoT0OaI7gZ2KMUuKMVbEGKWjFGKQCYpMU7FJigQUUUUAJikxTqTFACYoxS0UAQUmKWjFWIKAKAKXFABS0tJQAUUYpwoAdGxD5A79q19Cm+zaxbyE/wAYya7zwd4E0LX/AAtHdSLPLcvkSSLLt8t+gCrjHHuDmuLvNIudI1p7O4UrLE4YMRjIB61lJp6GqhJJM9SuYvtLouTtIzxSTwaXaWxEyxHB5z2rSs7TzoEfkNtHSsLWvDzXjMS88g6lEOMiuVaHXbQ5rUoLTVnZdLs5ZXXqYgSo/HpXMX1jdWL7ZEiRz/CZlJH4A16BZeHr/UI/stzObOyRP3cEOQP+BHjNef3Gmatayy2EkEv3sMPK3HrnIOMjoOldEY6XMZb6FeLUbiB8OpC98GvWfhnfNqgljK8R/wAXrXJWHg+4bTLcPbutw7E7WXjb7ivUPB3hyLQyzpH5byIGdM9G9KiUUyoJoteJLJIIvMVucV474hv7gTt84xXtPiY5s27nBrxq4sjf3rxFgoLYJNZqKUi5XcUcdPfSOcDkdeaajSs+GUD/AHjj+ddq3hJZLtgiNFCuNh25L9jz2GM1U8R+D7zT7mC50mCZ4tg+aNDlG710ppnPKElqYsSyoMsCR6oQ1Xbb7PJwrEt9cGqdroF/GHllikiULxuOCfw61taJokt9csCofb1I4P51MtBpM3NB1GbT7lSjuFxwc16PYxHUk3IUJcgEE/Nj1ribbRJEdVz0/vV2/hyCS3eNMoMnoxxx6VEdXYqWx5b43sPsOqyRZ/2hn+VcfFE0jlDxg17R8UdFElqt+kYBVdpODXl+k6dLdXqQQx5LDLMeijpmtXoYpOT0L2hWMt06QRqSFILvt6Y9+v61L4z8F2ejadHqNnqbSyuS01pMB5iqeA4K8YzxggV2kUcGj2gt7dVkmxkL0Mj4ziuF0YXGv3Opi4PmTXUTRrkfx4O1R9CB9KyU3fQ6lh015nFUYpSCOtFbnGFFFFABSUuKSgQmKMUtFACYope1JigBMUYpcUYoAr4paKMVQgxS4oxS0DCkxS4oxQAUtIBTgKAPSPhdq76cl+CxMLOm5PTIbkfkK9E8YaNZ674efUY0X7TbqHDd2A6qfwrzX4YadJef2rIgykYiBHuWOP5GvVtYhawso4kLGOYAMccA1zTdpM7o2dNDtGgEcChznAC/pWzDZxjJ4JPt0rK06QGIEDHNdBbhSuTgUo2CWiMS70mUBhAm5D/Dnisw6LqhATLKgYn/AFh59v8AJrtSBjpj6VGcOelUSpOxzljorwyGWR9zY/AVpWrANI3XJAz6+9WbtljgOOOKz4+IPvEd6Ra11MrxJcbYWGe3Q9a81hVGvSWH3jXo15D9tuVidsBjg+tctrWhHTdSIQHaBSaKlpoXLMOwSMuWUDg9xWi+iST/ADpgnH3SeM1l6Q5eTHPB5FdfalkHTOBSjITulocjL4O1C4lORFGnQEEnj8a19L8NxaQnyOGkYfMxHNdC06bSCSpHaqUt2pIINXzISi3uVhaYkJI/GtzSvLhlWRkzg5yQDWMLlSwGattetDAGiYYpxavczqR6Gxr1tFrmjXdpjO5Pk5/i7f5968Y023bQ5pI3/wBc+Bg+n+Fegw6vIs6sGYDPCnnj1rjfHlsbaV9WiJCS/IiY6N6/l/Kiq7rQinBqRBBFdX3iOO5Zmit7Fl2qy8u/3vx6AfhWrqmixaH4kaW0jxb3Mi3UOBkBX7Z9jkfhWDoeq6nFZrHOibAPlJX5vbmuzsHfU9OMdy254CXhPYAcsv07/hWMNrHoU7xld9jxDXrZbTX7+BMbUnfb9MnFZ+a0fEEgm8Q6hIDlTcNz+NZtda2PJluxc0UlLmgQuaaaU0lAgzRSYpaADFGKWigBKKMUYoAr4pcUUtUAUAUYpaACjFHaloAQCnUmKWkwPVvg5Iiwa0jZzugfj0Hmf4iuz8QXElxHbbJ2CQuD5Y7jFcj8GBDJbaxCw/eExtnvj5uK7+90OGewunhZvNWNiqe4rmqq7uehRt7O7KmlTZCjcOK6SC5GB3rgdKuiGDdPaunguyeOn41MXYHqdAJC/O78KcJApOTxWTHdEY9aseeCvbPvVXFyjdRnB2x5HzVJFaRiAK0i7yOma4XxxrF7pSx3EMDSwtw7KcFaw7T4gL9mVnkLEjqeooTG0kdrdTx2eogMwIVvvduKs6xBa6/CJLRl88Dld2Ca8f1zxhJLNuEpIOSFXvWHD4u1b7Rvj3BR6Zz+dXFmcpxbvc9Q0e3ns9VltLyMpMvzYbjI9a7aFQIxk9K8o0TxZd6vrNkL1t8kaldzDnHoa9SjmHl+tQ9DW90F1IArVh3EoRSDnANXLuctuOMCubvrrBbGSPc1mWnZFtr5c7t5zSS6mph2j7wHWucnviG2r/OojdfMBk+v4VaRjOSN4XQCgAgk8D5TW1eRWup6GdOnjBbHmqT1BQjH58j8a5iwkDMdwLDjknpV5rm5unL2QjZorhI3Uvj93jLY/Eim3oRBXlc2k0myuLUEoFZAFIFSWSQ27Ikf3t65GffB/MZH41PFHHNY3TmUrIq7gkYz+tc/NNcRlrqRPJs7YGZmPVscgfnRBWOznTi0eM37MdQuGbG4yMSQMdSar0rtvdm7sSf1pldJ5T3HZopM0lAhaXNJRSAWikpaBC0UlFAC5ozSUUwIRS4pBThTAWkpaTFIAooxRigBaMUUtAHe/Cq7e38RTxxkb5IchWPBwRx/OvckuYGSSRme2ZT3XtXy7pOpSaTqtvfRDLQuDtzjI6Y/LNe/WOs6ZrtosyzxyQsMkbsdu/OayqLTQ6qU042OYjljttSmEJ3ReadoHTBPH6VtwXm4EjgD1rD1K7tn8RTQ2xQL5YUBfbvVuzDkoGJ9z61y6o2Wh0drM7kD16mtaON2IGBg96ytOjK4U9D0NaM+oLZKFAyT1qkPUXU7CC4sCkwAAGDkda8zv9Jh3Nb2dquCSQcA11N/qV3fK0Sh9zHaoHp61Lp/h6Vt09xuJIzyCKuLuDSseTDwxdF3kuE/dKcbR1b/AAFMCLvWAr5af7HevXo9Jcx+U3+rDE4K4/P1rh9b0Cf7STFFiJW+XAq0zN07a2F8P6XaRzebAg39GJOSa76GTdDgHnHUV5nbzSWY2nKnPJ61s2mt3EBGWLD3rOVy1JWtY6S9fYD82PYVy+oNiXgck9a2HuhdgMBk/WsnUcRj1yalDm7IwZiVbc2MnrTrabc43LkA8DPB9qdNtZ8clsH5SKfCvllSEAIHArU5jXUi3i3qoU4wr+pzzxWdaNc28MiTO0dzvYup55POPfqPyrTVWmMUQcBQCzZIOMDNadp4aTxDcvIbiS3nZSRKgyHGOART5eYuLUXcdoXiCaxYwy7JIWBDA8duma5z4ieK4Zrb+zLMbfMw8hHYDnGfrXKajrc9vPNbRu7MjlC5JAyPYiudkkeRy7sWduSSe/rWkY2WpFSrF/CGaTNGaSrMBc0ZpKKAHZozSZozQIM0UlLQAtLmmUtADs0UmaXNMCOgUUUgFoozRmgAoooxQAYpaKKACpYbiaDJilePP91sVFRQO5taBqMkevW7zSEhzsbca9etjEIwWw2BxkevavCFJVgwJyMEGvXfDerJdaXFITuY43Z9c4rnrR6o3oy3udlYTMj7WOT6VTvrqMxSTEYYnGc9Pr61HHLtuxnGe9Q3dss7hZMrkkEY6isU9DouUp/HGn2keyNQ0uR8x5H1rKv/ABu0pAWWcydiEIFdxbtb2NqkMcMexR02jJx7ikOr6bljLHEGH4VtFxsXHc8wufGd5cMsUlzLtUc5JGarHxbJGCltJMSOmQT/ADr0e71Pw+4d5IYTxxzxXO3mr6SwkENrCpz8pxmrtE0kvkco3iTziDcw4Y9GAxmr1reJdYC7sDB9GBqx/aCzFVSGPPqVGB+FW5LfzovPCqrHq2KzlY53HW9yaC52/Ln7tJfuDbsQNzfyrLExVmDZ3D+L1q20hMWPUc80kjOUr6GcBz824k9Qamh3BS3HHTPf/PP5VGzkZxg4WpLC1ku79LZWGXOOT046n17/AJ1SRBvwr9n0U3chcS3DLBECv3gDlj/IV3mgBYoIlTg7cV5pqN+154httPgKG3sMxLtzjdn5j+f8q9K8PyGRUBK5GP8A9VaQWonflPmm+ma41C4ncDe8rMcdASTVerF7G0V9cRkYZJGUj3BqvitTEM0UmKWgQZopMUtABRRRQAUuaTFFABS5pKBQAtLSUtADKKKKQBijFLRQAUuaTFGKAFooooAKKKKADFb/AIZ1o6ZdiGU5t3bJz2OMf5+lYNHIpSV1Yadnc9picSRxyhy2FDADkH0qeO9kUmWRQAR8pJxXHeD9Yc2eyclwh2j29M/57V1oWO7wg+9ncOO/pXDOLWh1xldXLK3bXEIB5BJ+71zWLqmkajLveAll5+UjOa1tNslgLmSRlJbO0+ldXbS2ixhRtcketKKbZe6PEbu31CDMbxgZOcEdKZb2V5OclST2wMV7ZJZ6ZOx82yj3MMnPNZN22nQt5aQxxjcBhRWz0JVNs4CGylg5ZTn2FWZJpUQdeuPxrpryG1iUlmPK8ACsCeBXfMeMgdP61F9QcWjMIeRyxOV6k1M4SJNm7JPel3AFgVxnjPvVB5ti5JyeCeehrRGT0JSjM+Dxk8+31qa51SPQrVpIm23kgYRk9UU8bvyA/T0qpBeRWcbXkrqFT5gAcb2z0rn4TNrWqNPKSV6tzxjjA/SqSFe51XhqDbEbpwWZz8vPv/WvTPDEp80Zxycn6V59pxjRFC8KOAPQV3GgEoyueM9q0juayjaB5D4x0aW18YamqvEVlupZIssFyCx7nA4+tc7cW01q+yeNo2IyNw6j1B7j6V13xGuxL4ivogFwJ27dCApyPzP+emZoOowPELDVYvtFg5+7uw0Tf3kPY/oe9b1IctjLDU1XfKtznvT36e9FdfqXgqPPmaPqUVyjjKxTERv+DfdP5iuWubW4s5zBcwyRSjqjqQajoKth6tL44kNFHajNBiFGKKXNABmkoooAKKKMUAKKcKaBTgKAI6KM0UgFpaQUtABRRRigYUUUUCCjFFLmgAooopoDo/Ck0ZlubRyymRdyn3H/AOuuwS8K+Xhys4f5gP0J9c155oc4t9ZtnPTftOfeu71K3eSM3dvkyxj5wvdex/CuepG7OinsdDHeNckmbDoADjtViK8KoWDEqTwv+Fcdba9GkAi2EOx5HTIqYawq2+DuCjhQTnk9awcWjSNRGvLr3lyMnmtuHH4U6S9Qwea65zlcH9DXDXt4JXL5w4PXNTDVD5CjfuI7Zq+UftbG1PqzYI3lt3XPao0vRbrvU8kHA/Cubkv9/wDF09O9VZtUySVbqMAVSgZupc27q8aVxg/IQcH+tVI5403yTELEoIb3NZS3TBSzNhBn+dUru8e6YIBiFSdqZ/WrUTJss3l5Jql0qRrtj+6iD+f1rpdPsV0+3CNjLfez1JrO0XTlhiF1KBvP3Qa3RC5PzYJFNmsI9WWbH73K4XPSux0u4KhQD071yCgRgbiAfpWxZXYjdW3AKB8x7ADrQjZ7HB/ELavjO/RenmBuPUxpn+tc/ZHv0qbXdQOpa1eXfeWRmH9P0xTbVNsYNdVR6WIy+LdbmRfFy+AM8A5qe41V7kxQXMIuYdm1wfvHrhgeoYZ69+9Uc9qgdis+5cggcYqKSuerj6n7uw+60qSKZ/s7rPEpADA8jIzgj1qlNbzW8nlzRPG4GSrjBp5lLyjcxDDuOK6LS/EAijSx1m2TUNPLj/W/ej57N1HU9MH3rZ003oeA0jlxzz29aK7bUPBNrdQLeaJfDa65NvdcMOvR+hHHfH1rk73TbzTpFju7d4iwypIyGHqCOCPcVEqcokFWij37etGKzGGKXFFLQAYpwpBS4oAhpc0lAoAcKWkFLikAYpc0UlAwooozQIKKKBQAtGKKWgAVirKw4IIIr1PRpjeabFOrjLAEexxXlyRO+do6fhXdeDrkf2cYTgmNz+v/AOs1NRaXNqL96xLrOgpMDcQnyZFxnA4auQuTfWpZJNwXsRXqzKlxA+4EOw45xXHanbAFt6HHvxWKKnHW5xjXMhzlqQzyHqxqa6gVWJqpt9q0VjJ3FaV+Ru/KkD4OT26U0jB4pPamIc8rSY3HOPStLSLA3EvmtHuRRx71StLR7u4WNFz647V3NnZJYWyx4DEDqfWhsuMLiwoqKBIAXAyBjpViFTGS2dxI5pIojuAODxnGMZNSuqqoLfxccVLOlKyEz8wVhk/4Vl+JNWFpZm2jb95Mo34PRe/4npUuoahFp9uXYjcVO1RXCXNzJfXTyynOTuPsP8K0pxvqzKrUsrII1aWQZ6k5+grTACqAKr2kWF3nqeB9KsH0qpu7PTwNF06fM92C8cnpVdg+Swx3qZ/uHJwvTNMEiqu0n8a2pRstTmx1TmkkuhSmU7yxHU8VYjYPED+BFWCqyY3qpB9OMVCIAmdhGCa2UDy3K2hZsNevNO/cZEsHHyOeeoPB7dPpya1ovEbRRtFbtHLbvjfbXABXp3BGPT/CuYugAQf4jUCElj057Y4FNTa0IbOpey0jVTvtwNMuG/h8wPCf/Zl7+v0rJ1HSLzS3AuIx5bfcmRg0b/Ruh6VVD+SdwUEelX7HXbuwciFg8LcPDKoZGGehB4I/xpSpxl6kqbMzGKXFdb/wjdtrun/b9CHlzj/WWbN3/wBhv6e9ctLFJBK8UqMkiHDIwwQfeuedOUN0aqSYzFOpKWsxkFFFFAxwNFIKWkA7NJRRQAUlLmk649+mKBXFop0cbSHCj8avR2RTDsCv1GTWsKUp7ImU0lcppEzngf5/rVqKzYAu+FQfeYnp/n2qwuATsA9zn+ZpZfmCq53tzwDgfhXR7CMV5ii3PYpSSRM+EV/LHBLdX/wrpPDE5F3sYBRIuFA6Ljpx+Jrn3gywGCD6Z6VdSRrd0lXrGQw/CuartY9fB4a8ZTfY9HD7ApzyB2GM1l39v9oZ2UkvWjbyrc28brgoygg/Wi5gB3bMk4PJrjejMJaq5wN9Z9d67WrEeBgMqCa727gDkK4PPYj+tZM1goyAFA71SZg43OSZTU9tZy3LfIhI7n0rcOnwbvmYMfbpVuCBUQqi7R3x3qmxKDuTaXYRWcSbFy7featQRfLUMD7UB21ZhPDFiQPepubxVhHiaIoQxwece9UdR1GKxiLyuNwHC/4VBq2vwWYMasGl7AHpXE3d5PfT+ZMxJPRa0jC5FSqlsPv7+XUbgs/Az8q+lFtb7yP7o+8fX2psMG4/jyfSr8SgYVRhRWsmkrI1wmGdSSnPYlwAMDpTCRupxOBTU67e7foKmCuz169TkjoEoKhWUbvTPeomUumGVcgZ44xU80gUBVOD3yKjE8UMZwMt3z3rqseDUd3chjyAQxNOyxB2/dHQ1HkyMc/hTidsXB/Cric0mRTbX4P51GsRVhgUrnmmgn1p9TFsmkKkYBqAAjNOABPFFXy8wi7peqXWmXW+3kIB+8h5DD0NdkmoaX4rUQ3kOLwAhTuCyj/dfow68NXAYBIJ49xVyGaErtlyrDo6/wCf1oV1pLYGjUvvDYgdxaXsUu3qko8lx17n5e3rWRJbzQvtkjZT9Mg/iKnudUkcqzzea68B2yDj3INEOs3MakIcD2rKVOEnoWptLUzKMUUtcZuFLSUtAhc0qqzuFRSzE4AHc0igswABJJwPc1NJvtZHiU7XX5XZT39KunTc2JysTi1trU/6TL5sg+9FFyB9W/wzUymGUOyWsMadETBcse4yew9fyzVOGzaQbpDsTryOa0VIdsQpghQA+CMAf/W/M8muyFGzMJTZA0ckLjBBkbn5Rj/9VWY4WKAzsNnp/k1IEWEEucseSzZJJ/Kqss7yvtQ4HTFbu0UKKbY+WYswiiX5j1AJ5/Wp44I4Iw7yAsevI4/WooUjgjJc8kdhyKilmZ3yGY84IycVhJ9Tupq2pOSr3ChQcEj+VPliLwygdSvFQ2+TMuePmwfyq5uCtg964qsvePp8BTUqDNrwhq8VxbpZSyBXThQT1H+ePwrs2teN4bGPfIrxi8hksboTxMVGcqw7V0Fh8QL6BFS6hWfAxvU7WP49KzlT5tUfP1OajN06iO3mtgQTKmAp4IPH5Vk3dv5s7A4256VWX4g6ZLGFlt7mNh3BDf1qhceKdKlkLh5B/wABx/Wo9nIlVIdyy9gFyQcL6imoBGgVUJPqazZfFlginyoJJGx/EcCsW98RXt4TtIiU9NvaqVNsTqRWx1M2o2lkGa4lBb+6K57UfE1xcho7b93H696xDuclnJJ9Sakjt5J22xqT+HFaKkkZc0qj5Yoi+ZmyTuJ65qeGAtyeB/eP9KsC0jgGZW3N/dHSngGQ9MKO1NytsdlLAyUr1N+wKvRVGB/OpwwRcUzcI1pvLMOpJ6Ad6hJs9LmjSQpOSvqThRUp2wplvvEfN701NsGd4y5GGOOKheRpZOcA1vFWVjza1Rzd2NkZmxz1ojtnkYEg4q3b2Zb5nBUd6nkxCmFG2t4w6s4ZMovHsAUfgaic89OKexJJOaiPXrVIwkyNhmmkY6U4jpSUGY3API4NJ8y0pFJ0qXoFxd607d9KjI9qXacCrjK+4DWUE09G2jHFNPWnrESOlOyQ+hHiloorzjoDFLRVi3hVh5kgygPC/wB4+n0pxjzMG0i1YxxwwyTzKxkddsRBwV9Wx3Pb8aVLRUQyMAAM9e1Lu+fJG9z+ntUygZ3uwJ7DPAr0qMLI5ZSuxFgMrbnYqo6Lg09pEhQqAF47Af4VHLcjG0cfh/8AXqqzM5ySSMetaykkTFXY+SYyNz79MD+lIr45A5PWmqOacvAOR9a55Ns6oRHHLElvXBqxHGo5Izj9RUOcHpkjr7ipEycDk+nv7VkztpLUl27MhckjDAjuanOHQGmxRMUAC989ehqMSGJypGOeQOfyrCornv4KfImnsxdwZTHKu5PftVCbTASTbSAjupq643DIPXvVRg6k7TWCk4lYmlTqr31f8yi9jcJ1hf8AAZqP7LOekMmf901qLNcL0PFH2uYdTmr9oeZ/Z1Du0Zq6ddP0hb8eKsJpEo5kdEH51bN1KR94/jTRvbkk0c7NI4DDLuxotbWH726Q+9DzMV2RjYvoKdsXqeabuA4FS22dCpxgrRVhiR/xMefenmQKNqDn+dJ5bsNzHavqalWEnBGVU/xfxH6DtTUbivZWSIViLtj70nYen1q4tuLWMs3LN1IOf8inrGkMe48L2XufrVSaZ53CqBj24rojGxy1LbvcSSV5m2qMD271ctrVYk3uMEnByOlOtrURoHkBAPFWFYs2846cluf8/wD1q3hDqzz6ktRr4AJY4OOvfFZtw5dgASR2qe5n+YquMDoRVTOCetW2csmMYBRgVET7U8kswHrUsVo7kdvrTUGzmlIqHntRtrVSyjAOTk0PaK2eMYq/ZsjmuZW32oKc1fa2jQAl8Z9actk80qxRAs7njHpUOIzPjiZzwKtJYuYy7DC9q2Y9MEKgMpGOmRUGpXIQCBPlVOuO7elUlyoW7MjyVj5wPxpGck/LjFSFHflunpTT14NZvctFKijNArzzpHKpdgqjJNaPlHhVwFAwM/zqpaAeeDz8o4q+hHc8+ldeGimrmNRj0iEYGOvc0Pv28E9PfHPvTscE4X3oKnd0Hbp1rusYPcq7ASTyTn60gHtVny2bknA9+lPEUa5LHJH5VEkaQKm3OcfpzUqRMzYAzjAP0qYywp95R6HJ7VGdRjQ4jUZHQ9x+NYux1QJ47NvlyRzypJzn24qURwJyZAR6+lZkt+XzkYz2zmoGuWY8nn1zWTmjsp1FE3TcxR/d69+P1qGSdJeHGccAk8qPasYzs3Un8OKBIx6k89e9YymdsMT0NHdt/iDA+h5/GmE8DkfQnBqqGYcnj8/y61KkrAY4IrFo7I1rkhDr1VgPUigDnpQDGRyMEd1Jp4WPH+sl/wC+qk2im9RRH/sH8qGjYdRj68U3y4werH8aRyo4CD8aCm7IbheMvnPYU/y1UnhVHo/Jpod8YBwPYY/pU0Nszn5sdfTrVJGai5uyQ1Tl/kG58/fbr+FWFRbc+ZIDubp7/wCHanHZAo2hCR0NUZJGmY8n5sE/WtUKqlTVuok0zTPwT7c1dtLQIvmSY9qLW0VMO5x9atbS2AQCvfBxj/PNdEI21Z5VSVxpBkGWHHf0H+earXM+MhTyOSfWn3M23hTyOtUGLMa0ucU2MJznP4UYyvByTS7P06VLHHj52+6OuKqK1OSbHwWwVRI5IPbioTeyJKUONvsKc14gXavQDH3QP6VDIFlIZR17itW10Od3uXIOS2V4I45pzOBJgE8iqkMu3ClfmWmSuUkHJyDinzaCsLcPvXBP3TxXVeFFi+z3Fw5XzvlRQewPWuQlJ8wEcg1Lb38tkwMT42847H8Kx5tblW0Ox1HU4EE8pUMYl2RjP3nPX8q47DSuZJGJJOaha8klPzsW5Jx2ye9Bd36sB9KTlcaVidiKiIHqfwFOVdy0u0/5NKwzOyKKWkrzjqJrc4cnParaSYOeCfpWepw3HcVOr11UZWVjGaLhnAx1ppuwDx/hVNiT0NRkE1u6jRmoltrxxxkDp2qF7pzxk4+tQEE+tAQk9KzdSTLSSHGYnPNNDH3565FOWEn1/CpkgP8Ak1nZs1TIBkn3p6ox656+lXYbIv1Kj9f5VcWw2jBUe52nij2bOinG7MtYScYB96nS1YdVzWstui8HBGe2BzUojUoWwSMc9aTjY9Ohh7szEs2PQd/rzUq2n/160sJg4Ax165/wqMgZ6c9xj/69ZNHt0sNBFU2oHv8ASkNvgVdzxUbHcCM/pUWOmVCCWhRKc45pVg39jVsRL1JOakxsXPtnpRYzWHX2iFYFjAJAJHbFDzbVwMA8Y4psspOf0qDynkbC8c5yatEVJKKtAjkZpT9eat2lqAC7A+o4PNLFbeWMkKec9Rx+tWVkCjjjj0HH6VtGPVnlVW92OIU9WAGejDJzVW4mCKVG0cYJFNuLsgcE571nSSs7ZyTjrWvMebUkPaTn3/nTVIzxios8/TpShugycU0zimywo3tjtUtwyxRhckE9Rmi2w7cg8dyao3UpkmbnNbX5UcstWRMpL5DdauWsZA+YAqRUMALkDitArtTGAMe9VTj1ZnJ9CpdKseGA5781FL+9hD87uhqa4UyqTgZHHBqpC/lsyNnB4qZ6MSGs5IBHWoHYknJ6mpC+1j7VADk/jXNJ62NUiZTgcU8Hn3qNaeOBVIllyNgoGakyD3FUHc8c0LKccmr5kBDSYpcUV5x1CdxUgPOOlR0oPz4z+daQdmRNEuaXAamBc9KlSNgf511R1MWKsYJ71KsAwc8UqLyR19ashNmGOBmtuRCTESBT/wDqzVhYkXkt1OD7fkKh+0rxjPHX3pRKzH58njHI/wAaTaN4LuWQ6qoGcnnOT+vUU7ceflyc4I/yKYiEgfK3BxnpkflUqxjA+7x29R+dZtnfSjqKu9u+cDPBzkH8aepGQcD14xz6ds/rSKcbTg7gTyTn8ec0mduRjp0rJnt4ZEo6feJ7D6fnTCAD1HtTTIOOQM+3Sml8nv8ATGKyZ68ZIccHoTj6UoHGe9LHg9Cc/Sn5AGMjAqGbJdRjEjA4pnlFu3+fypzMgHTJqNpieFOAOlJIibXUcIlByw+nFODqD8ilR7VDuZmPXn3qVQMDO7PPStYnHUkraCyuRHnn/vr/AOvWdLckZXn3rQK+blQTg8CrT+E9UiSOWTS72RZFDBhA2CPwBqpVIw+Jpep4eKqO5znzyMGOTUi2kjDgDI68iuy0zwLreoZZNPa1QceZc5jH0wRkn8KwtSsNR0q5a2vLZ4JAeBINufz6j3HFRDEUJS5VNNnmzuZn2I+tL9kXBO+tTTPDeta4WNnau6KCS/AX/vo8Z9s1lXtne2U7wXMMkUqnDI4wR+BrWGJoOTgpK5zyUrbD3dYotqk5I5NZW4lyRVtlYRbmyB0ySKqKMNWspKVrGBpWihV3cZp1xMI1IG0mqwuNsI5GapSykmtXUUY2M+W7LIufmPTB4/CopOTuB5zVcHmn7jisee+5fLYbIfmzmmJywoY9RxSx/ezWW7L6E3SjPFB6UlamYhpBxSk02pe5Vh1IaWkrjOgTFNc4wcduafTJPu009RMljbjNWEZnYYqnCeMVo2gHpXbSdznloTxjyQM5LHpSMm5syOAB0FOuPlwRwW61nhmaT5iTW0pW0FFamkkMeOHzjp71YSONfunOBxzjI/xqnbgAcVYUkBsdjxU3OqBZHGFAzjkY7+tOyccE+v8A9aoweD7PgUdd3sTWcmehR3sPJ46fSmE8jAA9eaUqOKiJ+57nmsp6HqUGOzk84/z3pwIHc/lUS9D/AL2KeD/6FismenB6XHiTb0NNMjHvTQeTQKzZpzNiHce9PVC3UE5py96lPGMVSKVO+rGhBjofTr2px7/eoydtNfqOtaowxC5YEYYrIGwSM9Ca+jvBuo2WoeGrK51CWJZXjAzJLt3MuVJ/SvnBlG/pXd3/AMvgnQFHA/f/APoZrixtuendX1/Q8SnhfreIVG9rm98QbqOXxlaWVrP+4VI1wkmVBLHJz+I/KvVLrTLKS3yny8Z2q3B/A8V82Pwzcnv3966n4du3/CTsueBbuQO3SuLFOCoyfLqe1j8mUMPFqXweW53FlNJdnQXkYlriSZnA4VlUHA2jjHQ9KZa/6ammJcbZVuridD5iK21F3EAZHsPWn6QBnwt/15zN+OF/xqHTD/o3h4/7Fy344r5iot7f1ueU6cdVbv8Ar/kcB8VNRt1mg02CJAYlLbwACNw6cewB/L058rUYXJ/Wut+ILM3i6/yScMQPzx/ICuTWvuctpKnhqaXVJnzdbWTGFj61Ew5qQk0xq7pGSG06mnrTu1RYojYDNOiPJpjU6PvUrcroTGiim1rczA0Cg0Uhn//Z

[Php + AngularJs] En finir avec les messages TRY CATCH une bonne fois pour toute .

angularjs-300x300

Introduction :

Quand une requête SQL est en erreur dans le back end PHP PDO, on peut vouloir voir le message d’erreur SQL s’afficher en direct dans l’application  FRONT END angularJs.

Ce problème est insupportable si l’on gère différement les retours des requêtes $http à chaque fois, il faut donc  etre  géré toujours de la meme manière .
En fait , il s’agit d’un design pattern.

Comment faire :

Etape 1 :Activer l’affichage des erreurs de la connexion PDO : exemple :


$this->bdd = new PDO('mysql:host=' . self::DB_HOST . ';port='. self::PORT . ' ;dbname=' . self::DB_NAME , self::LOGIN , self::PWD);

$this->bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

Note : c’est la 2 ème ligne qui importe .

Etape 2 : Créer une fonction avec un try catch dans une classe PHP, exemple :


  protected function Update($table, $tab_value, $id) {

        try {
			$sql = 'UPDATE ' . $table . ' SET ';

            //  LES NOMS DE CHAMPS ET LEUR VALEUR
            if($tab_value) {
                foreach($tab_value as $i=>$v){
                    $sql .= $i.'= :'.$i.', ';
                }
            } else {
                $tab_value = array();
            }

            //  ENLEVER LA DERNIERE VIRGULE
            $sql = substr($sql, 0, -2);
            $sql .= ' WHERE id_'.$table.' = '.$id;

            $req = $this->bdd->prepare($sql);

            $req->execute($tab_value);

        } catch(PDOException  $e) {
			die('Erreur : '.$e->getMessage());
		}
		return true;
	}

Note : ici , on remarque qu’elle retourne TRUE, seulement à la fin, mais que le CATCH annulera le TRUE si la requête SQL est en erreur, et que le message d’erreur PDO parviendra bien au FRONT END .

Etape 3 :

Appeler la fonction dans le WEB SERVICE en PHP comme ceci (Exemple):

echo json_encode($user ->Update($table, $tab_value, $id));

Etape 4 : Dans le front end , Gérer l’erreur dans AngularJS :

$http.post(webServicesUrl+'?action=UpdateUser',this.utilisateur)
    .then(function (response, status, headers, config) { // return true or the PDO error
	
	if (response.data == "true") {
			 Notification.error({message: 'ok cest bien TRUE', delay: 5000});
			
	} else { 
		 
		 Notification.error({message: response.data, delay: 5000});
		

	}


	 
}.bind(this));

Note : On remarque que TRUE est un string, et que toute autre réponse que TRUE provenant du back end provoque l’affichage de l’erreur dans le FRONT END .

Conclusion :

Il faut désormais toujours utiliser ce pattern pour les requêtes. AngularJs attends soit un TRUE, soit autre chose, et rien d’autres (pas des 1 et des 0 , par exemple (booléens). En fait, il faut choisir, soit en prends les booléens, mais alors on ne récupère pas le message d’erreur PDO ; soit on fait comme plus haut.

Apparté :
En cas de problème :
En fait, le code n’est pas exactement celui ça décrit dans ce cas, car il y a

  • Le web Service
  • La classe Users
  • La classe Query qui comprends des méthodes génériques private pour updater automatiquement n’importe quelle table sql .

De ce fait, le code exact est :
Dans le web service :
echo json_encode($user ->UpdateUser($data));
( ou $data est un objet)
Dans la classe Users :
return $this->update(self::TABLE,$tab_value,$id);
ou les paramêtres sont l’objet $data scindé en plusieurs variables, dont un tableau, la classe query le nécessite.
Dans la classe query, c’est identique à expliqué au début.

[AngularJs] Un component de timer pour limiter des démos d’apps dans le temps

angularjs-300x300

Introduction


Un premier component de timer pour limiter des démos dans le temps (Version sans web worker)
AngularJS 1.7 avec les components est juste un framework… fantastique.
La seule chose un peu génante avec la syntaxe this, c’est le bind(this) qu’il faut rajouter parfois pour le 2 ways binding.
La syntaxe THIS est vraiment trop belle, et Ouah ce que AngularJS est puissant, flexible et logique ! Ca prends du temps d’essayer d’écrire du code angularjs proprement, mais ensuite… C’est top.
Les components réutilisables dialoguent entre eux, et sont réutilisables dans plusieurs APPS .
A venir : un component de gestion des droits utilisateurs, et un component de paiement (Paypal Checkout), et surement bien d’autres … Ca dépends si je passe sur vue.js ..

Le code :


Le component : 

monApp.component('timer', {
  templateUrl: 'vues/timer.html',

   controller: function($log,$scope,$location,footballersFactoryLocalStorage,pouchDB,stockeUtilisateur,Notification,$timeout) {

		// INIT
		this.demo = true;
		this.counter = 0;
        const dureeDemo  =  5000 // Durée de la démo

		// LE COMPTEUR POUR LA DEMO
		this.updateCounter = function() {

			if(this.counter > dureeDemo){
				Notification.error({message: 'La période de démonstration est finie, merci de vous identifier pour continuer', delay: 10000});
				$location.path('/login');

			}else{
				this.counter++;
				$timeout(this.updateCounter, 1000).then(function(success) {})
			}
		}.bind(this);

		// TEST DU LOGIN UTILISATEUR
		var utilisateur = stockeUtilisateur.getUtilisateur();

		if(angular.equals(utilisateur, {})){
			this.demo = true;
			this.updateCounter();
		}else{
			this.demo = false;
			Notification({message: 'Vous êtes bien identifié, bonjour '+utilisateur.username, title: 'Vous êtes bien identifié'});
		}

   }

});

Explication :

Le component teste si l’utilisateur est loggé, si il est loggé, il n’execute pas le timer de démonstration. Si il n’est pas loggé, il redirige l’utilisateur vers la page de login au bout de 5000 secondes (paramétrables).
Toutes les vairables préfixées par this agissent en temps réel dans la vue (Comme l’ancien $scope).

 

Le template timer.html , et oui, il est minus:

<span class="badge badge-warning"> Démo {{$ctrl.counter}}</span>

Dans le html, on l’appelle ensuite dans n’importe quelle app angularJS :

<timer counter="$resolve.counter"></timer>

Le service qui stocke un objet JSON ‘utilisateur ‘ (version sans local storage) :

monApp.service('stockeUtilisateur', function() {
   var utilisateur ={};

    return {
        getUtilisateur: function() {
            return utilisateur;
        },
        setUtilisateur: function(objet) {
            utilisateur = objet;
        }
    };
})

Résultat, dans n’importe quelle vue AngularJs :


Un timer compte jusque 5000, puis redirige vers la page de login /et/ou de paiement …

timer.jpg

Annexe :
Pour router vers un component ‘login’, voici la syntaxe du router de base angularJs :

$routeProvider
	.when('/login', {
		template: '<login user="$resolve.user"></login>',
		resolve: {
		  // user: function($http) { return $http.get('...'); }
		}
	  })
	.when('/gerer', {
		templateUrl: 'vues/gerer.html',
		controller: 'gerer',

	})
	.when('/matches', {
		templateUrl: 'vues/matches.html',
		controller: 'matches'
	})
	.when('/modifierFootballer/:id', {
		templateUrl: 'vues/modifierFootballer.html',
		controller: 'modifierFootballer'
	 })
	 .when('/achat', {
		templateUrl: 'vues/achat.html',
		controller: 'achat'
	 })

	.otherwise({redirectTo: '/gerer',templateUrl: 'vues/vignettes.html',controller: 'liste'});
})

[AngularJs] Calculer la moyenne des valeurs d’une colonne de table HTML, avec une seule fonction générique

angularjs-300x300.png

Introduction

Une fonction qui prends en paramêtre le modèle de données de la table, et le nom de la colonne (‘champs’) dont on veut calculer la moyenne .
( EDIT : Des bugs wordpress avaient pourri le code, et enlevé le ng-repeat)

Code

La fonction :

this.calculer_moyenne = function(modele, champs) {

    if (modele) {
        var sum = 0;
        for (var i = 0; i < modele.length; i++) {

            if (modele[i][champs]) {
                sum += parseInt(modele[i][champs]);
            }
        }

        var avg = sum / modele.length;

        return (avg).toFixed(2);
    }

}

Le HTML :

<table class="table table-striped table-bordered table-hover">
<tr>
<thead>
<th>Période</th>
<th title="Nombre de jours travaillés dans le mois">Nbre de JT</th>
<th title="Nombre d'appels par jours">Nb Appels</th>
<th title="Nombre d'appels par jours">Nbre d'appels/jour</th>
<th title="Nombre de fiches traitées">Nbre fichestraitées</th>
<th>Heures Tr</th>
<th>Appels/heure</th>
<th>Tx de rotation</th>
<th>Nbre contacts PDG</th>
<th>Nbre contact / JT</th>
<th>Tx contact</th>
<th>Nbre de devis créés</th>
<th>Tx d'accroche devis</th>
<th>Tx d'efficacité de vente</th>
<th>Tx efficacité entrant</th>
<th>Tx efficacité sortant</th>
<th>Nb de ventes</th>
<th>Nb Ventes entrantes</th>
<th>Nb Ventes sortantes</th>
<!--
<th>Ventes opé</th>
--></thead>
<thead>
<th><i class="fa fa-calendar  bg-secondary p-2 font-xl mr-3  "></th>
<th><i class="fa fa-industry  bg-primary p-2 font-xl mr-3 pull-center "> </i></th>
<th title="Nombre d'appels par jours"><i class="fa fa-phone  bg-primary p-2 font-xl mr-3 pull-center "> </i></th>
<th title="Nombre d'appels par jours"><i class="fa fa-phone  bg-secondary p-2 font-xl mr-3 pull-center "></i></th>
<th title="Nombre de fiches traitées"><i class="fa fa-map-o  bg-primary p-2 font-xl mr-3 pull-center "></i></th>
<th><i class="fa fa-industry  bg-primary p-2 font-xl mr-3 pull-center "></i></th>
<th><i class="fa fa-repeat  bg-warning p-2 font-xl mr-3 pull-center "></i></th>
<th><i class="fa fa-eur  bg-secondary p-2 font-xl mr-3  "></th>
<th><i class="fa fa-user-plus  bg-danger p-2 font-xl mr-3 "></i></th>
<th><i class="fa fa-user-plus  bg-secondary p-2 font-xl mr-3 "></i></th>
<th><i class="fa fa-user-plus  bg-secondary p-2 font-xl mr-3  "></i></th>
<th><i class="fa fa-file-o  bg-secondary p-2 font-xl mr-3  "></i></th>
<th><i class="fa fa-file-o  bg-secondary p-2 font-xl mr-3  "></i></th>
<th><i class="fa fa-thumbs-o-up  bg-secondary p-2 font-xl mr-3  "></i></th>
<th><i class="fa fa-thumbs-o-up  bg-secondary p-2 font-xl mr-3  "></i></th>
<th><i class="fa fa-thumbs-o-up  bg-secondary p-2 font-xl mr-3  "></i></th>
<th><i class="fa fa-eur  bg-secondary p-2 font-xl mr-3  "></i></th>
<th><i class="fa fa-eur  bg-secondary p-2 font-xl mr-3  "></i></th>
<th><i class="fa fa-eur  bg-secondary p-2 font-xl mr-3  "></i></th>
<!--
<th>Ventes opé</th>
--></thead>
</tr>
<tr ng-repeat ="s in ctrl.sc">
<td> {{::s.nom}}</td>
<td> {{::s.nb_j_travailles}}</td>
<td> {{::s.nb_appels}}</td>
<td> {{(s.nb_appels / s.nb_j_travailles) | number: 2}}</td>
<td> {{::s.nbfiches_creees}}</td>
<td> {{::s.heures_mensuelle}}</td>
<td> {{(s.nb_appels / s[$index].travail_mois) | number: 2 }}</td>
<td> {{}}</td>
<td> {{::s.nb_contacts}}</td>
<td> {{}}</td>
<td> {{}}</td>
<td> {{::s.nbdevis_crees}}</td>
<td> {{(s.nbdevis_crees/s.nb_argus) | number: 2}}</td>
<td> {{::s.tx_efficacitevente}}</td>
<td> {{::s.tx_efficaciteventeentrant}}</td>
<td> {{::s.tx_efficaciteventesortant}}</td>
<td> {{::s.nb_vente}}</td>
<td> {{::s.nb_venteentrant}}</td>
<td> {{::s.nb_ventesortant}}</td>
<!--
<td> {{}}</td>
--></tr>
<tr>
<td>Moyenne</td>
<td>{{ctrl.calculer_moyenne(ctrl.sc,'nb_j_travailles')}}</td>
<td>{{ctrl.calculer_moyenne(ctrl.sc,'nb_appels')}}</td>
<td></td>
<td>{{ctrl.calculer_moyenne(ctrl.sc,'nbfiches_creees')}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

[AngularJs 1.6.2] Communiquer des variables à des components

Introduction

On a 20 graphiques à réaliser, tous avec la même emprunte pattern de modèle de données , on va forcément éviter de créer 20 controllers pour gérer tout ça .
On tente donc de créer un component angularJS qui permet de simplifier tout cela , car on peut lui passer des variables.

Note : La v 1.7 de AngularJs gère le transfert de datas aux components un peu différement.

Lien :

https://stackoverflow.com/questions/53170065/angularjs-template-component-not-rendering-variables