Discussion :

[Invité]

Bonjour,

Je dois remettre ce code dans plusieurs de mes controleurs angularjs 1.5 pour le bootstrap time picker:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
	<!-- BOOTSTRAP TIME PICKER -->
 
 
	  $scope.today = function() {
		$scope.dtDef = new Date();
	  };
	  $scope.today();
 
	  $scope.clear = function () {
		$scope.dtDef = null;
	  };
 
	  // Disable weekend selection
	  $scope.disabled = function(date, mode) {
		return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
	  };
 
	  $scope.toggleMin = function() {
		$scope.minDate = $scope.minDate ? null : new Date();
	  };
	  $scope.toggleMin();
	  $scope.maxDate = new Date(2020, 5, 22);
 
	  $scope.open = function($event) {
		$scope.status.opened = true;
	  };
 
	  $scope.setDate = function(year, month, day) {
		$scope.dt = new Date(day, month, year);
	  };
 
	  $scope.dateOptions = {
		formatYear: 'yy',
		startingDay: 1
	  };
 
	  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd-MM-yyyy', 'shortDate'];
	  $scope.format = $scope.formats[2];
 
	  $scope.status = {
		opened: false
	  };

Le problème c'est que je ne vois pas du tout comment mettre ça dans un service ou une factory, du coup je dois le réécrire dans chaque controleur qui controle une vue ou il y a un datepicker bootsrap!

Pour mes gérer mes datas en Back End, ça va, j'arrive à créer des factories, mes factories ressemblent à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.factory('employesService', ['$firebaseArray', 'FIREBASE_URI', function ($firebaseArray, FIREBASE_URI) {
 
	var ref = new Firebase(FIREBASE_URI);
	var employes = $firebaseArray(ref.child('employes'));
 
 
 
    var getEmployes = function () {
        return employes;
    };
 
    var ajouterEmploye = function (employe) {
        employes.$add(employe);
    };
 
    var majEmploye = function (id) {
        employes.$save(id);
    };
 
    var supprimerEmploye = function (id) {
        employes.$remove(id);
    };
 
	return {
        getEmployes: 		getEmployes,
        ajouterEmploye: 	ajouterEmploye,
        majEmploye: 		majEmploye,
        supprimerEmploye: 	supprimerEmploye
 
    }
}])

Mais je ne veux pas faire ça du tout, je veux juste mettre le code nécessaire à bootstrap time picker dans tous mes controleurs sans avoir à le réécrire 5 fois !

j'ai cru comprendre qu'il faudrait peut être créer un module ?

[Marco46]

Comme on l'a déjà répété au moins 50 fois sur ce forum que tu lis depuis des mois : fais un service !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
(function (angular) {
    'use strict';
 
    angular
        .module('app')
        .factory('bootstrapTimepickerConfigService', bootstrapTimepickerConfigService);
 
    function bootstrapTimepickerConfigService() {
        var instance = {
            dtDef: null,
			minDate: null,
			maxDate: null,
 
			today: today,
			clear: clear,
			disable: disable,
			toggleMin: toggleMin,
			toggleMax: toggleMax
		};	
 
        return instance;
 
		function today() {
			instance.dtDef = new Date();
		};
 
		function clear() {
			instance.dfDef = null;
		}
 
		// Disable weekend selection
		function disable(date, mode) {
			return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
		};
 
		function toggleMin() {
			instance.minDate = instance.minDate ? null : new Date();
		};
 
		function toggleMax() {
			instance.maxDate = new Date(2020, 5, 22);
		}
 
		// ... to be continued ...
    }
 
})(angular);

Tu l'injectes dans les contrôleurs où tu en as besoin et tu publies carrément l'instance dans le view model. Ne perd pas de vue qu'un service est un singleton.

1/ Arrête d'utiliser le $scope.
2/ Arrête d'écrire de la logique dans les contrôleurs.
3/ Quand tu sais pas où écrire un code, écris le dans une fonction d'un service.

Respecte à la lettre ces 3 règles et tu verras que tout sera plus facile.

[Invité]

Merci beaucoup, c'est vraiment sympa !

Je vais essayer ça, oui je pense avoir un peu compris.

Par contre pour le $scope, le problème c'est que j'ai lu qu'on pouvait avoir des problèmes lors de la minification du code si on enlève $scope de ton son code angularJs, est-vrai ?

Merci

[Invité]

J'ai essayé et ça marche, mais il existerait pas un moyen de juste ajouter une portion de code à un controleur, sans créer un service qui retourne quelque chose ?

Je voudrais juste coller mon code unique partout comme ça en dur.

Je voudrais que ce code soit automatiquement inclu à chacun de mes controleurs pour pas devoir le retaper à chaque fois :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$scope.open = function($event) {
		$scope.status.opened = true;
	  };
 
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd-MM-yyyy', 'shortDate'];
$scope.format = $scope.formats[2];
 
$scope.status = {
	opened: false
 };

Mais je n'arrive pas.

Par exemple, la fonction de bootstrap qui permet l'ouverture de la pop up de date :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$scope.open = function($event) {
	$scope.status.opened = true;
};

Je ne vois pas du tout comment la transférer dans le service ! .

[Marco46]

Par contre pour le $scope, le problème c'est que j'ai lu qu'on pouvait avoir des problèmes lors de la minification du code si on enlève $scope de ton son code angularJs, est-vrai ?

Non.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
/* CONTROLEUR DE LA VUE NOUVEAU */
.controller('nouveauCtrl', function($scope,notifier,categoriesService,bootstrapTimepickerConfigService) {
 
	/* INITIALISATION DES VARIABLES ET OBJETS :	 */
	$scope.nouvelEmploye		={};/*  L'objet contiendra toutes  les variables forumlaire du nouvel employé */
	$scope.nouvelEmploye.image	="img-app/employe.jpg";/*  Tant qu on a pas uploade une image, cest celle ci qui s affiche */
	$scope.generationCodeBarre	=""; /* Initialise le code Barre */
	notifier.notify('Remplissez le formulaire pour générer la carte de l\'employé avec son code barre !');
 
        // publication du service dans le view model :
        $scope.timepickerConfigService = bootstrapTimepickerConfigService;
 
        // ensuite dans ta vue tu peux référencer {{timepickerConfigService.dtDef}} par exemple
 
});

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(bootstrapTimepickerConfigService.today);

dans le controleur, et il affiche la fonction today() en dur mais pas le resultat.

Normal c'est ce que tu lui demandes de faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(bootstrapTimepickerConfigService.today());

Ca marchera mieux.

[Invité]

Excuse moi, mais penses tu que je pourrais(devrais) mettre cette fonction dans un service ?
Cette fonction affiche une DIV dans une nouvelle fenêtre html popup afin de l'imprimer.
J'ai deux vues qui utilisent cette fonction, pour l'instant, je suis obligée de copier la même fonction dans les 2 controleurs... c'est pas super ...
je vais essayer avec ta syntaxe, ça doit être possible.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
$scope.imprimerDiv = function (NomDeLaDiv) {
		notifier.notify('Fermez la fenêtre qui s\'ouvre pour revenir au programme');
		var printContents = document.getElementById(NomDeLaDiv).innerHTML; //Récupère le contenu de la div a afficher dans le popup d impression
		console.log(printContents);
		var originalContents = document.body.innerHTML;      
 
		/* CODE SPECIAL POUR CHROME */
		if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
			var popupWin = window.open('', '_blank', 'width=1200,height=1200,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
			popupWin.window.focus();
			popupWin.document.write('<!DOCTYPE html><html><head>' +
				'<link rel="stylesheet" type="text/css" href="bower_components/barcodeGenerator/barcode.css" />' +
				'</head><body onload="window.print()"><div class="reward-body">' + printContents + ' </div></html>');
			popupWin.onbeforeunload = function (event) {
				popupWin.close();
				return '.\n';
			};
			popupWin.onabort = function (event) {
				popupWin.document.close();
				popupWin.close();
			}
		} else {
			/* CODE POUR LES AUTRES NAVIGATEURS */
			var popupWin = window.open('', '_blank', 'width=300,height=300');
			popupWin.document.open();
			popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="bower_components/barcodeGenerator/barcode.css" /></head><body onload="window.print()">' + printContents + '</html>');
			popupWin.document.close();
		}
		popupWin.document.close();
 
		return true;
	}

[Invité]

EDIT : Bah nan ca marche pas il n'accepte pas qu'il y ait le paramêtre "NomDeLaDiv" dans la fonction lorsque je le mets en tant que service :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.factory('imprimerDiv',imprimerDiv); 
 
function imprimerDiv(NomDeLaDiv ) {
     notifier.notify('Fermez la fenêtre qui s\'ouvre pour revenir au programme');
		var printContents = document.getElementById(NomDeLaDiv).innerHTML; //Récupère le contenu de la div a afficher dans le popup d impression
		console.log(printContents);
		var originalContents = document.body.innerHTML;      
 
		/* CODE SPECIAL POUR CHROME */
		if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
			var popupWin = window.open('', '_blank', 'width=1200,height=1200,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
			popupWin.window.focus();
			popupWin.document.write('<!DOCTYPE html><html><head>' +
				'<link rel="stylesheet" type="text/css" href="bower_components/barcodeGenerator/barcode.css" />' +
				'</head><body onload="window.print()"><div class="reward-body">' + printContents + ' </div></html>');
			popupWin.onbeforeunload = function (event) {
				popupWin.close();
				return '.\n';
			};
			popupWin.onabort = function (event) {
				popupWin.document.close();
				popupWin.close();
			}
		} else {
			/* CODE POUR LES AUTRES NAVIGATEURS */
			var popupWin = window.open('', '_blank', 'width=300,height=300');
			popupWin.document.open();
			popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="bower_components/barcodeGenerator/barcode.css" /></head><body onload="window.print()">' + printContents + '</html>');
			popupWin.document.close();
		}
		popupWin.document.close();
 
		return true;
    };

Après, j'appelle le service dans le controleur et ça ne marche pas, ia une erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.controller('nouveauCtrl', function($scope,notifier,categoriesService,getNombre,imprimerDiv) {});

Par contre, l'erreur s'en va si j'enlève la variable NomDeLaDiv en paramêtre de la fonction, mais cela ne fonctionne quand même pas, puisque j'ai besoin de spécifier le nom de la div pour pouvoir l'imprimer.


Du coup, je suis encore avec mes deux fonctions identiques dans mes 2 controleurs, c'est vraiment lourd, alors le code est pas beau, parce que on comprends pas pourquoi j'ai ces deux fonctions identiques dans mon code !

[Marco46]

Dans le code que tu montres tu ne donnes pas NomDeLaDiv comme argument de la fonction, tu essayes d'injecter un service nommé NomDeLaDiv :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.factory('imprimerDiv',imprimerDiv); 
 
function imprimerDiv(NomDeLaDiv ) {

Il te faut créer une fonction imprimerDiv qui prend en paramètre le nom dans un service que tu publies dans ton contrôleur. Tu appelles ensuite la fonction dans ton template.

[Invité]

Désolé je m'était trompé de mot, je voulais dire paramêtre, pas argument

[Marco46]

Ben c'est pareil.

Ce que je veux dire c'est que faut que tu fasses comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.factory('imprimerDivService',imprimerDivService); 
 
// ce que tu mets en paramètres ici (ou en argument c'est pareil) c'est ce que angular va injecter comme services
function imprimerDivService() {
 
    var instance = {
        imprimer: imprimer
    };
 
    return instance;
 
    function imprimer(NomDeLaDiv) {
        // impl
    }
 
}