Laravel et AngularJS : données et initialisation Dans cet article nous allons voir les données et l’initialisation de l’application. Comment est géré l’utilisateur et comment l’interface s’adapte selon son statut. Il nous faut savoir dans un premier temps s’il est connecté ou pas. On doit lui donner la possibilité de se connecter, se déconnecter, de créer, modifier, supprimer un rêve. On veut aussi afficher la première page des rêves et la pagination. Nota : cet article est le deuxième de la série, le premier se trouve ici. Les données Pour cette application les données sont simples puisqu’on a besoin seulement de deux tables : une pour les utilisateurs et une pour les rêves : La table users correspond à celle de l’installation de base de Laravel, j’ai juste ajouté le champ admin. Les migrations ont été constituées en conséquence. La table dreams contient les rêves. Elle est reliée à a table users par la clé étrangère user_id. On a une relation de type 1:n entre les deux tables. Un utilisateur a plusieurs rêves mais un rêve appartient à un seul utilisateur. Les relations ont ainsi été établies dans les deux modèles. Dans User : /** * The hasMany relation. * */ public function dreams() { return $this->hasMany('App\Dream'); } Et dans Dream : /** * The belongsTo relation. * */ public function user() { return $this->belongsTo('App\User'); } Pour que l’application fonctionne j’ai prévu un seeder qui crée deux utilisateurs (le premier est administrateur) et 10 rêves avec un texte standard et affectés aléatoirement à chacun des deux : 'admin', 'email' => 'admin@use.fr', 'password' => bcrypt('admin'), 'admin' => true ]); User::create([ 'name' => 'user', 'email' => 'user@use.fr', 'password' => bcrypt('user') ]); foreach (range(1, 10) as $i) { Dream::create([ 'content' => $i . ' ' . $this->lorem, 'user_id' => rand(1, 2) ]); } } } Donc pour les essais de l’application vous pouvez vous connecter avec l’un de ces utilisateurs. Tout commence par une route On a vu les routes dans le dernier article. On initialise l’application avec l’url de base ‘/’ : Route::get('/', function(){ return view('index'); }); On se contente de renvoyer la vue index : Cette vue comporte une en-tête pour charger toutes les librairies nécessaires : bootstrap, font-awesome, les polices Google, JQuery, grayscale et évidemment AngularJS et ses dépendances. On initialise le contrôleur principal AppCtrl de l’application AngularJS pour tout le body : Dans ce contrôleur on procède à des initialisations : dreamsControllers.controller('AppCtrl', ['$scope', 'Log', 'Logout', 'Dream', function AppCtrl($scope, Log, Logout, Dream) { // Variables $scope.isLogged = false; ... /* Initial log */ Log.get({}, function success(response) { $scope.isLogged = response.auth; }, function error(errorResponse) { console.log("Error:" + JSON.stringify(errorResponse)); } ); ... On veut savoir si l’utilisateur est connecté, il faut donc interroger le serveur à ce sujet. On a vu les services mis en place dans le dernier article. Voici celui qui correspond à cette action : var dreamsServices = angular.module('dreamsServices', ['ngResource']); dreamsServices.factory('Log', ['$resource', function ($resource) { return $resource("log", {}, { get: {method: 'GET'} }); }]); Nota : on pourrait s’arranger pour obtenir cette information dès le chargement initial de la page mais je trouve plus propre de procéder ainsi. Côté Laravel c’est dans le contrôleur AuthController qu’on va générer la réponse : /** * Get auth * * @return json */ public function log() { return response()->json(['auth' => $this->auth->check()]); } On va ainsi pouvoir renseigner la variable isLogged du scope : $scope.isLogged = response.auth; Le menu A quoi cela sert la variable isLogged ? En premier à paramétrer correctement le menu : Si l’utilisateur est connecté on obtient cet aspect : S’il ne l’est pas c’est celui-ci : Le formulaire D’autre part on veut aussi adapter le formulaire de bas de page :

Login

I want to suscribe !

Add a dream

S’il est connecté on affiche le formulaire de création d’un rêve : Sinon on lui présente le formulaire de connexion : Les rêves On veut aussi afficher la première page des rêves dans cet emplacement :

Dream of {{ dream.user.name}}

Essentiellement on utilise un ng-repeat qui passe en revue une variable data. Mais pour le moment cette variable est vide. On doit aussi renseigner la pagination. Revenons au contrôleur : dreamsControllers.controller('AppCtrl', ['$scope', 'Log', 'Logout', 'Dream', function AppCtrl($scope, Log, Logout, Dream) { // Variables $scope.isLogged = false; $scope.data = {}; $scope.page = 1;

données et initialisation,Laravel et AngularJS : présentation,Les relations avec Eloquent

Similar données et initialisation,Laravel et AngularJS : présentation,Les relations avec Eloquent