Learn Angular page

Learn how to build a moderately complex application with Angular.

Before You Begin

Click here to join
Bitovi's Slack Community


Join Bitovi's Slack Community to get help on Bitovi Academy courses or other Angular, React, CanJS and JavaScript problems.

Please ask questions related to Angular in the Angular chat room.

If you find bugs in this training or have suggestions, create an issue or email contact@bitovi.com.

Overview

In this guide, we will build this restaurant ordering app with Angular:

You can see a DoneJS implementation of this application at www.place-my-order.com.

This application (and course) is moderately complex. Its purpose is to teach intermediate developers how to write a real-world application in practice. Thus, it covers the features that are present across almost all single page apps:

  • Navigation between pages
  • Handling complex state mechanics
  • Creating, Reading, Updating, and Deleting (CRUD) data from a server.

As for the application itself, it:

  • Is written in Angular 7
  • Is a single page application (SPA) that uses pushstate to simulate routing between several pages.
    • A home page
    • A restaurant list page that lets the user filter restaurants by state and city
    • A restaurant details page that provides more information about a particular restaurant
    • An order page that allows us to place an order for a restaurant
    • A realtime order history page that tracks orders as they are created, being prepared, out for delivery, delivered, and deleted
  • Will make requests to a local API server that provides the following APIs:
    • /api/states - Returns a list of US states.
    • api/cities - Returns a list of US cities for a state.
    • api/restaurants - Returns a list of Restaurants in a city.
    • api/order - Creates, Returns, Updates, or Deletes orders for a restaurant.

Outline

The guide begins (Why Angular) with a discussion of Angular's strengths. We will install Angular (Generate an App) and use it to generate a new project. Then we will set out creating some components (Creating Components) that will be shown when the right url is present (Adding Routing) and adding navigation links (Creating Navigation) to route to those components.

With that complete, we will explore how to get data from the server (Writing a Restaurant Service) and write that data out to the page (Use Restaurant API data).

After that, we will begin exploring how to handle complex state mechanics by creating a form that displays cities and states (City & State Options). We will make selecting a state filter cities (Filter Cities by State) and selecting a city filter the restaurants (Filter Restaurants by City). As an optional and advanced exercise, you can convert handle the state declartively with RxJS (Optional: Declarative State).

After writing all that code, it's good to learn a bit about testing. While this tutorial has tests to verify your solutions, we will turn the tables and have you write a test for retrieving a single restaurant from the service layer (Writing Unit Tests). This will prepare us to create a nested route for the restaurant details page (Nested Restaurant Routes).

Now we are ready to turn our attention to learning about creating, updating, and deleting data. We will start by building an Order Form (Building the Order Form) that allows us to create orders on the server (Order Service). We'll then create a page that lets us update an order's status or delete an order (Order History Component). We will even make the order page update when someone else updates an order (Real Time Connections).

At this point, we will have completed the app. The final step will be building it to production and deploying it for others to see (Deploy App).

Requirements

In order to complete this guide, you need to have NodeJS version 8 or later installed.