Merge pull request 'added doc for settings' (#5) from doc/angular-settings into main
All checks were successful
Build, Test & Publish / Build (push) Successful in 19s
Build, Test & Publish / Build and Publish Container Image (push) Successful in 48s
Build, Test & Publish / Deploy to Infrastructure (push) Successful in 59s

Reviewed-on: #5
This commit is contained in:
Liam Pietralla 2025-01-14 15:43:36 +11:00
commit 140e1db769
3 changed files with 89 additions and 0 deletions

View File

@ -43,6 +43,7 @@ export default defineConfig({
link: '/angular/',
collapsed: true,
items: [
{ text: 'Application Settings', link: '/angular/application-settings' },
{ text: 'Base Components', link: '/angular/base-components' },
]
},

View File

@ -0,0 +1,87 @@
# Application Configuration
Often you will need to use some kind of configuration in your application. For most backends this can be done using envionment variables or settings files, however in Angular applications this is not as straight forward.
A common approach I like to take is to setup a `appsettings.json` file, that is served alonside the application and can be used to store configuration values. The application will read this file, pass it around as a provider and use it as needed.
## Setup
Start by creating a new file in the `public` directory called `appsettings.json`. This file will contain all the configuration values for the application.
```json
{
"someSetting": "SomeValue"
}
```
Next we will update the `main.ts` to read the `appsettings.json` file and pass it to the application as a provider. Setup the following exports before the application bootstrap.
```typescript
export const APP_SETTINGS = new InjectionToken<AppSettings>('APP_SETTINGS');
export const fetchAppSettings = async (): Promise<AppSettings> => {
const baseHref = document.querySelector('base')?.getAttribute('href');
const settingUrl = baseHref === '/' ? '/appsettings.json' : `${baseHref}/appsettings.json`;
const response = await fetch(settingUrl);
return await response.json();
};
export const provideAppSettings = (appSettings: AppSettings): StaticProvider => {
return {
provide: APP_SETTINGS,
useValue: appSettings,
};
};
```
In this we are creating a new `InjectionToken` called `APP_SETTINGS` that will be used to inject the configuration values into the application. We also have a function `fetchAppSettings` that will fetch the `appsettings.json` file and return the configuration values. Finally we have a function `provideAppSettings` that will create a provider for the configuration values.
Next we can update the bootstrap function to fetch the configuration values and pass them to the application.
```typescript
(async function () {
// Fetch the app settings and then bootstrap the application
const appSettings = await fetchAppSettings();
bootstrapApplication(AppComponent, {
providers: [
provideAppSettings(appSettings),
{ provide: appConfig, useValue: appSettings },
...appConfig.providers,
],
})
})();
```
::: tip
If you have other configuration in the appConfig you will also need to ensure it's passed correctly to the `bootstrapApplication()` function.
:::
This will fetch the configuration values and pass them to the application as a provider.
## Usage
Using settings is now as simple as injecting the `APP_SETTINGS` token into a service or component.
::: code-group
```typescript [app.component.ts]
import { Component, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { APP_SETTINGS } from '../main';
import { AppSettings } from './common/models/config';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
appSettings: AppSettings = inject(APP_SETTINGS);
title = 'app-settings';
someSetting = this.appSettings.someSetting
}
```
```html [app.component.html]
<h1>{{ title }}</h1>
<p>The value of someSettings is: {{ someSetting }}</p>
```
:::

View File

@ -1,3 +1,4 @@
# Angular Snippets and Musings
#### [Application Settings](./application-settings.md)
#### [Base Components](./base-components.md)