comment basculer broadleaf thymeleaf à angularjs ui

Question

Je veux changer l'interface utilisateur thymeleaf à angulairejs.

modifié

<!-- Commented bean --> 
<!-- <bean class="org.broadleafcommerce.common.web.BroadleafThymeleafViewResolver"> 
     <property name="templateEngine" ref="blWebTemplateEngine" /> 
     <property name="order" value="1" /> 
     <property name="cache" value="${thymeleaf.view.resolver.cache}" /> 
     <property name="characterEncoding" value="UTF-8" /> 
    </bean> --> 

Added new viewresolver 
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 
     <property name="prefix"> 
      <value>/WEB-INF/templates/</value> 
     </property> 
     <property name="order" value="1" /> 
    </bean> 

Exclus thymeleaf pot et ajouté tous les haricots comme par http://www.broadleafcommerce.com/docs/core/current/appendix/removing-thymeleaf

obtenir erreur lors de chargement de la page

Aucun mappage trouvé pour la requête HTTP avec l'URI [/ WEB-INF /templates/index.html] dans DispatcherServlet avec le nom 'mycompany'

Answer 1

Pourquoi supprimeriez-vous le thym? feuille complètement? Essayez-vous de faire isomorphe? Si ce n'est pas le cas, tout ce que vous avez à faire est toujours de rendre les templates Thymeleaf mais utilisez cela pour simplement inclure la bibliothèque AngularJS sur la page et ne rien faire d'autre dans Thymeleaf. Ensuite, vous écrivez tout sur le frontend comme vous le feriez avec une application Angular normale. En outre, si vous utilisez les contrôleurs Broadleaf (ceux fournis dans l'application de démonstration), vous devrez les modifier à peu près tous (ou simplement les jeter) si vous voulez changer complètement la structure du template. . Dans ce cas, le contrôleur renvoie "index" mais maintenant Spring ne sait pas comment interpréter "/WEB-INF/templates/index.html" car vous avez supprimé le résolveur d'affichage.

Answer 2

Les contrôleurs de broadleaf retournent les vues. Le résolveur de vue Broadleaf mappe ensuite les vues pour rediriger l'interface utilisateur.

Dans le cas d'AngularJS, le contrôleur angulaire attend JSON de la réponse aux appels de service car la navigation dans la vue peut être prise en charge par le module routeProvider de angularJS. Nous pouvons créer nos propres RestControllers et autowire Broadleaf. Convertissez la réponse du service broadleaf en JSON et revenez de RestController.

Dans le contrôleur AngularJS, nous obtiendrons JSON et, en fonction de la réponse, nous pouvons décider d'utiliser $ location.path ("/ path"). Et Path Navigation peut être géré par $ routeProvider.

Mais dans cette approche, nous ne pouvons pas tirer parti de Broadleaf Controller, de la validation, de la liaison UI, etc. Vous pouvez vérifier si cela est accepté.

Answer 3

Je recommande de construire un nouveau projet angulaire au lieu de modifier l'interface utilisateur existante. Broadleaf Community Starter a un module api qui a déjà des services de repos.

Je construis un projet de site angulaire. Je voudrais partager mon chemin. Je vérifie le projet broadleaf community starter. Noms de paquet refacturés. Configuré pour fonctionner avec mysql. Après avoir réussi à exécuter community starter admin, site, projets api avec mysql. J'ai créé un projet "angulaire" séparé (par jhipster) pour ui. J'ai ajouté le projet broadleaf modifié en tant que dépendance. J'étends les contrôleurs api à feuilles larges existants dans mon projet ng-site. Trouvé un thème HTML. Parse-le aux composants angulaires. Création de services angulaires et liaison aux restservices backend. Cela fonctionne en partie.

Voici mes sources de projet ng-site. Ce n'est pas fini mais ça peut vous donner une idée.