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;
	}