In this tutorial we’ll go through an example of how to build a simple user registration, login and user management (CRUD) application with Angular 10.

The angular app runs with a fake backend by default to enable it to run completely in the browser without a real backend api (backend-less), to switch to a real api you just have to remove or comment out the line below the comment // provider used to create fake backend located in the app module (/src/app/app.module.ts). You can build your own api or hook it up with the ASP.NET Core api or Node.js api available (instructions below).

The project is available on GitHub at https://github.com/cornflourblue/angular-10-registration-login-example.

Styling of the example app is all done with Bootstrap 4.5 CSS, for more info about Bootstrap see https://getbootstrap.com/docs/4.5/getting-started/introduction/.

Running the Angular 10 Login Tutorial Example Locally

1. Install NodeJS and NPM from https://nodejs.org.
2. Download or clone the Angular project source code from https://github.com/cornflourblue/angular-10-registration-login-example
3. Install all required npm packages by running npm install or npm i from the command line in the project root folder (where the package.json is located).
4. Start the app by running npm start from the command line in the project root folder, this will compile the Angular app and automatically launch it in the browser on the URL http://localhost:4200.

NOTE: You can also start the app with the Angular CLI command ng serve --open. To do this first install the Angular CLI globally on your system with the command npm install -g @angular/cli.

For more info on setting up an Angular development environment see Angular - Setup Development Environment.

#angular #tutorial #aws #azure #crud