Exercise 34: Routes and Views - jkneal/spring-angular-train GitHub Wiki

Learn how to create routes

1. In the directory partials, create a new file named home.html

2. Move the cart tag and div with ngInclude from products.html to home.html. After the cart tag in home.html, add a br tag (quick fix for a styling issue)

3. Now in the same directory create a file named add-product.html

4. Grab the content from products.html starting with the h2 ‘Add Product’ header and move to add-product.html

5. After the ‘add’ button, create a link with text ‘<- back’ that navigates to ‘#/home’

6. Again in the partials directory, create a file named checkout.html. In this file add the following content:

   <div class="alert alert-success">
     Thank you for your order! <a ng-href="#/home"><- back</a>
   </div>

7. Now in product.html, after the table add a link with text ‘add new product’ that will navigate to ‘#/add’

8. In app.js, add a config function to the ‘storeApp’ module. The config function should take $routeProvider as a dependency

9. Now configure the following three routes (‘path’ – ‘template’):

• ‘/home’ – ‘partials/home.html’
• ‘/add’ – ‘partials/add-product.html’
• ‘/checkout’ – ‘partials/checkout.html’

10. If none of the routes are matched, default to the route with path ‘/home’

1. Start the training application and go to the app home page
2. Click on the link 'Angular Exercises'
3. Verify on the initial screen after the products table the link with text ‘add new product’ appears
4. Click the link and verify the ‘Add Product’ section replaces the product listing and cart
5. Click the ‘<- back’ link next to the add button and verify you are returned to the product listing
6. Click the ‘checkout’ button in the cart and verify you see the following message: "Thank you for your order! <-back"