[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

Truc 24 : Les opérateurs de comparaison en JS, plus ou moins stricts…

Introduction


Lors de la création d’une fonction avec un test conditionnel, Js permet une comparaison plus ou moins stricte.

Exemples :


0 == false // true
0 === false // false, Parce qu’ils sont d’un type différent
1 == « 1 » // true, automatic type conversion for value only
1 === « 1 » // false, Parce qu’ils sont de type différents
null == undefined // true
null === undefined // false
‘0’ == false // true
‘0’ === false // false

Truc 23 : Utiliser $rootScope pour créer des variables globales inter Controlleurs.

Introduction


Pour partager des variables entre controleurs, on utilise un service ou une factory.

Pour écrire des données dans une factory, on utilise une fonction « setter ».

Mais, parfois, si on a pas le temps, on peut créer des variables globales directement à l’aide de $rootScope , de cette façon on a accès à la variable dans tous les contrôleurs.

Comment faire?


Etape 1 :

Intégrer $rootScope au controlleurs concernés comme cela :

.controller(‘loginCtrl’, function ($scope,ServiceData,$http,$rootScope){

};

Etape 2 :

Créer une variable globale dans le premier controleur, par exemple :

$rootScope.nom = { value:’durand’};

Etape 3:

Ecrire dans la vue Html qui dépends d’un second controleur une réfèrence à la variable globale, et ça marche, le 2 way binding mets à jour la variable globale, alors que normalement, les 2 controleurs ne partagent pas les variables !

<input type= »text » ng-model= »nom.value »>

Truc 22 : Le squelette d’une application Mvc Angular avec Routing de Vue.

angularjs
Introduction


Après avoir fait plusieurs exercices d’applications Angular sans routing, et donc pas MVC, je passe donc au routing de vue.

Ce squelette sera celui que j’utiliserais dans mes futures apps Angular. Sauf qu’en plus il faut séparer dans des répertoires séparés(Controlleurs, Modèle, Vue et Factories).

Pour le tester, c’est ici .

L’intérêt ?

Le gain de performance , et la logique. En effet, chaque vue HTML est liée à un controleur, les élèments sont séparés en mémoire, ce qui permet de créer de grosses applications.

Si un controleur comporte une erreur, alors c’est la vue liée qui plante, et pas le reste de l’application.

Voici donc un squelette de base d’une application Mvc Angular :

Le Code :



<!DOCTYPE html>
<html ng-app="monApp">
  <head>
   <meta charset="utf8" >
    <title>Squelette de base d application MVC Angular</title>
        <!-- CHARGEMENT DES LIBRAIRIES -->
        <!-- APPEL 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>
         <!-- CSS DE L APPLICATION -->
        <link href="app10.css" media="screen" rel="stylesheet" type="text/css" />
        <script>

        <!-- Déclaration des modules utilisés par l application MVC Angular, ngRoute est obligatoire pour router les vues : Les modules sont spécifiés entre Crochets, on en trouve des centaines sur internet, ils extendent les capacités d Angular, ce sont des librairies -->
         var monApp = angular.module('monApp',['ngRoute'])

        <!-- Configuration des vues et de leurs controleurs affiliés, avec ng-route . Note : Les vues peuvent partager le même controleur-->
        .config(function ($routeProvider, $locationProvider){
          $routeProvider
            .when('/accueil', {
              templateUrl: 'defaut.html',
              controller: 'accueilCtrl'
            })
            .when('/liste', {
              templateUrl: 'liste.html',
              controller: 'listeCtrl'
            })
            .when('/detail', {
              templateUrl: 'detail.html',
              controller: 'editDetailsCtrl'
            })
            .when('/statistiques', {
              templateUrl: 'stats.html',
              controller: 'stats'
            })
            .otherwise({redirectTo: '/accueil'});
        })

        <!-- Ci-dessous, les différents controleurs qui opèrent sur les vues, ils peuvent partager le modèle de data à l'aide d'une factory, à ce moment là, il faut inclure la factory dans les options du controleur.. Généralement, les controleurs sont dans un répertoire séparé appellé "controllers" pour être à la norma bower Grunt -->

        <!-- LE CONTROLEUR DE L ACCUEIL -->
        .controller("accueilCtrl", function($scope) {
            $scope.bonjour = "Mr Durand";
        <!-- FIN DU CONTROLEUR -->
        })

        <!-- LE CONTROLEUR DE LA LISTE -->
        .controller("listeCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })

        <!-- LE CONTROLEUR D UN OBJET A EDITER -->
        .controller("editDetailsCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })

        <!-- LE CONTROLEUR DES STATISTIQUES -->
        .controller("stats", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })

    </script>
 </head>

 <!-- La page HTML générale -->
<body ng-controller="accueilCtrl" >

	<!-- Le menu, qui appelle,grâce à HREF, les différentes vues HTML situées plus bas, puis les affiche dans la balise ng-view -->
	<div class="container ">
		<div class="menu designDiv">
			<a href="#/accueil" class="">Accueil</a>
			<a href="#/liste" class="">Liste  </a>
			<a href="#/detail" class="">Details</a>
			<a href="#/statistiques" class="">Stats</a>
		</div>
		<!-- Cette balise NG-View va afficher les différentes vues -->
		<div id="main" class="designDiv">
			<div ng-view></div>
		</div>
	</div>
</body>

<!-- Voici maintenant la liste des vues qui s affichent dans la balise ng-view(voir plus haut), qui doivent généralement être dans un fichier séparé, normalement dans un réperoire "views", pour être à la norme BOWER -->
<!-- VUE HTML : DEFAUT-->
    <script type="text/ng-template" id="defaut.html">
        Bonjour {{bonjour}} je suis la vue de l accueil.
    </script>

<!-- VUE HTML : LISTE -->
    <script type="text/ng-template" id="liste.html">
        Bonjour, je suis la vue qui présente une liste d objets.
    </script>

<!-- VUE HTML : LISTE -->
    <script type="text/ng-template" id="detail.html">
        Bonjour, je suis la vue qui présente le detail d un objet.
    </script> 

<!-- VUE HTML : STATS -->
    <script type="text/ng-template" id="stats.html">
        Bonjour, je suis la vue qui présente des statistiques.
    </script>

Truc 13 : Exécuter une instruction sur évènement avec $watch

Introduction


On peut actionner des instructions en fonction d’actions utilisateurs avec une fonction $watch

Le code :



<html ng-app="trucs">
	<head>
		<title> Fonction watch qui exécute quqchose sous condition</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>
		angular.module('trucs',['ui.bootstrap']).controller("Controleur", function ($scope) {
			$scope.nom = "";
			$scope.$watch("nom", function(newValue, oldValue) {
			if ($scope.nom.length > 0) {
				$scope.bienvenue = "Bienvenue " + $scope.nom;
				}
			});
		});
		</script>

	</head>	

	<body >
<div ng-controller="Controleur">
		<input type="text" ng-model="nom" placeholder="Entrez votre Nom">{{bienvenue}}

</body>
 </html>

Truc 14 : Partager un modèle entre plusieurs Controleurs à l’aide de $parent.

Introduction:


PArfois, on doit partager un modèle entre plusieurs controleurs Angular.

Comment faire ?


Soit avec sune factory, soit avec $parent, ici nous voyons le cas avec $parent .

Le code:


<html ng-app="trucs">
	<head>
		<title> partager un modèle pour plusieurs controleurs grâce à $parent</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('trucs',['ui.bootstrap']);

		app.controller("MyCtrl", function ($scope) { 

			$scope.name = "Peter";
			$scope.user = {
			name: "Parker"
			};
		});

			app.controller("MyNestedCtrl", function($scope) { });
		</script>
	</head>

	<body >
		<div ng-controller="MyCtrl">
			<label>Primitive</label>
			<input type="text" ng-model="name">

			<label>Object</label>
			<input type="text" ng-model="user.name">

			<div class="nested" ng-controller="MyNestedCtrl">
				<label>Primitive</label>
				<input type="text" ng-model="name">

				<label>Primitive with explicit $parent reference</label>
				<input type="text" ng-model="$parent.name">
				<label>Object</label>
				<input type="text" ng-model="user.name">
			</div>
		</div>

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>