Angular Bridge

This week we'll build a small Angular web app using a public dataset, Angular components, and third-party JavaScript and CSS libraries.

NOTE: you can also find similar walk-throughs and source code for building this app in Vue and React for comparison.

The data we'll use is based on a freely available government dataset of bridges in the province of Ontario. We'll use this data under the Open Government Licence - Ontario.

Our goal will be to create an app that lets us explore the data set visually, like the following:

Walkthrough Videos

I've recorded a series of YouTube videos showing how to build the code, and explaining how everything works:

1. Introduction
2. How to develop, build, run, and debug our code
3. Creating the app's overall layout and main components
4. Working with the Bridge data, creating the Menu component
5. Creating the bridge info panel and map components
6. Adding the map backend, connecting everything
7. Switching to Angular Routing
8. Creating an Express REST API for Bridge Data
9. Reworking the Menu component to use Angular Routing
10. Adding a Service to use Angular's HttpClient to use our REST API
11. Adding an Angular Template Driven Form
12. Refactoring to a Reactive Form
13. Using Angular Material Form Components

Install Dependencies

To install the development and runtime dependencies, run the npm install command.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.