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
Côté client, on utilise les principales notions d'Angular JS*:
L'application est mise en exploitation dans deux domaines*:
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*;
-
plawyxMembre chevronnéil y a petit pb:
Code : 1
2
3
4Not Found The requested URL /angularjs-spring4/] was not found on this server.
le 08/07/2014 à 15:29 -
Serge TahéExpert éminentvu et corrigé. Merci.le 08/07/2014 à 15:42
-
Serge TahéExpert éminentCorrection 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.
stle 10/07/2014 à 9:08 -
Marco46Expert éminent séniorBonjour,
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.le 16/07/2014 à 18:21 -
LakhdrMembre actifBonjour!
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 Freezle 26/07/2014 à 21:58 -
Serge TahéExpert éminent@Marco46
Je regrette l'absence de tests (unitaires, intégration, et fonctionnels) sur ce tutoriel.
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.le 28/07/2014 à 21:08 -
Serge TahéExpert éminent@LakhdrJe 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 ?le 28/07/2014 à 21:13
-
Marco46Expert éminent séniorIE 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 ^^le 29/07/2014 à 16:02 -
loqmanosCandidat au ClubExcellent tuto merci Monsieu Tahéle 16/10/2014 à 15:16
-
mohamed-abdawaFutur Membre du ClubBonjour,
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é.le 05/02/2015 à 11:33