Truc 15 : Partager un modèle entre plusieurs contrôleurs à l’aide d’un service(Factory)

Introduction


Parfois, on a besoin de partager une seul modèle entre plusieurs contrôleurs.

Comment faire :


Il faut créer une factory, qui distribue les données du modèles à tous les controleurs.

Le code :


Voici le code exemple :


<html ng-app="monApp">
	<head>
		<title> Partager un modèle pour plusieurs controleurs grâce à un service(factory)</title>
		<meta charset="utf8" >
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->

		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<script src="librairies/angular-locale_fr-fr.js"></script>

		<!--	APPEL LIB BOOTSTRAP -->
		<script src="librairies/ui-bootstrap.min.js"></script>
			<link rel="stylesheet" href="librairies/bootstrap/css/bootstrap.min.css">

		<script>

		var app = angular.module("monApp", []);

		<!-- CI DESSOUS, LA FACTORY QUI DISTRIBUE LES DONNEES AUX CONTROLEURS, SUR DEMANDE -->
		app.factory("ServiceUtilisateurs", function() {
			var utilisateurs = ["Patrice", "Daniel", "Aziz"]; <!-- Le modèle -->
				return {
					tous: function() {
						return utilisateurs;
					},
					premier: function() {
						return utilisateurs[0];
					},
					dernier: function() {
						return utilisateurs[2];
					}
				};
			});

		<!-- CI DESSOUS, LES 3 CONTROLEURS DIFFERENTS DE LA MEME APPLICATION, QUI PARTAGENT UN MEME MODELE GRACE  A LA FACTORY AU DESSUS -->
		app.controller("PremierControleur", function($scope, ServiceUtilisateurs) {
			$scope.utilisateurs = ServiceUtilisateurs.tous();
		});

		app.controller("SecondControleur", function($scope, ServiceUtilisateurs) {
			$scope.premierUtilisateur = ServiceUtilisateurs.premier();
		});

		<!-- CE TROISIEME CONTROLEUR DISPOSE DUNE NOTATION QUI PERMET LA MINIFACTION GRUNT-->
		app.controller("TroisiemeControleur", ["$scope", "ServiceUtilisateurs", function($scope, ServiceUtilisateurs) {
			$scope.dernierUtilisateur = ServiceUtilisateurs.dernier();
			}]);

		</script>
	</head>

	<!-- LA VUE -->
	<body >
<div ng-controller="PremierControleur">
<ul ng-repeat="utilisateur in utilisateurs">
	<li>{{utilisateur}}</li>
</ul>
<div class="nested" ng-controller="SecondControleur">
				Premier utilisateur: {{premierUtilisateur}}</div>
<div ng-controller="TroisiemeControleur">
				Dernier utilisateur: {{dernierUtilisateur}}</div>
</div>
</body>
</html>
Publicités