Discussion :

[francky74]

Bonjour,

Je suis en train de coder avec Angular ui-router.

Comme le fichier comporte les modules et les controllers, je souhaiterais déporter mes controllers dans un autre fichier afin que tout ceci soit plus lisible et aussi pour ne pas avoir à monter et descendre dans le même fichier pour aller des modules aux controllers et vice-versa.

Comment fait-on pour écrire les controlleurs dans un fichier différent de celui des modules s'il vous plaît ?

voici mon code :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/**
 * 
 */
 
var app = angular.module('app', ['ui.router']);
 
app.config(['$stateProvider', function($stateProvider) {
 
	$stateProvider
	.state('produits', {
		url: '/produits',
		views:{
			'general_view':{
				templateUrl: 'produits.htm',
				controller: 'produitsCtrl'
			}
		}
	})
	.state('horaires_lieux', {
		url: '/horaires_lieux',
		views:{
			'general_view':{
				templateUrl: 'horaires_lieux.htm'
			}
		}
	})
	.state('contact', {
		url:'/contact',
		views:{
			'general_view':{
				templateUrl: 'contact.htm',
				controller:'contactCtrl'
			}
		}
	})
	.state('aPropos', {
		url:'/aPropos',
		views: {
			'general_view':{
				templateUrl: 'aPropos.htm'
			}
		}
	})
	.state('home', {
		url: '/',
		views: {
			'general_view': {
				templateUrl: 'home.htm'
			}
		}
	})
	.state('noRoute', {
		url: '*path',
		templateUrl: 'home.htm'
	});
}]);
 
app.controller('produitsCtrl', ['$scope', function($scope) {
	console.log('produitsCtrl');
	// Déclarations
	$scope.liste_photos = liste_photos;
	$scope.contacts = contacts;
 
	console.log('$scope.liste_photos = ' + $scope.liste_photos);
}]);
 
app.controller('contactCtrl', ['$scope', function($scope) {
	console.log("contactCtrl");
 
	$scope.contact = contact;
}]);

Merci,

[francky74]

C'est tout simple en fait !
Il suffit de couper / coller le code dans un nouveau fichier .js et de le déclarer dans la page html.

Je n'y arrivais pas car j'avais fait une faute d'orthographe dans l'écriture du nom du fichier ....

[Marco46]

La bonne pratique c'est un élément de module par fichier. Un contrôleur, un service, une directive, un filtre, etc... par fichier. Et les modules à part. Les routes à part aussi.

Cf le styleguide qui fait autorité en la matière pour du AngularJS avec ES5.

[francky74]

Merci beaucoup pour les conseils !!!