[AngularJs] Ma Petite présentation sur un forum.

LE FRONT END


En Front end, tu travailles avec le format JSON pour gérer tes données :
La plupart du temps, on utilise des tableaux d’objets JSON qui permettent de gérer facilement les données :

Exemple : un tableau d’objet Json, que tu mets dans une variable:


var personnes =
[
	{ "nom":"Dupuis","prenom":"Henri","email":"henri.d@gmail.com"},
	{ "nom":"Hammed","prenom":"Mohammed","email":"h.m@gmail.com"},
	{ "nom":"Gonzales","prenom":"José","email":"h.m@gmail.com"}
];

La différence, avec AngularJs, c’est que tu peux afficher tout en direct dans ta vue HTML, dans ce cas, il faut écrire ça dans le controleur AngularJs:


angular.module('neutre', [])

.controller('neutreCtrl', function($scope) {

$scope.personnes =
[
	{ "nom":"Dupuis","prenom":"Henri","email":"henri.d@gmail.com"},
	{ "nom":"Hammed","prenom":"Mohammed","email":"h.m@gmail.com"},
	{ "nom":"Gonzales","prenom":"José","email":"h.m@gmail.com"}
];

/* FIN DU CONTROLEUR */
});

puis, on écrira ceci dans la vue HTML pour afficher toutes les données de notre tableau JSON $scope.personnes dans le navigateur :


<head>
	<!-- CHARGEMENT DES LIBRAIRIES -->
	<!-- ANGULARJS -->
	<script src='bower_components/angular/angular.min.js'></script>
</head>

<body ng-app="neutre" >
<div ng-repeat="personne in personnes">{{personne.nom}}  {{personne.prenom}} {{personne.email}}</div>
</body>

->Toute modification de $scope.personnes sera désormais automatiquement répercutée en temps réel dans la vue HTML, c’est ça qui est génial, le 2 way binding, un gain de temps fantastique.

Exemple : Admettons que j’ajoute une personne dans mon tableau $scope.personnes avec la fonction push(), alors ton navigateur l’affichera automatiquement sans rien faire !

Il faudra taper ça dans le controleur angularJs, pour ajouter une personne à ton tableau $scope.personnes :

$scope.personnes.push({"nom":"Lambert","prenom":"William","email":"l.m@gmail.com"});

LE BACK END


Si ensuite, tu veux envoyer le tableau $scope.personnes au back end, tu peux faire une requête $http POST dans le controleur AngularJs (mais normalement il faut créer un service CRUD) :


$http.post('crud.php?action=insert_personnes',$scope.personnes).success(function(data){
        alert('Cest bon !');
    }).error(function(data){ $scope.infos = data});

Explication : La partie après Success est exécutée une fois que la requête $http est ok, c’est ce qu’on appelle une fonction de rappel !

En fait, une fois que tu as traité tes données dans le Front End, tu les envoie au back end avec des requêtes HTTP ($http pour angularjs,$.ajax avec jquery), Tu dois alors faire du MAPPING OBJET RELATIONNEL , $scope.personnes étant un tableau d’objets JSON, et MYSQL étant une base de données relationnelle. Ton but est de persister les données dans MYSQL

Les langages back end PHP et JAVA ne comprennent pas nativement le format JSON, il faut donc convertir le tableau d’objets JSON avec json_decode() avec PHP ou la librairie GSON avec Java pour pouvoir traiter les données dans le back End avec Php ou Java.

Voici un exemple de back end en PHP dans un fichier appelé crud.php qui récupère un tableau JSON qui a été envoyé par angularJs et l’insère dans une table SQL dans la function insert_station() (Qui n’a pas de rapport avec l’exemple précédent):


<?php
 
/* -------------------------------------------------BACK END EN PDO------------------------------------------  */
 
include('connexionConfig.php');
/* mysql_set_charset('utf-8'); */  /// très important
header( 'content-type: text/html; charset=utf-8' );
error_reporting(E_ALL ^ E_NOTICE); // important pour ne pas afficher les notice PHP sans cela le script ne marche pas.
 
/**  Switch Case pour récupérer la l'action demandée par le controleur  Angular **/
 
switch($_GET['action'])  {
    case 'get_stations' :   get_stations();
    break;
    case 'insert_station' : insert_station();
    break;
 
}
 
/* --------------------------------------------------CRUD  ------------------------------------------*/
 
 
function get_stations() { 
	try 
	{   
		$DB = connection();	
		$data = $DB->query('SELECT * FROM stations');
		/* Convertit en JSON  */    
		print_r(json_encode($data->fetchAll(PDO::FETCH_ASSOC)));
		/* ferme la connexion ? */
		$DB=null;
	}  
	catch(PDOException $e) 
	{
		file_put_contents('PDOErreurs.txt', $e->getMessage(), FILE_APPEND);  
	} 	              
}
 
function insert_station() {  
	/* Récupération des données POST Provenant du Front end*/
	 $data = json_decode(file_get_contents("php://input")); 
 
	/* Insertion en Bdd avec PDO */
	try {
		$DB = connection();	
		$req = $DB->prepare("INSERT INTO stations VALUES (?,?,?,?,?,?,?)"); 
		$req->execute(array(null,$data->nom,$data->type,$data->image,$data->telephone,$data->email,$data->taille));
		$DB=null;
 
	} catch (PDOException $e) {
		file_put_contents('PDOErreurs.txt', $e->getMessage(), FILE_APPEND);  
		die();
	}	
}

La ligne importante est $data = json_decode(file_get_contents(« php://input »));
C’est elle qui récupère ton tableau JSON qui s’appelle $scope.personnes( ou $scope.stations pour cet exemple) qui provient de angularJs(Le front end), ensuite, tu peux traiter ces données avec PHP et les mettre dans une base de données MYSQL

Ne pas oublier le fichier PHP qui configure la connexion à la BDD : connexionConfig.php :


<?php
function connection(){
    static $DBH;
    $DBH = new PDO('mysql:host=localhost;dbname=test', 'root', 'root');
          $DBH->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
    return $DBH;
}
?>
Publicités