Laravel et AngularJS : présentation

Mis à jour pour Laravel 5.2 !

Laravel est un superbe framework pour gérer le back-end mais qu’en est-il du front-end ? Les frameworks Javascript sont très nombreux et il est difficile de faire son choix tant les propositions de qualité sont variées. Il y a évidemment le grand classique et incontournable JQuery mais d’autres solution plus complètes se dessinent de plus en plus nettement. Il me semble que la plus aboutie est AngularJS. Dans cette série d’articles je vous propose de voir comment on peut articuler ces deux frameworks (AngularJS et Laravel) à l’aide d’une application un peu minimaliste mais suffisante pour évoquer suffisamment le sujet.

L’application

Vous pouvez trouver l’application qui va servir de support sur github. Je l’ai nommée Larangular pour évoquer les deux frameworks. Les instructions d’installation se trouvent avec le projet. Le but de l’application est de permettre à des utilisateurs de partager leurs rêves. Il suffit de s’inscrire pour pouvoir en laisser sur le site. On peut faire défiler tous les rêves et on a la possibilité de modifier ou même supprimer les siens. Un administrateur a accès à tous les rêves (un peu comme Dieu ^^).

Pour le template j’ai encore opté pour un gratuit de chez startbootstrap : Grayscale :

img75

Je le trouve plutôt réussi. J’ai juste changé les photos de fond et ajouté quelques règles de style pour le mettre plus à mon goût.

L’accueil

La page d’accueil se présente ainsi pour un utilisateur non connecté :

img76

Le menu est aussi simple que l’application. On peut atteindre les rêves par l’option DREAMS ou avec le bouton central. Pour se connecter au site on choisit l’option LOGIN. Comme l’approche est SPA (Simple Page Application) les éléments sont déjà présents sur la page chargée. C’est un scrollspy qui permet de les atteindre.

Les rêves

Les rêves se trouvent sur la partie centrale de la page :

img77

Le menu s’adapte pour signaler qu’on est dans la zone des rêves. Ces derniers signalent le nom de leur auteur, leur contenu. Ils sont séparés par une bordure pour la lisibilité de l’ensemble. D’autre part une pagination permet de passer aux rêves suivants ou précédents. Le chargement des rêves pour une page se fait avec une requête spécifique en rafraîchissant uniquement la zone concernée.

La connexion

Si on choisit l’option LOGIN la page glisse jusqu’au formulaire :

img78

On voit la possibilité de s’inscrire ou de renouveler le mot de passe. Ces actions ne sont pas traitées avec AngularJS. J’en parle un peu plus loin dans cet article.

La soumission est effectuée avec une requête spécifique. Les erreurs de saisie modifient le DOM juste pour renseigner l’utilisateur :

img79

Si les informations envoyées ne correspondent à aucun utilisateur dans la base on affiche une barre d’information (toujours sans régénération de la page) :

img80

Si la connexion réussit le menu s’adapte :

img81

On a maintenant le choix entre ajouter un rêve ou se déconnecter. D’autre part deux icônes apparaissent au niveau des rêves qui appartiennent à l’utilisateur pour la modification et la suppression :

img82

Modifier ou supprimer un rêve

Pour modifier un rêve on utilise l’icône en forme de stylo. Une fenêtre modale apparaît alors avec le formulaire :

img83

Si une erreur de saisie survient le message d’erreur apparaît sur la feuille modale :

img84

Si la validation est correcte le nouveau contenu est mis à jour dans la base côté serveur et sur la page côté client et évidemment la fenêtre modale se ferme.

Pour la suppression d’un rêve c’est plus simple. On affiche juste un petit message de confirmation. Si la réponse est positive on envoie une requête au serveur pour la mise à jour de la base et on supprime le rêve sur la page.

Remarque : un administrateur dispose des boutons sur tous les rêves.

Ajouter un rêve

Si on utilise l’option ADD A DREAM on glisse jusqu’au formulaire de création d’un rêve :

img85

Pour la validation c’est exactement comme pour la modification d’un rêve, le message apparaît en rouge léger sous la zone de saisie. Par contre comme le rêve est ajouté à la liste des rêves il faut rafraîchir toute la zone des rêves pour afficher la première page. Comme les rêves apparaissent dans l’ordre décroissant des dates de création le nouveau rêve va apparaître en premier de la première page.

Enregistrement utilisateur et reset du mot de passe

Pour la partie enregistrement d’un nouvel utilisateur et reset du mot de passe je ne l’ai pas traité avec AngularJS. Ce sont des actions ponctuelles et pas très fréquentes. J’ai prévu de les traiter pour avoir une application complète mais c’est du pur Laravel. Je me suis contenté de respecter l’esthétique du site. Par exemple pour le formulaire d’inscription :

img86

Comme toute cette partie est classique je n’en parlerai pas dans cette série d’articles.

Organisation du code

Côté client

Les fichiers côté client se trouvent évidemment dans le dossier public :

img87

On trouve :

  • le CSS du template grayscale.css
  • les polices font-awesome et celles de glyphicons
  • les images du template
  • les fichiers Javascript :
    • ceux du template : grayscale.js et jquery.easing.min.js
    • ceux de l’application pour AngularJS :
      • app.js : l’application
      • controllers.js : les contrôleurs
      • services.js : les services

Laravel

Contrôleurs

Pour Laravel on a les contrôleurs :

img88

Ceux pour l’authentification ont été un peu modifiés pour s’adapter aux requêtes d’AngularJS. Tout ce qui concerne les rêves est traité dans le contrôleur DreamController.

Modèles et repository

Voici les modèles et le repository :

img89

On verra les modifications apportées au modèle User. Tout ce qui concerne les rêves se situe dans le modèle Dream et la gestion des données se situe dans le repository DreamRepository.

Les vues

Voici les vues :

img02

Les vues pour l’authentification on été adaptées pour le template choisi. L’ensemble des informations nécessaires à AngularJS se situe dans le fichier index.php. D’autre part j’ai prévu une page 404 au look de l’application :

img91

Les routes

Un aspect intéressant concerne les relations entre les deux frameworks. Pour le côté SPA Laravel se présente comme une simple API. Pour la partie enregistrement d’un utilisateur et renouvellement du mot de passe Laravel par contre prend tout en charge.

Le fichier des routes est plutôt léger :

Route::get('/', function(){
    return view('index');
});

Route::auth();

Route::get('log', 'Auth\AuthController@log');

Route::resource('dream', 'DreamController', ['only' => ['index', 'store', 'update', 'destroy']]);

Ce qui nous donne ces routes :

img01

On peut les diviser en 3 groupes :

  • authentification
  • renouvellement du mot de passe
  • rêves

Mais on va s’intéresser essentiellement à l’aspect API.

Au niveau de l’authentification on a :

  • log (get) : pour savoir si l’utilisateur est authentifié
  • login (post) : pour connecter l’utilisateur
  • logout (get) : pour déconnecter l’utilisateur

Pour les rêves on a :

  • dream (get) : pour récupérer une page de rêves
  • dream (post) : pour créer un rêve
  • dream/{dream} (put ou patch) : pour modifier un rêves
  • dream/{dream} (delete) : pour supprimer un rêve

 Côté AngularJS il faut donc mettre en place les services qui vont utiliser cette API :

img93

Plutôt que d’utiliser $http j’ai préféré me servir de $resource qui simplifie grandement la syntaxe :

'use strict';

/* Services */

var dreamsServices = angular.module('dreamsServices', ['ngResource']);

dreamsServices.factory('Log', ['$resource',
    function ($resource) {
        return $resource("log", {}, {
            get: {method: 'GET'}
        });
    }]);

dreamsServices.factory('Login', ['$resource',
    function ($resource) {
        return $resource("login", {}, {
            save: {method: 'POST'}
        });
    }]);

dreamsServices.factory('Logout', ['$resource',
    function ($resource) {
        return $resource("logout", {}, {
            get: {method: 'GET'}
        });
    }]);

dreamsServices.factory('Dream', ['$resource',
    function ($resource) {
        return $resource("dream/:id", {page: '@page'}, {
            get: {method: 'GET'},
            save: {method: 'POST'},
            delete: {method: 'DELETE'},
            update: {method: 'PUT'}
        });
    }]);

On a ainsi toute l’intendance en place pour la communication entre les deux frameworks.

Dans le prochain article on continuera à analyser cette application.

6 réflexions sur “Laravel et AngularJS : présentation

  1. seifbh dit :

    Hello again ,
    Can I give you git project and please see it and let me know what do you think about my develoment way , before to keep on and learn others languages I wanna be sure if I use laravel on the right way – Please answer me and I will give you the link of my laravel project

    Thankyou

  2. seifbh dit :

    Salut ,
    D’abord je veux vous remercier par ce genial article
    Ensuite je veux posé une question a vous si ca ne te derange pas :

    Reelement j’ai une grande probleme avec une chose qui s’appelle constructeur et j’ai arreteé avec ce code
    /////////////////DreamController.php
    public function __construct(DreamRepository $dreamRepository)
    {
    $this->dreamRepository = $dreamRepository;

    //$this->middleware(‘ajax’, [‘except’ => ‘index’]);
    $this->middleware(‘auth’, [‘only’ => [‘store’, ‘update’, ‘destroy’]]);
    }
    ////////////
    peut tu m’expliquer ces ligne s’il te plait
    je te connais tu es un membre actif dans laracasts.com et tu vraiment utiles
    Merci d’avance

    • bestmomo dit :

      Bonjour,

      La méthode est le constructeur de la classe, donc une fonction qui est appelée lorsqu’une instance est créée.
      On injecte alors une instance de DreamRepository qui est chargé de la laison avec les données et qu’on mémorise dans la propriété $dreamRepository.
      Ensuite on applique le middleware auth pour les méthodes ‘store’, ‘update’ et ‘destroy’ pour limiter l’accès aux utilisateurs authentifiés.

Laisser un commentaire