Micro application partagée CRUD avec stockage Firebase noSql en ligne, en Français.

Invité · 07/01/2016, 16h07

Salut, j'écris histoire de mettre l'ambiance, j'ai fait une micro app avec angularJs + Firebase en 1h45 à tester ici :

http://nicolash.org/truc37/

Je sais pas trop ce que vous en pensez, critiques bienvenues .

index.html :

Code html :

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html ng-app="app" lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
	<title>Angular Firebase</title>
 
	<!-- CHARGEMENT DES LIBRAIRIES -->
 
				<!-- CHARGEMENT LIB ANGULAR -->
				<script type="text/javascript" src="librairies/angular-1.3.13/angular.min.js"></script>
				<script src="librairies/angular-1.3.13/angular-route.min.js"></script>
				<script src="librairies/angular-1.3.13/angular-locale_fr-fr.js"></script>
 
				<!-- CHARGEMENT LIB FIREBASE -->
				<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
 
				<!-- AngularFire pour firebase-->
				<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
 
				<!--	APPEL LIB BOOTSTRAP -->
				<script src="librairies/bootstrap/js/ui-bootstrap-tpls-0.14.3.min.js"></script>
				 <link rel='stylesheet prefetch' href='librairies/bootstrap/css/bootstrap.css'>
				 <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css'>
 
				<!--	APPEL LIB TEXTANGULAR-->
				<link rel="stylesheet" href="librairies/textAngular/textAngular.css">
				<script src="librairies/textAngular/textAngular-rangy.min.js"></script>
				<script src="librairies/textAngular/textAngular-sanitize.min.js"></script>
				<script src="librairies/textAngular/textAngular.min.js"></script>
 
 
				<!-- CSS DE L'APPLICATION -->  
				<link href="css/truc36.css" media="screen" rel="stylesheet" type="text/css" />  
				<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
 
				<!-- LE PROGRAMME -->
				<script src="general.js"></script>
 
				<!-- Le CONTROLEUR -->
				<script src="controleurs/app.js"></script>
 
				<!-- Les directives : -->
				<script src="directives/directives.js"></script>
 
				<!-- La factory Firebase pour dialoguer avec la base de données nosql-->
				<script src="factory/factoryFirebase.js"></script>  
 
 
 
 
 
				<!-- FIN DE CHARGEMENT DES LIBRAIRIES -->
	</head>
 
	<body ng-controller="appCtrl">
 
	<tabset>
 
	<!-- ONGLET FICHES DES VILLES-->
		<tab heading="Fiches" active="etatOnglets.static1">
			<tab-heading>
				<i class="glyphicon glyphicon-file"></i> Fiches
			</tab-heading>
 
			<div  class="fiche " ng-repeat="ville in villes| orderBy:nom"  uib-tooltip="Cliquez pour modifier la ville">
				<img ng-src="{{ville.photo}}" class="imagesGen centre">
				<h4>{{ville.nom| uppercase}}</h4>
				Catégorie : <b>{{ville.categorie}} </b><br>
				<uib-rating ng-model="ville.note"  max="10"   readonly="true"></uib-rating> <br>
				<button class="glyphicon glyphicon-pencil" style="float:right" ng-click="editerVille(ville)" uib-tooltip="Editer"></button>
				<button class="fa fa-trash-o " style="float:right" ng-really-click="supprimerVille(ville)"  ng-really-message="Etes vous sur?" uib-tooltip="Cliquez pour supprimer cette ville..."></button>
			</div> 
 
 
		</tab>
 
 
<!-- ONGLET EDITION ET CREATION -->
		<tab heading="Ajouter" active="etatOnglets.static2">
			<tab-heading >
				<i class=" glyphicon glyphicon-pencil"></i> Editer
			</tab-heading>
 
				<form class="form-container" role="form" >
					<h1>Ville:</h1>
 
						<div class="form-group">
 
							<label class="form-title">Photo:</label><br>
							<img ng-src="{{newVille.photo}}"  class="imagesGen"><br><BR>
							<label  class="form-title">Placer la photo du cursus sur le Serveur:</label><BR>
							<input  type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)" ></input>
							{{infoUpload}}<br>
 
							<label class="form-title">Nom:</label>
							<input type="text" class="form-control form-field" ng-model="newVille.nom" placeholder="Nom"  ng-required="true" >
 
							<label class="form-title">Description</label>	
							<textarea   style="min-width: 100%; min-height:200px;" class="form-control form-field textarea" ng-model="newVille.description" placeholder="Description" ng-required="true" ></textarea>
 
							<label class="form-title">Catégorie de la ville:</label><BR>
							<select class="form-field" ng-model="newVille.categorie"  >
									<option value="">Selectionner	</option>
									<option value="petite">petite	</option>
									<option value="moyenne">moyenne	</option>
									<option value="grande">grande	</option>
							</select><BR>
 
							<label class="form-title">Note de la Ville:</label><BR>
							<uib-rating ng-model="newVille.note"  max="10"   ></uib-rating> 
 
 
 
 
					<!-- BOUTONS -->
 
					<button  ng-click = "ajouterVille()" class="right" >Enregistrer la Ville<span class="glyphicon glyphicon-plus" aria-hidden="true" ></button>
 
 
					<button  ng-click="validerEdition()" class="right" label="Modifier le Cursus">Modifier la ville<span class="glyphicon glyphicon-plus" aria-hidden="true" ></button>
 
					<span ng-bind="infos"></span> 
 
				</form>
		</tab>
	</tabset>	
 
 
 
 
 
 
	</body>
</html>

app.js (le controleur) :

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
app.controller('appCtrl', ['$scope','VillesService','$http', function ($scope,VillesService,$http) {
 
	/* INITIALISATION DU FORMULAIRE */
	$scope.newVille 		= {}; // Tout ce que l'on inscrit dans le formulaire est copié dans cet objet en temps réel.
	$scope.newVille.photo 	= "img-app/ville.jpg" // Image de base d'une ville que l'on modifie après après telechargement et update dans l'objet newVille
 
	/* INITIALISATION DES ONGLETS (ON CHOISIT QUEL ONGLET SERA VU EN PREMIER) */
	$scope.etatOnglets 			= {static1: true, static2: false};
 
 
	/* CHARGEMENT DU MODELE DE DONNEES SUR FIREBASE ET LIAISON PERMANENTE TRI-DIRECTIONNELLE A LA BASE DE DONNEE EN TEMPS REEL !(3 way binding): */
	$scope.villes 			= VillesService.getVilles(); // $scope.villes est affiché en temps réel dans la vue, c'est un tableau d'objets Json contenant des villes.
 
	/* AJOUT D'UNE VILLE ET ENREGISTREMENT EN BASE DE DONNEES FIREBASE : */
	$scope.ajouterVille = function(){
		VillesService.ajouterVille(angular.copy($scope.newVille));// transmets l'objet ville à la base de données firebase suite à un click sur enregistrer la ville...
		$scope.infos = "La ville a été ajoutée en ligne à la base de données FIREBASE"
	}
 
	/* SUPPRESSION D'UNE VILLE */
	$scope.supprimerVille = function(ville){
		VillesService.supprimerVille(ville);
	}
 
	/* EDITION DUNE VILLE */
	$scope.editerVille = function(ville){
		/* FOCUS SUR L ONGLET EDITION */
		$scope.etatOnglets 		= {};
		$scope.etatOnglets 		= {static1: false, static2: true}; // Permet de placer automatiquement lutilisateur sur l'onglet EDITER
 
		/* POUR POUVOIR EDITER UN OBJET IL FAUT LE RECUPERER SUR FIREBASE CA DOIT ETRE UN OBJET FIREBASE , DU COUP ON UTILISE GETRECORD COMME INDIQUE DANS LA DOC: */
		$scope.newVille  		=  $scope.villes.$getRecord(ville.$id); // Astuce permettant de charger l'objet ville directement dans le formulaire : super rapide, super simple !
	}
 
	/* VALIDATION DE L EDITION DUNE VILLE  */
	$scope.validerEdition = function(){
		VillesService.editerVille($scope.newVille);
	}
 
	/* CHARGEMENT D UNE PHOTO SUR LE SERVEUR */
	$scope.uploadFile = function(files) {
 
		var fd = new FormData();
			//Take the first selected file
			fd.append("file", files[0]);
			console.log(files[0].name);
			var uploadUrl = "uploadTruc36.php";
			$http.post(uploadUrl, fd, {
				withCredentials: true,
				headers: {'Content-Type': undefined },
				transformRequest: angular.identity
			}).success(function(data){ 
				$scope.infoUpload="Fichier téléchargé sur le serveur "; 
				$scope.newVille.photo="uploads/"+files[0].name; 
				})
				.error(function(data){
					$scope.infoUpload="Echec du téléchargement sur le serveur";
				});
 
	};
 
 
 
<!-- FIN DU CONTROLEUR	 -->
}])

La factory Firebase qui gère le CRUD (Aussi appelé "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
<!-- FACTORY DE DATA DES VILLES -->
 
app.factory('VillesService', ['$firebaseArray', 'FIREBASE_URI', function ($firebaseArray, FIREBASE_URI) {
 
	var ref = new Firebase(FIREBASE_URI);
	var villes = $firebaseArray(ref);
 
 
    var getVilles = function () {
        return villes;
    };
 
    var ajouterVille = function (ville) {
        villes.$add(ville);
    };
 
    var editerVille = function (ville) {
        villes.$save(ville);
    };
 
    var supprimerVille = function (id) {
        villes.$remove(id);
    };
 
	return {
        getVilles: 		getVilles,
        ajouterVille: 	ajouterVille,
        editerVille: 	editerVille,
        supprimerVille: supprimerVille
 
    }
}])

general.js :

Code :

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

1
2
3
var app = angular.module('app', ['firebase','ui.bootstrap','ngRoute','textAngular'])
 
app.constant('FIREBASE_URI','https://blinding-heat-XXXX.firebaseio.com/villes/')

article sur mon blog

Micro application partagée CRUD avec stockage Firebase noSql en ligne, en Français.

AngularJS

Discussions similaires

Partager

Partager