humphd / ng-bridge

Angular Demo App for 422

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

In the routing branch we continue to evolve this app to use Angular Routing and an HTTP REST API via Angular's HttpClient. The work continues in these videos:

1. Switching to Angular Routing
2. Creating an Express REST API for Bridge Data
3. Reworking the Menu component to use Angular Routing
4. Adding a Service to use Angular's HttpClient to use our REST API

In the forms branch we continue to evolve this app to use Angular Forms. The work continues in these videos:

1. Adding an Angular Template Driven Form
2. Refactoring to a Reactive Form
3. Using Angular Material Form Components

In the tests branch we continue to evolve this app to include automated tests. The work continues in these videos:

1. Brief discussion of Promises and async/await, which are used in some tests
2. Writing automated tests with Jest for our node.js bridge module
3. Writing automated tests with Jest and Supertest for our Express routes REST API
4. Writing automated tests with Jasmine and Karma for an Angular Component

In the auth branch we continue to evolve this app to add JSON Web Token based Authentication and Authorization. The work continues in these videos:

1. Brief discussion of web security and the difference between encoding, hashing, salting, and encryption
2. Adding user accounts and the ability to register and login to our backend REST API
3. Securing our REST API using Passport.js and JSON Web Tokens
4. Adding JWT-based security to our app using @auth0/angular-jwt

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.