To continue our journey with Angular, i created a special kata to help dive deeper in the Angular framework. We will be developing an e-commerce application with two pages but full of special tips and tricks.
When finished, the application should look like this: Ng-MarketPlace

Getting Started

  1. Requirements
  2. Part one: Angular basics
  3. Part two: Angular advanced
  4. Licencing and information

Requirements

A first experience with angular is recommended but not required as the kata will slowly progress from the fundamentals to advanced techniques.

Preparing the machine

  1. Make sure you have a running internet connection

  2. Install the lastest Node LTS from https://nodejs.org/

  3. Verify node installation using the command lines:

    1
    2
    3
    4
    node -v
    # should display 8.11.x or higher
    1
    2
    3
    4
    npm -v
    # should display 5.6.x or higher

  4. Optional: use a code editor (Visual Studio Code is my recommendation)

5) Optional: add the following extensions to visual studio code

Part one: Angular basics

Create a new project (10 min)

  1. Install Angular CLI
    1
    npm install -g @angular/cli
  2. Create a new project named ng-marketplace (use scss style and mk as prefix)
    1
    ng new marketplace --style scss --prefix mk
  3. Run the application from the marketplace folder
    1
    ng serve
  4. Modify the title from Welcome to mk! to Welcome to MarketPlace
Expected resultsExpected results

Create an order form component (30 min)

  1. The marketplace has 3 categories described below, create a new component called order-form to display them all.
id name
1 Electronics
2 Fashion
3 Car

HINT: Use the order-form.component_1.{html|scss} files from kata/components/order-form.

Expected resultsExpected results
  1. Every category has it’s own logo like described in the table below, Use font awesome classes to decorate them.
id name icon
1 Electronics fa fa-desktop fa-4x
2 Fashion fa fa-shopping-bag fa-4x
3 Car fa fa-car fa-4x

HINT: npm install font-awesome.

Expected resultsExpected results
  1. The full list of categories is availabe on a remote server. Setup the server then update order-form component to fetch data.

HINT: Use kata/api folder as your source of data.

Expected resultsExpected results
  1. Retrieving data from within a component is not a good practise, move the data fetching logic to a dedicated service.
  2. Run the tests and fix if any is failing.

HINT: Take a look at app.module.ts

Expected resultsExpected results
  1. Using the description below, write the following 3 tests for the order-form component
    • Should create OrderFormComponent when all modules and dependencies are available.
    • Should create 3 radio buttons when total fetched categories is 3
    • Should bind second category id to 2 when fetched second category id equals 2

HINT: Use a mocking library like sinon: npm install -D sinon @types/sinon.

Expected resultsExpected results

Setup purchase form (30 min)

  1. Create a form to host the category field. Make sure it works by displaying the name of the selected category.

HINT: Use reactive forms module: npm install @angular/forms.

Expected resultsExpected results
  1. Every category has its corresponding items, display items everytime a category is selected.

HINT: Fetch items from the remote server (api/items.json).

Expected resultsExpected results
  1. Style the displayed items and add an item field to the form.

HINT: Use the html snippet from kata/components/order-form.component_2.html and don’t forget to add images folder to the application.

Expected resultsExpected results
  1. Display the selected item details using a child component.

HINT: Use the selected-item component from kata/components/selected-item.component_1.{html|scss} and don’t forget to display the currency properly.

Expected resultsExpected results
  1. The selected-item component communicates with order-form to add items to its cart. Display the cart items and total value of the order.

HINT: The cart is on the order-form component. Use the selected-item component from kata/components/selected-item.component_2.html and kata/components/order-form.component_3.html.

Expected resultsExpected results

Create a order summary component (10 min)

  1. Create a new component called OrderSummary to display the order summary, it’s should be accessible through /summary route.

HINT: Use HTML and scss provided in kata/components/order-summary.component.{html|scss} and don’t forget, OrderForm page should remain accessible through /marketplace or /.

Expected resultsExpected results
  1. OrderSummary should be able to read cart items and display the list of items and total amount of the order

HINT: Communication between two routes can be done using shared services.

Expected resultsExpected results

Part two: Angular advanced

Route guards (20 min)

  1. Protect OrderSummary url to prevent user from accessing it before completing the order form
  2. Categories take a long time to be fetched, display a spinner for the user while waiting on access to order form.

Feature module (20 min)

  1. Move the OrderSummary component to a feature module called OrderSummary
  2. Lazy load the OrderSummaryModule
  3. Build the application in AoT mode then in Prod mode, notice any difference ?

Redux & @NgRx (30 min)

  1. Setup a store for the application using @NgRx library
  2. Adapt the ItemsBoardComponent accordingly to use the store
  3. Install the Redux DevTools extension to test time travel debugging and more features

Licencing and information

Ng-MarketPlace Kata is licensed under a Creative Commons Attribution 3.0 Unported License.

ScreenShot

To view a copy of this license, visit [ http://creativecommons.org/licenses/by/3.0/deed.en_US ].

For any questions, contact me on msekni.bilel@gmail.com