/Angular_Training_Resources

Primary LanguageJavaScriptMIT LicenseMIT

Angular Training: Resources

Contents

Working Mode

The road-map consists of several steps. In each step, a set of theoretical concepts are explored, supported by reference documentation, book chapters, tutorials and videos. In parallel, a simple application will be built with the learned concepts: the Online Shop application.

After the learning material for a given step was sufficiently explored, either some new functionality will be added to this application or old functionality will be refactored.

All the code written must be published on GitHub. Access the this link to create your own repository. Commits must be pushed when each individual chapter is finished. In order to request a code review from the trainers, you must open a pull request from the develop to the master branch.

Environment

You can work using your local environment:

In the backend folder you can find a server-side implementation for the online shop. Tu run this server perform the following:

  • Open the backend folder in your terminal
  • npm ci (only needed the first time your run the server)
  • npm start
  • Open http://localhost:3000 in your browser.

Online Shop

The application will simply browse through a catalog of products. It will support:

  • Listing the products,
  • Adding a new product,
  • Updating an existing product,
  • Deleting a product.

The online shop has a "shopping cart" functionality:

  • The user may add items into the cart,
  • He may increment and decrement the quantity of each product or even remove a product completely from the cart,
  • Lastly, he may checkout the cart and place an order (resulting in the creation of an order in the backend).

Mockups describing the user interface structure can be found in the mockups folder. These mockups should be used as a guideline, but improvements or deviations from them is allowed.

0. HTML and CSS Basics

Goal: refresh your knowledge about HTML and CSS basic concepts.

Required Reading:

Online Shop: nothing to do.

Further Resources:

1. Angular Intro

Goal: become familiar with Angular.

Required Reading:

Online Shop:

Install the Angular CLI with the help of the NodeJS package manager: npm install -g @angular/cli.

Create a new project in the root of your git repository by using the CLI: ng new online-shop.

Navigate inside the project folder, Start the project and open its home page in your browser: ng serve --start.

Further Resources:

2. Components

Goal: get a grip on the basics of Angular Components

Required Reading:

Online Shop:

For the moment, we will use mock data across all components. The data will be defined locally in the Typescript file associated to a component.

Create a new Angular Component for displaying a single product's details. You can use the CLI command ng generate component <component-name> to achieve this.

Create an Angular component for displaying a list of products. Hint: use the *ngFor directive.

Add some CSS to each of the components to make them look nicer.

Further Resources:

3. Routing

Goal: understand the basics of Angular Routing and add routing to your project

Required Reading:

Online Shop:

Add a button next to each product from the product list. You can use it to navigate to a specific product's detail page.

From the detail page of the product, the user may add it to his shopping cart (by pressing a button).

Add Routing to your project and implement a navigation between the list of all products and the product detail page. Use <router-outlet> as a placeholder for the currently displayed component in your app.

Add a navigation which redirects users from the default path ('/') to the '/products' page and displays by default the list of all products.

Enhance your app with routing parameters, such that you can navigate to a specific product's detail page. Hint: Use snapshot to capture the product's ID as a navigation parameter and display it in the details page.

Further Resources:

4. Services using HttpClient

Goal: practice with Angular HttpClient by connecting your frontend with the backend server

Required Reading:

Online Shop:

Use HttpClient to read the products from the backend to fill in the product list.

When navigating to the product detail page, read the product information from the backend.

Add a new "Delete" button on the detail page, which calls the backend to remove a product from the catalogue.

Add a new "Checkout" button on the shopping cart page, which creates a new order on the backend.

Further Resources:

5. Forms and Validation

Goal: dive into Angular Forms and add them to your project.

Required Reading:

Online Shop:

Add a new "Edit" button on the detail page. Pressing it should open a new view, which uses reactive forms to update the properties of the product. The view should have two buttons: "Cancel" (which undos all the changes) and "Save" (which calls the backend to persist the changes).

Add some validation to your form (ex: check that the fields are not empty, that the price and weight inputs contain only numbers, etc.)

Also create a new "Add" button on the product list. Pressing this button should open a view for creating a new product (which the same structure and buttons as the edit view).

Further Resources:

6. Authorization and Guards

Goal: get familiar with Route Guards and protect your app's routes from unauthorized access.

Required Reading:

Online Shop:

Create a new login view, containing a text input for the username, a password input for the password and a login button.

Automatically redirect the user to the login view each time he opens or refreshes the application. When pressing the login button, send an appropriate request to the backend. If the request succeeds, redirect the user to the product page, otherwise display an error message.

Use the roles returned by the backend to disable the edit, create and delete buttons if the user is not an administrator. Only allow customers to view the shopping cart and to add products in it.

Further Resources:

OPT-1. Use Material Components

Required Reading:

Online Shop:

Install and use Material Design in your Online Shop app. Replace your "plain" HTML components with Material Components.

OPT-2. Internationalization

Goal: Translate the user interface in multiple languages.

Required Reading:

Online Shop:

Translate all the labels, headings, titles and buttons of our shop in English and Romanian.

Further Resources:

OPT-3. Simple NGRX

Goal: Use NGRX for state management.

Required Reading:

Online Shop:

Add NGRX to your app by:

  • Creating a reducer for each page,
  • Adding actions for each user input handler, data load event, etc.
  • Adding effects to react on the data loading actions and call the services,
  • Dispatching the actions and selecting the state only inside the smart components.

Hints:

  • Make sure to also have a loading flag indicator in each page's state,
  • Use the async pipe inside the smart components to not pass Observables to dumb components,
  • Install the Redux DevTools Chrome plugin to be able to debug your store.

Further Resources:

OPT-4. Normalized NGRX

Prerequisite: OPT-3. Simple NGRX

Goal: Normalize the NGRX state.

Required Reading:

Online Shop:

Split your application state into two parts:

  • data: The portion which will hold the normalized data collections,
  • ui: The portion which will hold the sub-states used in the app pages.

Inside the data sub-tree, you should have a products map (between ID and the entity itself). For each product, you should also store an indicator if the product is fully loaded or just the header is loaded. You should only make a call to the backend if it is really necessary (if the entity / entity set is not loaded).

Inside the ui sub-tree, you should never copy product data, just have the IDs to reference the corresponding entry from the data sub-tree.

You should define selectors to denormalize the data back to what you need in your pages.

OPT-5. Unit Testing

Goal: Write some unit tests for some of your services and NGRX objects.

Required Reading:

Online Shop:

Write tests for at least the following:

  • One of your services (preferably the one that handles user roles / authentication),
  • One of your components (DOM test; preferably for the product detail page - check that the title and description are present on the component as expected),
  • One of your reducers.
  • One of your effects.

Further Resources:

OPT-6. E2E Testing

Goal: write a couple of end-to-end tests.

Required Reading:

Online Shop:

Write at least one end-to-end test for the following flow:

  • User opens the application,
  • System redirects him to log-in,
  • User logs in with a valid admin username and password,
  • System redirects him to the product page,
  • System shows a non-empty list of products,
  • User clicks on one product,
  • System shows that product's details.

Further Resources: