Developpez.com - Rubrique Spring

Le Club des Développeurs et IT Pro

Apprendre à développer une application client/serveur avec AngularJS et Spring,

Un tutoriel de Serge Tahé

Le 2014-07-08 15:26:04, par Serge Tahé, Expert éminent
Bonjour,

J'ai mis en ligne [http://tahe.developpez.com/angularjs-spring4/] un tutoriel (320 pages) présentant une application client / serveur où le client est développé avec AngularJS et le serveur avec Spring 4.

Il peut être utilisé comme document d'apprentissage des deux frameworks. Tous les éléments de l'architecture du code sont disséqués et analysés.

Côté serveur, on utilise les technologies
  • [Spring Data] pour l'accès à la base de données*;
  • [Spring MVC] pour le service web*;
  • [Spring Security] pour la sécurisation de celui-ci*;


Côté client, on utilise les principales notions d'Angular JS*:
  • développement MVC*;
  • utilisation de services*;
  • utilisation de directives*;
  • étude approfondie de la notion de modèle*;


L'application est mise en exploitation dans deux domaines*:
  • comme une application web classique*;
  • comme un binaire exécutable Android produit par Phonegap*;
  Discussion forum
15 commentaires
  • plawyx
    Membre chevronné
    il y a petit pb:

    Code :
    1
    2
    3
    4
    Not Found
    
    The requested URL /angularjs-spring4/] was not found on this server.
  • Serge Tahé
    Expert éminent
    vu et corrigé. Merci.
  • Serge Tahé
    Expert éminent
    Correction d'une coquille au paragraphe 4.4 qui décrit l'installation de l'application sur un mobile Android. J'avais écrit que côté serveur les entêtes CORS devaient être générés. C'est incorrect. Ils n'ont pas à être générés puisque l'application Android ne s'exécute pas dans un navigateur.

    st
  • Marco46
    Expert éminent sénior
    Bonjour,

    j'ai parcouru rapidement.

    Je regrette l'absence de tests (unitaires, intégration, et fonctionnels) sur ce tutoriel. C'est une problématique à prendre en compte lors de la conception du code et AngularJS a été entre autres conçu pour répondre à un besoin croissant de rationalisation dans les méthodo de dev frontend (injection de dépendance native, Jasmine via Karma pour tests unitaires et e2e, archi orientée services, mock de $http natif, ...)

    Sinon super.
  • Lakhdr
    Membre actif
    Bonjour!

    Je souhaite connaitre votre avis sur ce genre d applications a savoir ce qui ce dit HTML5 souvent Angularjs , bootstrap.....! concerant l gestion des ressources sur un navigateur web ?
    Sur votre exemple d application pas de soucis ca passera puisqu il s agit d un petit exemple , avec 4 ou 5 controler et autant de directives et fichier JS ,
    Mais imaginons une tres grande application
    Ou l on se met a charger l ensemble de l application (JS) sur le navigateur heinnnn???
    J ai teste votre application et c est juste un exemple de quelques pages sur une machine (VM) a 256 Mo RAM !
    IE crache au bout de trois navigation !
    Chrome Bloque toute la machine
    FF Freez
  • Serge Tahé
    Expert éminent
    @Marco46
    Je regrette l'absence de tests (unitaires, intégration, et fonctionnels) sur ce tutoriel.
    Il ne faut pas. Dès l'introduction, il est indiqué clairement que le tutoriel n'est pas exhaustif et je donne des références pour "combler" les manques, notamment le livre d'Adam Freeman "Pro AngularJS", qui a un chapitre consacré aux tests. Dans ma conclusion, j'indique que je n'ai pas couvert les tests mais que ceux-ci sont très importants et qu'Angular est accompagné d'outils pour les faire de façon professionnelle et automatisée.

    Je n'avais pas pour objectif d'être exhaustif mais simplement de permettre au lecteur de démarrer une auto-formation avec AngularJS et Spring.
  • Serge Tahé
    Expert éminent
    @Lakhdr

    Je souhaite connaitre votre avis sur ce genre d applications a savoir ce qui ce dit HTML5 souvent Angularjs , bootstrap.....! concerant l gestion des ressources sur un navigateur web ?
    Je n'en ai pas. J'ai travaillé avec une machine avec 8 Go de Ram. Au cours des quelques mois où j'ai écrit ce tutoriel, ma machine a planté plusieurs fois sans raison apparente mais pas lors de tests de l'application. Néanmoins, j'ai effectivement suspecté des fuites mémoire causées par les différents tests que j'ai pu faire. Sans preuve. Mais je ne serais pas étonné que les problèmes que vous évoquez puissent se produire.
  • Marco46
    Expert éminent sénior
    Envoyé par Lakhdr
    Bonjour!

    Je souhaite connaitre votre avis sur ce genre d applications a savoir ce qui ce dit HTML5 souvent Angularjs , bootstrap.....! concerant l gestion des ressources sur un navigateur web ?
    Sur votre exemple d application pas de soucis ca passera puisqu il s agit d un petit exemple , avec 4 ou 5 controler et autant de directives et fichier JS ,
    Mais imaginons une tres grande application
    Ou l on se met a charger l ensemble de l application (JS) sur le navigateur heinnnn???
    J ai teste votre application et c est juste un exemple de quelques pages sur une machine (VM) a 256 Mo RAM !
    IE crache au bout de trois navigation !
    Chrome Bloque toute la machine
    FF Freez
    IE quelle version ?

    256 mo de RAM c'est vraiment très peu. Trop peu pour les navigateurs modernes. Or il est très clairement indiqué par les concepteurs d'Angular que le framework ne s'adresse qu'aux navigateurs Evergreen.

    Pour ce qui est des performances, je développe actuellement une application web mobile dans un grand compte. On supporte toute une série de tablettes et mobiles et les performances sont au rendez-vous. Que ce soit en terme de temps d'exécution comme en terme de taille des flux.

    Après nous avons effectué pas mal d'optimisations, comme par exemple l'intégration de requireJS pour effectuer du lazy loading sur l'application. Cela règle l'essentiel du problème du bootstrap de l'application.

    Néanmoins il faut savoir que le lazy loading sera en natif dans Angular 2. Enfin c'est ce que les dev du framework veulent faire.

    Une dernière solution consiste à découper l'application en sous-applications.

    @Serge Tahé
    Ok bien reçu ^^
  • loqmanos
    Candidat au Club
    Excellent tuto merci Monsieu Tahé
  • mohamed-abdawa
    Futur Membre du Club
    Bonjour,

    Je viens de découvrir ce tutoriel. Je trouve qu'il est bien structuré et très claire avec pas mal d'exemple à l'appui.

    Merci monsieur Tahé.