Angularで作るER DIAGRAM TOOL – 第四回 データ用クラスの準備と、データサービスの作成からDIまで。

Data handled by this application,
Basically, crud-d-scaffold.json of dog-ears / crud-d-scaffold and
Make it the same shape.

■crud-d-scaffold.json.sample
https://github.com/dog-ears/crud-d-scaffold/blob/master/crud-d-scaffold.json.sample

data
– param1
– models[
{
model1
– param1
schemas[
{
shcema1
– param1
},{
shcema2
– param1
},{
shcema3
– param1
}
]
},{
model2
– param1
}
]

The basic data structure is as shown above.

(1) Preparation of Class

Create classes of Data, Model, Schema

/src/app/class/data.ts
https://github.com/dog-ears/er-diagram-tool/commit/67a16b293469c6be5621352f750f59c88000fd48#diff-ba726bfa70586322bd593dddb7beaf87

/src/app/class/model.ts
https://github.com/dog-ears/er-diagram-tool/commit/67a16b293469c6be5621352f750f59c88000fd48#diff-15a154169b0b6112f2adcdf51a565ee2

/src/app/class/schema.ts
https://github.com/dog-ears/er-diagram-tool/commit/67a16b293469c6be5621352f750f59c88000fd48#diff-43602a3f26ba4b6bcf22b9c72c3fec66

· Each class is initialized in Constructor ().
· Data has _next_model_id and model has _next_schema_id and each has a function that returns a new ID.
· Schema has an item called parent_id so that you can know which model is parent by itself.

(2) Creation of dataService

A service that manages data.
Add and delete data always goes through here.
Each component will DI this service and invoke the method of the service.

/src/app/service/data.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/4f9a158e23f44d51f7a0b7b61068c26e87e3da08#diff-ae990bb302f27e60323deb45d6746b17

· Have a member variable data and initialize it with constructor ().

(3) DI of dataService

/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/386590142cc8f49c0471749d876e12e65b8e8d2d#diff-fc6b22833aeaf77f8440c4970ade705e

・import DataService
・providersにDataService

/src/app/app.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/386590142cc8f49c0471749d876e12e65b8e8d2d#diff-5c26d2c8f8838f32ace87fdecd6344ea

· Import of Data, DataService
· Addition of member variable data
· DI of DataService with Constructor and initial data storage

/src/app/app.component.html
https://github.com/dog-ears/er-diagram-tool/commit/386590142cc8f49c0471749d876e12e65b8e8d2d#diff-465e9f13ce23ec4a1e366935273fdbb6

We placed an ER diagram drawing area in the left column and an information area displaying the data contents in the right column.
The information area feels unnecessary, but it is useful because it is convenient for debugging.

cap03

cap03_2

By the way, in the method of each component,
First we put console.log.
It is recommended because the data flow is easy to follow.

Next time back to navbar again,
I will set Modal to update Data.