Laravel et AngularJS PDF
Preview Laravel et AngularJS
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 : <?php use Illuminate\Database\Seeder; use Illuminate\Database\Eloquent\Model; use App\User; use App\Dream; class DatabaseSeeder extends Seeder { protected $lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'; /** * Run the database seeds. * * @return void */ public function run() { Model::unguard(); User::create([ 'name' => 'admin', 'email' => '[email protected]', 'password' => bcrypt('admin'), 'admin' => true ]); User::create([ 'name' => 'user', 'email' => '[email protected]', '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 : <body id="page-top" data-spy="scroll" data-target=".navbar-fixed- top" ng-controller="AppCtrl"> 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 : <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-right navbar-main- collapse"> <ul class="nav navbar-nav"> <!-- Hidden li included to remove active class from about link when scrolled up past about section --> <li class="hidden"> <a href="#page-top"></a> </li> <li> <a class="page-scroll" href="#dreams">Dreams</a> </li> <li ng-show="isLogged"> <a class="page-scroll" href="#auth">Add a dream</a> </li> <li ng-hide="isLogged"> <a class="page-scroll" href="#auth">Login</a> </li> <li ng-show="isLogged"> <a ng-click="logout()" href>Logout</a> </li> </ul> </div> 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 : <!-- Auth Section --> <section id="auth" class="content-section"> <div class="download-section"> <div class="container"> <div class="col-lg-8 col-lg-offset-2"> <div ng-hide="isLogged" > <h2 class="text-center">Login</h2> <form ng-controller="LoginCtrl" ng- submit="submit()" accept-charset="UTF-8" role="form"> // Formulaire de login </form> <div class="text-center"> <br> <a href="auth/register" class="btn btn- default">I want to suscribe !</a> </div> </div> <div ng-show="isLogged" > <h2 class="text-center">Add a dream</h2> <form ng-controller="DreamCtrl" ng- submit="submitCreate()" accept-charset="UTF-8" role="form"> // Formulaire de création d'un rêve </form> </div> </div> </div> </div> </section> 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 : <!-- Dreams Section --> <section id="dreams" class="container content-section text- center"> <div class="row"> <div class="col-lg-10 col-lg-offset-1"> <nav> <ul class="pager"> <li ng-show="previous" class="previous "><a ng-click="paginate('previous')" class="page-scroll" href="#dreams"><< Previous</a></li> <li ng-show="next" class="next"><a ng- click="paginate('next')" class="page-scroll" href="#dreams">Next >></a></li> </ul> </nav> <div ng-repeat="dream in data" class="cadre"> <h2> Dream of {{ dream.user.name}} </h2> <p>{{ dream.content}}</p> <h2> <div ng-if="dream.is_owner"> <a ng-click="edit(dream.id, $index)" href> <span class="fa fa-fw fa- pencil"></span> </a> <a ng-click="destroy(dream.id)" href="#dreams"> <span class="fa fa-fw fa- trash"></span> </a> </div> </h2> </div> <nav> <ul class="pager"> <li ng-show="previous" class="previous"><a ng- click="paginate('previous')" class="page-scroll" href="#dreams"><< Previous</a></li> <li ng-show="next" class="next"><a ng- click="paginate('next')" class="page-scroll" href="#dreams">Next >></a></li> </ul> </nav> </div> </div> </section> 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;
Description:The list of books you might like
