Merge pull request 'added doc for settings' (#5) from doc/angular-settings into main
Reviewed-on: #5
This commit is contained in:
commit
140e1db769
@ -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' },
|
||||
]
|
||||
},
|
||||
|
87
docs/angular/application-settings.md
Normal file
87
docs/angular/application-settings.md
Normal 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>
|
||||
```
|
||||
:::
|
@ -1,3 +1,4 @@
|
||||
# Angular Snippets and Musings
|
||||
|
||||
#### [Application Settings](./application-settings.md)
|
||||
#### [Base Components](./base-components.md)
|
Loading…
Reference in New Issue
Block a user