Ontwerp een Angular Module voor Herbruikbare UI Componenten
description
Met deze prompt leer je hoe je Angular modules effectief structureert om herbruikbare UI componenten te maken, wat de ontwikkeling versnelt en onderhoud vereenvoudigt. Het helpt je te begrijpen hoe je modulair ontwerp toepast binnen Angular, wat zorgt voor betere schaalbaarheid en overzichtelijkheid in je projecten.
prompt
Help me een Angular module te ontwerpen die herbruikbare UI componenten bevat. Leg uit hoe ik imports en exports organiseer binnen de module en geef voorbeelden van modulair ontwerp ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een overzicht en advies voor het ontwerpen van een Angular module met herbruikbare UI componenten, inclusief structuur, imports/exports, en best practices.
**1. Structuur van de UI Module**
Een goede aanpak is om een aparte Angular module te maken, bijvoorbeeld `UiComponentsModule`, die alle herbruikbare componenten bevat:
```
src/app/ui/
├── components/
│ ├── button/
│ │ ├── button.component.ts
│ │ ├── button.component.html
│ │ └── button.component.css
│ ├── card/
│ │ ├── card.component.ts
│ │ ├── card.component.html
│ │ └── card.component.css
│ └── ...
├── ui-components.module.ts
```
**2. Import en export organiseren**
In `ui-components.module.ts`:
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Import van componenten
import { ButtonComponent } from './components/button/button.component';
import { CardComponent } from './components/card/card.component';
@NgModule({
declarations: [
ButtonComponent,
CardComponent
],
imports: [
CommonModule
],
exports: [
ButtonComponent,
CardComponent
]
})
export class UiComponentsModule { }
```
**Belangrijk:**
- `declarations` bevat de componenten die in deze module worden gedefinieerd.
- `imports` bevat andere modules die nodig zijn (zoals `CommonModule` voor basis Angular directives).
- `exports` bepaalt welke componenten beschikbaar zijn voor gebruik buiten deze module.
**3. Modulaire ontwerp principes**
- **Herbruikbaarheid:** Maak componenten parametriseerbaar via `@Input()`. Bijvoorbeeld, de knop kan een `label`, `stijl` of `kleur` als input krijgen.
- **Onderhoudbaarheid:** Houd componenten klein en gericht. Elke component doet één ding goed.
- **Losse koppeling:** Gebruik `@Input()` en `@Output()` om communicatie te regelen, niet afhankelijk van globale state.
**4. Voorbeeld: Knop component**
```typescript
// button.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-button',
template: `<button [ngClass]="style">{{ label }}</button>`,
styleUrls: ['./button.component.css']
})
export class ButtonComponent {
@Input() label: string = 'Klik mij';
@Input() style: string = 'primary'; // kan worden aangepast
}
```
**5. Voorbeeld: Kaart component**
```typescript
// card.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-card',
template: `
<div class="card">
<h3>{{ title }}</h3>
<p>{{ data }}</p>
</div>
`,
styleUrls: ['./card.component.css']
})
export class CardComponent {
@Input() title: string = 'Titel';
@Input() data: string = 'Dynamische gegevens';
}
```
**6. Best practices voor structuur en onderhoud**
- **Gebruik van feature modules:** Als je veel componenten hebt, groepeer ze logisch (bv. `UiComponentsModule`).
- **Documentatie:** Voeg comments toe en documenteer inputs en outputs.
- **Thema’s en stijlen:** Overweeg een themamodule of globale styles voor consistente styling.
- **Lazy loading:** Laad je UI module alleen indien nodig om performance te verbeteren.
- **Testen:** Schrijf unit tests voor je componenten.
**Kort samengevat:**
- Organiseer componenten in een dedicated map.
- Declareer en exporteer componenten in één module.
- Importeer deze module in andere modules waar je de UI componenten nodig hebt.
- Maak componenten parametriseerbaar voor maximale herbruikbaarheid.
- Hou de structuur overzichtelijk en documenteer je code.
Met deze aanpak creëer je een modulair, onderhoudsvriendelijk en herbruikbaar UI componentenpakket in Angular.
provider: deepseek
model: deepseek-chat
Beste collega,
Ik help je graag met het ontwerpen van een herbruikbare Angular UI-module. Hieronder vind je een complete uitleg met best practices.
## Module Structuur
```
src/
└── app/
└── shared/
└── ui/
├── components/
│ ├── button/
│ │ ├── button.component.ts
│ │ ├── button.component.html
│ │ ├── button.component.scss
│ │ └── button.component.spec.ts
│ └── card/
│ ├── card.component.ts
│ ├── card.component.html
│ ├── card.component.scss
│ └── card.component.spec.ts
├── models/
│ └── ui.models.ts
├── services/
│ └── ui.service.ts
├── ui.module.ts
└── index.ts
```
## UI Module Definitie
```typescript
// ui.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonComponent } from './components/button/button.component';
import { CardComponent } from './components/card/card.component';
@NgModule({
declarations: [
ButtonComponent,
CardComponent
],
imports: [
CommonModule
],
exports: [
ButtonComponent,
CardComponent,
CommonModule // Hergebruik CommonModule directives
]
})
export class UiModule { }
```
## Barrel Export (index.ts)
```typescript
// index.ts
export * from './ui.module';
export * from './components/button/button.component';
export * from './components/card/card.component';
export * from './models/ui.models';
export * from './services/ui.service';
```
## Button Component Voorbeeld
```typescript
// button.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ButtonVariant, ButtonSize } from '../models/ui.models';
@Component({
selector: 'app-ui-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.scss']
})
export class ButtonComponent {
@Input() variant: ButtonVariant = 'primary';
@Input() size: ButtonSize = 'medium';
@Input() disabled: boolean = false;
@Input() type: string = 'button';
@Output() clicked = new EventEmitter<Event>();
onClick(event: Event): void {
if (!this.disabled) {
this.clicked.emit(event);
}
}
}
```
```html
<!-- button.component.html -->
<button
[class]="'btn btn--' + variant + ' btn--' + size"
[disabled]="disabled"
[type]="type"
(click)="onClick($event)">
<ng-content></ng-content>
</button>
```
## Card Component Voorbeeld
```typescript
// card.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-ui-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.scss']
})
export class CardComponent {
@Input() title: string = '';
@Input() subtitle: string = '';
@Input() imageUrl: string = '';
@Input() elevation: number = 1;
}
```
```html
<!-- card.component.html -->
<div class="card" [class]="'card--elevation-' + elevation">
<div class="card__header" *ngIf="title || subtitle">
<h3 class="card__title">{{ title }}</h3>
<p class="card__subtitle" *ngIf="subtitle">{{ subtitle }}</p>
</div>
<div class="card__image" *ngIf="imageUrl">
<img [src]="imageUrl" [alt]="title">
</div>
<div class="card__content">
<ng-content></ng-content>
</div>
</div>
```
## Type Definitions
```typescript
// models/ui.models.ts
export type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger';
export type ButtonSize = 'small' | 'medium' | 'large';
export interface CardData {
title: string;
subtitle?: string;
content: any;
imageUrl?: string;
}
```
## Gebruik in Andere Modules
```typescript
// app.module.ts of feature module
import { NgModule } from '@angular/core';
import { UiModule } from './shared/ui';
@NgModule({
imports: [
// ... andere imports
UiModule
]
})
export class AppModule { }
```
```html
<!-- Gebruik in templates -->
<app-ui-button
variant="primary"
size="large"
(clicked)="onButtonClick($event)">
Klik mij
</app-ui-button>
<app-ui-card
[title]="cardTitle"
[subtitle]="cardSubtitle"
[imageUrl]="cardImage">
<p>Dynamische inhoud hier</p>
</app-ui-card>
```
## Best Practices
1. **Single Responsibility**: Elke component heeft één duidelijke verantwoordelijkheid
2. **Input/Output Properties**: Gebruik `@Input()` en `@Output()` voor communicatie
3. **Content Projection**: Gebruik `<ng-content>` voor flexibele inhoud
4. **Type Safety**: Definieer interfaces en types voor betrouwbare data
5. **Barrel Exports**: Gebruik index.ts voor clean imports
6. **Documentatie**: Voorzie JSDoc comments voor alle public API's
7. **Testing**: Schrijf unit tests voor alle componenten
8. **SCSS Modulariteit**: Gebruik BEM methodology voor styling
## Advanced Module Configuratie
Voor extra flexibiliteit kun je een `forRoot()` methode toevoegen:
```typescript
// ui.module.ts
@NgModule({})
export class UiModule {
static forRoot(): ModuleWithProviders<UiModule> {
return {
ngModule: UiModule,
providers: [UiService]
};
}
}
```
Deze structuur zorgt voor optimale herbruikbaarheid, onderhoudbaarheid en consistentie in je Angular applicatie.