Salut, quelles sont les utilisations d'AngularJS, je sais que joue le rôle du front office mais est ce que peut joue le rôle du back office surtoût quand il utilisée dans développement web avec laravel,symfony etc !!
Salut, quelles sont les utilisations d'AngularJS, je sais que joue le rôle du front office mais est ce que peut joue le rôle du back office surtoût quand il utilisée dans développement web avec laravel,symfony etc !!
Salut,
AngularJs est une organisation de travail (Framework) autrement dit, un framework qui structure le javascript, en particulier pour les accès réseaux avec le Back End, et pour la gestion des vues HTML avec le routing.
Les accès réseaux peuvent être simplifiés par la création de services, et testés par ce biais avec Jasmine.
Le Javascript dans sa vieille version 5 est un super langage, plus simple que PHP le format de données JSON est très agréable, souple et logique à utiliser.
Il dispose de librairies que l'on peut ajouter, qui décuple son pouvoir (Les modules) exemple : AngularNvd3 (D3.js pour angular), des calendriers et d'autres.
AngularJs est orienté Temps réel et applications Web sans rechargement de page, il est très puissant, et pour qui sait utiliser le 2 way binding correctement, très rapide.
AngularJs étant lui même un Framework, je doute qu'il s'interface bien avec des anciens frameworks Php, qui sont néanmoins certainement très bien.
Pour ma part, j'utilise PHP sans framework pour mes back end avec AngularJs, et c'est génial !
Avant même AngularJs, c'est le Javascript qui est génial ! AngularJs Simplifie encore le tout (Requêtes $http, routing), et on peut coder sans problèmes en Français !
Symphony, Laravel sont des choses orientées création de web site ou peut être petites applications
AngularJs et Javascript, eux , permettent de créer des jeux, des graphiques, des applications super complètes avec du glissé déposé, des graphiques et des stats à gogo , c'est TROP PUISSANT et le nombre de librairies JS est trop bien, mais avant tout c'est orienté temps réel !
Dernière modification par Invité ; 26/10/2016 à 13h09.
donc angularJS joue le rôle du front end , mais tu dit "en particulier pour les accès réseaux avec le Back End" , qu'est ce que tu peut dire avec ce phrase , c'est à dire il relié front office avec back office ? et s'il vous plait donne moi des exemples pour comprendre utilisation AngularJS en developpement web et merci d'avance
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:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 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:
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 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 :
->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.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 <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>
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 :
Code : Sélectionner tout - Visualiser dans une fenêtre à part $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) :
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 !
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 $http.post('crud.php?action=insert_personnes',$scope.personnes).success(function(data){ alert('Cest bon !'); }).error(function(data){ $scope.infos = data});
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):
La ligne importante est $data = json_decode(file_get_contents("php://input"));
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 <?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(); } }
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 :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 <?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; } ?>
Si tu ne veux pas de PHP ou de JAVA, tu peux aussi utiliser Node.js dans le back end.
Dernière modification par Invité ; 26/10/2016 à 23h43.
merci beaucoup pour cette explication c'est génial ,j'ai quelques questions
je travaille avec php (exactement avec la framework symfony 2) ,dans symfony on travaille avec les path (par routing)
pour ce code en angular
dans la premiér partie de $http.post('',$scope.personnes) , la premiér partie qui je laisse vide on peut travailler avec des path (où on ajoute juste les routing !!!)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 $http.post('crud.php?action=insert_personnes',$scope.personnes).success(function(data){ alert('Cest bon !'); }).error(function(data){ $scope.infos = data});
merci d'avance
voici exemple de routing :
mon idée quand il travaille avec routing on envoyer la tableau $scope.personnes directement vers l'action qui permet de faire l'ajout
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 manage_dash: path: /test defaults: { _controller: AjoutBundle:Default:test }
merci d'avance
Salut, Symphony est un framework, moi j'utilise php sans framework avec un switch qui route les requêtes $http ANGULARJS au début.
Demande peut être dans le forum symphony ?
Je ne connais pas ce framework mais il doit être capable de "manger" du JSON. Ecris tu les requêtes SQL en dur ou est ce que c'est symphony qui génére les requêtes ?
Essaye déjà de placer un
Puis de faire un echo($data) ou un var_dump($data) dans ton back end.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 /* Récupération des données POST Provenant du Front end*/ $data = json_decode(file_get_contents("php://input"));
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager