Truc 31 : Une Application Crud AngularJs-Firebase partagée.

FirebaseIntroduction


Voici une application AngularJs de gestion de contacts créée en 5 minutes, comportant un CRUD (Créer, Lire, Mettre à jour, Supprimer).

Particularité : Le 3ways Binding de Firebase mets à jour en temps réel tous les ordinateurs connectés à l’application. Il n’y a plus de Back-end(C’est toooop, hi hi  !). On peut le vérifier aussi en ouvrant l’appli dans plusieurs onglets et en voyant les modifs passer en temps réel ! Du socket.io, sans la difficulté.

Tout à fait ce que je recherchais pour mes futures apps, de plus, ce n’est que que 5 dollars par mois pour 200 connections simultanées !.

Pour tester… C’est ici .

Le Code :


<html ng-app="sampleApp">
	<head>
		<meta charset="utf8" >
		<title>Une Application partagée de gestion de contacts AngularJs-Firebase </title>
		
		<!-- CHARGEMENT DES LIBRAIRIES -->
		
		<!-- CHARGEMENT LIB ANGULAR -->
		<script type="text/javascript" src="angular-1.3.13/angular.min.js"></script>
		<script src="angular-route.min.js"></script>
		<script src="librairies/angular-locale_fr-fr.js"></script>
		<!-- CHARGEMENT LIB FIREBASE -->
		<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
		<!-- AngularFire -->
		<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
		<!-- CSS DE L'APPLICATION -->   
		<link href="truc28.css" media="screen" rel="stylesheet" type="text/css" /> 
		
		<!-- FIN DE CHARGEMENT DES LIBRAIRIES -->
		
		<script>
		<!-- INCLUSION DU MODULE FIREBASE -->
		var app = angular.module("sampleApp", ["firebase"]);
			
		<!-- CONTROLEUR -->
		app.controller("SampleCtrl", function($scope, $firebaseArray) {
			<!-- CONNEXION A LA DATABASE FIREBASE -->
			var myDataRef = new Firebase('https://blinding-heat-XXXX.firebaseio.com/utilisateurs/');	
			
			// Créer un tableau synchronisé, contenant des objets JSON
			  $scope.utilisateurs = $firebaseArray(myDataRef);
			  
			  // Ajouter de nouveaux objets au tableau
			  // Cet utilisateur est automatiquement ajouté à notre base de données Firebase
			 
			 $scope.ajouterUtilisateur = function() {
				$scope.utilisateurs.$add({
				  nom: 		$scope.nouveauNom,
				  prenom:	$scope.nouveauPrenom,
				  age:		$scope.nouvelAge,
				  email:	$scope.nouvelEmail
				});
			  };
		});
		</script>
	</head>
 
  <!-- La page HTML générale -->
<body ng-controller="SampleCtrl">


<h1>Un  Application CRUD partagée AngularJs-Firebase 3 Wayz Binding</h1>




<ul>


<li ng-repeat="utilisateur in utilisateurs">
			<!-- editer un utilisateur -->
			<input ng-model="utilisateur.nom" ng-change="utilisateurs.$save(utilisateur)" />
			<input ng-model="utilisateur.prenom" ng-change="utilisateurs.$save(utilisateur)" />
			<input ng-model="utilisateur.age" ng-change="utilisateurs.$save(utilisateur)" />
			<input ng-model="utilisateur.email" ng-change="utilisateurs.$save(utilisateur)" />
			
			<!-- supprimer un utilisateur -->
			<button ng-click="utilisateurs.$remove(utilisateur)">Supprimer L'utilisateur</button>
		</li>


    </ul>


    
	<!-- Ecrire un utilisateur dans le tableau -->


<form ng-submit="ajouterUtilisateur()">
      <input ng-model="nouveauNom" placeholder='Nom' />
	  <input ng-model="nouveauPrenom" placeholder='Prénom' />
	  <input ng-model="nouvelAge" placeholder='Age' />
	  <input ng-model="nouvelEmail" placeholder='Email' />
		<button type="submit">Ajouter un  utilisateur</button>
    </form>


  </body>
</html>
	
Publicités