Angular Module
Angular
Creating a Model Module
- src/app/model/product.model.ts (
necessary
) - src/app/model/datasource.model.ts
- src/app/model/repository.model.ts
datasource.model.ts:
import {Injectable} from '@angular/core';
import {Product} from './product.model';
@Injectable()
export class DataSource {
private data: Product[];
constructor() {
this.data = new Array<Product>(
new Product(1, 'Kayak', 'Watersports', 275),
new Product(2, 'Lifejacket', 'Watersports', 48.95),
new Product(3, 'Soccer Ball', 'Soccer', 19.5),
new Product(4, 'Corner Flags', 'Soccer', 34.95),
new Product(5, 'Thinking Cap', 'Chess', 16),
);
}
getData(): Product[] {
return this.data;
}
}
repository.model.ts:
import {Injectable} from '@angular/core';
import {Product} from './product.model';
import {StaticDataSource} from './static.datasource';
@Injectable()
export class Repository {
private products: Product[];
private locator = (p: Product, id?: number) => p.id == id;
constructor(private dataSource: StaticDataSource) {
this.products = new Array<Product>();
this.dataSource.getData().forEach((p) => this.products.push(p));
}
getProducts(): Product[] {
return this.products;
}
getProduct(id: number): Product | undefined {
return this.products.find((p) => this.locator(p, id));
}
saveProduct(product: Product) {
if (product.id == 0 || product.id == null) {
product.id = this.generateID();
this.products.push(product);
} else {
let index = this.products.findIndex((p) => this.locator(p, product.id));
this.products.splice(index, 1, product);
}
}
deleteProduct(id: number) {
let index = this.products.findIndex((p) => this.locator(p, id));
if (index > -1) {
this.products.splice(index, 1);
}
}
private generateID(): number {
let candidate = 100;
while (this.getProduct(candidate) != null) {
candidate++;
}
return candidate;
}
}
model.module.ts:
import {NgModule} from '@angular/core';
import {DataSource} from './datasource.model';
import {Repository} from './repository.model';
@NgModule({providers: [Repository, DataSource]})
export class ModelModule {}
Message Module
src/app/message folder.
message.model.ts:
export class Message {
constructor(public text: string, public error: boolean = false) {}
}
message.service.ts:
import {Injectable} from '@angular/core';
import {Message} from './message.model';
import {Observable, ReplaySubject, Subject} from 'rxjs';
@Injectable()
export class MessageService {
// ReplaySubject: new subscribers will immediately receive the most recent message.
messages: Observable<Message> = new ReplaySubject<Message>(1);
reportMessage(msg: Message) {
(this.messages as Subject<Message>).next(msg);
}
}
message.component.ts:
import {Component} from '@angular/core';
import {MessageService} from './message.service';
import {Message} from './message.model';
@Component({selector: 'paMessages', templateUrl: 'message.component.html'})
export class MessageComponent {
lastMessage?: Message;
constructor(messageService: MessageService) {
messageService.messages.subscribe((msg) => (this.lastMessage = msg));
}
}
message.component.html:
<div *ngIf="lastMessage" class="bg-primary p-2 text-center text-white" [class.bg-danger]="lastMessage.error">
<h4>{{lastMessage.text}}</h4>
</div>
message.module.ts:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {MessageComponent} from './message.component';
import {MessageService} from './message.service';
@NgModule({
imports: [BrowserModule],
declarations: [MessageComponent],
exports: [MessageComponent],
providers: [MessageService],
})
export class MessageModule {}
Utility/Shared Module
Include pipes, directives, and services. I will call it shared.module.ts
. This module will import model module.
export class SharedModule {}
Feature/Component Module
For small apps, create a components module under src/app/components/
.