This is an example of how to setup a simple login page using Angular 10 and Basic HTTP authentication.

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).

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/.

The tutorial app code is available on GitHub at https://github.com/cornflourblue/angular-10-basic-authentication-example.

Running the Angular 10 Basic Auth Example Locally

1. Install Node and NPM from https://nodejs.org.
2. Download or clone the tutorial project source code from https://github.com/cornflourblue/angular-10-basic-authentication-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 application by running npm start from the command line in the project root folder, this will build the application 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 your local Angular dev environment see Angular - Setup Development Environment.

Running the Angular App with an ASP.NET Core 3.1 API

For full details about the example ASP.NET Core API see the post ASP.NET Core 3.1 - Basic Authentication Tutorial with Example API. But to get up and running quickly just follow the below steps.

1. Install the .NET Core SDK from https://www.microsoft.com/net/download/core.
2. Download or clone the project source code from https://github.com/cornflourblue/aspnet-core-3-basic-authentication-api
3. Start the api by running dotnet run from the command line in the project root folder (where the WebApi.csproj file is located), you should see the message Now listening on: http://localhost:4000.
4. Back in the Angular app, remove or comment out the line below the comment // provider used to create fake backend located in the /src/app/app.module.ts file, then start the Angular app and it should now be hooked up with the ASP.NET Core API.

Running the Angular App with a Node.js API

For full details about the example Node.js API see the post NodeJS - Basic Authentication Tutorial with Example API. But to get up and running quickly just follow the below steps.

1. Download or clone the project source code from https://github.com/cornflourblue/node-basic-authentication-api
2. Start the api by running npm start from the command line in the project root folder, you should see the message Server listening on port 4000.
3. Back in the Angular app, remove or comment out the line below the comment // provider used to create fake backend located in the /src/app/app.module.ts file, then start the Angular app and it should now be hooked up with the Node.js API.

Angular 10 Project Structure

The Angular CLI was used to generate the base project structure with the ng new <project name> command, the CLI is also used to build and serve the application. For more info about the Angular CLI see https://angular.io/cli.

The app and code structure of the tutorial mostly follows the best practice recommendations in the official Angular Style Guide, with a few of my own tweaks here and there.

Each feature has it’s own folder (home & login), other shared/common code such as services, models, helpers etc are placed in folders prefixed with an underscore _ to easily differentiate them and group them together at the top of the folder structure.

The index.ts files in each folder are barrel files that group the exported modules from a folder together so they can be imported using the folder path instead of the full module path and to enable importing multiple modules in a single import (e.g. import { AuthenticationService, UserService } from '../_services').

Path aliases @app and @environments have been configured in tsconfig.base.json that map to the /src/app and /src/environments directories. This allows imports to be relative to the app and environments folders by prefixing import paths with aliases instead of having to use long relative paths (e.g. import MyComponent from '../../../MyComponent').

#angular #javascript #programming #developer