A data model describes the domain an application works with and gives the application access to its data. It is often a useful starting point for an Angular application, alongside the components and templates that present that data. Angular does not prescribe the model’s shape: choose classes and operations that fit the application. section 2.3.1 section 9.6.1 section 2.10
A practical model can be built in three parts:
- Descriptive classes define the data, such as a product’s ID, name, category, and price. section 9.6.1
- A data source supplies the data. An in-memory array can stand in for a server while features are developed. section 9.6.1 section 5.3
- A repository provides operations for working with the data, such as finding, saving, and deleting products. section 9.6.1
A small to-do model
A to-do application needs an item with a task and completion state, plus a list of items. The list accepts a task and creates an incomplete item. This keeps the initial model focused on the two things the application must describe. section 2.3.1
Listing 2.8. The contents of the todoList.ts file in the src/app folder
import { TodoItem } from "./todoItem";
export class TodoList {
constructor(public user: string, private todoItems: TodoItem[] = []) {
// no statements required
}
get items(): readonly TodoItem[] {
return this.todoItems;
}
addItem(task: string) {
this.todoItems.push(new TodoItem(task));
}
}
The list class shows how one model class can hold items and provide an operation for adding them. section 2.3.1
Growing a product model
For a store prototype, define a Product class, supply sample products, and expose repository operations to the rest of the application. Build user-facing features against the sample data first; connect the model to a RESTful web service later. section 9.6.1 section 5.3
Listing 9.20. The contents of the datasource.model.ts file in the src/app folder
import { Product } from "./product.model";
export class SimpleDataSource {
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.50),
new Product(4, "Corner Flags", "Soccer", 34.95),
new Product(5, "Thinking Cap", "Chess", 16));
}
getData(): Product[] {
return this.data;
}
}
The data source holds five sample products and returns them through getData(); it provides a starting point without a server connection. section 9.6.1
Table 9.8. The methods defined in the repository
|
Name
|
Description
|
|
getProducts
|
This method returns an array containing all the
Product objects in the model.
|
|
getProduct
|
This method returns a single
Product object based on its ID.
|
|
saveProduct
|
This method updates an existing
Product object or adds a new one to the model.
|
|
deleteProduct
|
This method removes a
Product object from the model based on its ID.
|
The repository’s method table separates application-facing product operations from the source of the data. section 9.6.1
