Exercise 18: Views - jkneal/spring-angular-train GitHub Wiki

Goals

Learn how to forward to views and redirect. Learn how to create Thymeleaf templates.

Instructions

  1. In src/main/resources/templates, create a new folder named 'shop'

  2. Now in src/main/resources/templates/shop, create a new file named 'index.html'

  3. In index.html, add the standard HTML 5 doctype, followed by the html tag that imports thymeleaf into the 'th' namespace

  4. Next add the following content to index.html:

 <head th:replace="home :: head">
 </head>
 
 <body>
   <header th:replace="home :: header">
   </header>
   
   <main class="container">
   </main>
   
   <footer th:replace="home :: footer">
   </footer>
   
   <div th:replace="home :: scripts">
   </div>
 </body>

  1. Now within the main tag, add a hyperlink for the path '/shop/back'. Display 'Back' for the link text, and add the CSS class 'right'

  2. After the link you created in step 5, add a blockquote. The blockquote should display the external message with key 'msgs.todaysSales', and default to the text "Today's Sales" (for natural templating). Finally add the CSS classes 'red-text' and 'text-lighten-1'

  3. In src/main/resources create a new file named 'messages.properties'

  4. In messages.properties, add a message with key 'msgs.todaysSales' and value "50% Off All Items!"

  5. In edu.train.shop.ShopController, change the method getAllProducts to return the logical view name for the view you created in step 2

  6. In the same controller, add a new method named 'back' that maps to the request path '/shop/back' and accepts Http Get methods. Within this method, redirect to the path "/"

VERIFICATION

  1. Start the training application and go to the app home page
  2. Click on the link 'Exercise 18'. Verify the returned page looks like the following:

  1. Not click the link with text 'Back' and verify you are returned to the app home page (menu)
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️