CODEWITHSUNDEEP
javaangularjsspring-mvcbroadleaf-commerce
Sanjit Vimal
Sanjit Vimal

Reputation: 31

how to switch broadleaf thymeleaf to angularjs ui

I want to change broadleaf thymeleaf ui to angularjs.

edited

    <!-- 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>

Excluded thymeleaf jar and added all beans as per http://www.broadleafcommerce.com/docs/core/current/appendix/removing-thymeleaf

getting error while loading the page

No mapping found for HTTP request with URI [/WEB-INF/templates/index.html] in DispatcherServlet with name 'mycompany'

Upvotes: 2

Views: 948

Answers (3)

Mehmet Sunkur
Mehmet Sunkur

Reputation: 2423

I recommend to build a new angular project instead modifiying existing broadleaf ui. Broadleaf Community Starter project has api module which has rest services already.

I am building an angular site project. I would like to share my way. I checkout broadleaf community starter project. Refactored package names. Configured to work with mysql. After able to run community starter admin,site,api projects with mysql. I created a separate "angular" project(by jhipster) for ui. I added modified broadleaf project as dependency. I extend existing broadleaf api controllers in my ng-site project. Found an html theme. Parse it to angular components. Created angular services and bind to backend restservices. It is working partly.

Here is my ng-site project sources. It is not finished but it can give you an idea.

Upvotes: 2

Chandra
Chandra

Reputation: 1

Broadleaf Controllers return the views. Broadleaf view resolver then maps the views to redirect the UI.

In case of AngularJS, Angular Controller expects JSON from service call response because the view navigation can be taken care by routeProvider module of angularJS. We can create our own RestControllers and autowire Broadleaf services. Convert broadleaf service response into JSON and return from RestController.

In AngularJS controller we will get JSON and based on the response we can decide view using $location.path("/path"). And Path Navigation can be managed by $routeProvider.

But in this approach we can not take benefit of Broadleaf Controller, Validation, UI binding etc. You can check if this is accepted.

Upvotes: 0

phillipuniverse
phillipuniverse

Reputation: 2045

Why would you remove Thymeleaf completely? Are you trying to do isomorphic? If not, all you have to do is still render the Thymeleaf templates but use that to just include the AngularJS library on the page and not do anything else in Thymeleaf. Then you just write everything on the frontend like you would with a normal Angular app.

Also, if you're using the Broadleaf controllers (the ones provided in the demo application) then you will need to change pretty much all of them (or just throw them away) if you want to completely change the template structuring. In this case, the controller is returning "index" but now Spring doesn't know how to interpret "/WEB-INF/templates/index.html" because you removed the view resolver.

Upvotes: 2

Related Questions