016 Naming the folders - chempkovsky/CS82ANGULAR GitHub Wiki
- Run JavaScripts Wizard
- First page of the Wizard
- Second page of the Wizard
- Third page of the Wizard
- Fourth page of the Wizard
- Create subfolders
- How to split Monolithic App into a set of Micro-frontend Apps
- Naming notes
- Typical splitting way
- The first Micro-frontend App
- The second Micro-frontend App
- Break the rules for the second Micro-frontend App
- View (or ModelView) is the structure that the WebApi service sends to and receives from the client. For each entity, the developer must create at least one view.
- View (or ModelView) is a Data Transfer Objects (DTO)
- For a given entity, the View (or ModelView) is a subset of the properties of the given entity and a subset of the properties of the direct and indirect master entities (in terms of the master-detail relationship).
- From the point of view of Sql constructions, for a given entity (table) View (or ModelView) is an sql View.
- According to the agreement specified in the article 015 Preparing projects for application launch, we will generate Angular components and services in the folders
src/app/components
src/app/services
- before generating Angular typescript classes for each
ModelView
we need to create subfolders for them. This article is devoted to the simple method of naming such a folders.
- To name the folder
- Run Visual Studio and Open
PhonebookSolution
solution - Right Click
app
of thesrc
-project (Angular project) and selectJavaScripts Wizard
menu item to open the Wizard dialog
- Run Visual Studio and Open
Click to show the picture
- On the first page of the dialog the destination folder is shown. The destination folder is the folder in which the generated file will be created. Click
Next
-button
Click to show the picture
- On the second page of the Wizard we select DbContext that will be used to choose the entity for the View. Select PhBkContext.csproj and the PhBkContext class using the drop-down lists. Click
Next
-button.
Click to show the picture
- On the third page of the Wizard
- select the View for which we need to get the name
- in the picture below we have selected
PhbkPhoneTypeView
-View
- in the picture below we have selected
- select the View for which we need to get the name
- Click
Next
-button
Click to show the picture
- On the Fourth page of the Wizard we choose
01100-.interface.ts
action type.- in the
enter file name
-edit-box you will get the name in the formxxxxxxxx.interface
- in the
Click to show the picture
- copy generated name without the
.interface
-suffix. It can used as a name of the folders.- in the picture above we have selected
phbk-phone-type-view
-name
- in the picture above we have selected
- Having the name gotten on the fourth page of the Wizard we create two subfolder:
src/app/components/xxxxxxxx
src/app/services/xxxxxxxx
- in the picture below we have created
src/app/components/phbk-phone-type-view
src/app/services/phbk-phone-type-view
Click to show the picture
-
Note:
- The first: to generate code with micro-frontend support we should use the following batch-scripts
- 01101-MonoInterfaces.json
- 01401-MonoWebApiService.json
- 01421-MonoSForm.json (01421-MonoSForm.kendo.json)
- 01501-MonoVform.json (01501-MonoVform.kendo.json)
- 01503-MonoAform.json (01503-MonoAform.kendo.json)
- 01505-MonoUform.json (01505-MonoUform.kendo.json)
- 01507-MonoDform.json (01507-MonoDform.kendo.json)
- 01601-MonoLform.json (01601-MonoLform.kendo.json)
- 01961-MonoRv.json (01961-MonoRv.kendo.json)
- 01963-MonoRa.json (01963-MonoRa.kendo.json)
- 01965-MonoRu.json (01965-MonoRu.kendo.json)
- 01967-MonoRd.json (01967-MonoRd.kendo.json)
- 01969-MonoRl.json (01969-MonoRl.kendo.json)
- 02021-MonoRdl.json (02021-MonoRdl.kendo.json)
- 02031-MonoSc.json (02031-MonoSc.kendo.json)
- The second: Any app should have one or more DbContexts
- The third: Each DbContext declares one or more entities
- The first: to generate code with micro-frontend support we should use the following batch-scripts
-
One natural way to split is to create a separate Angular app for each DbContext.
-
But that's only half the battle:
- it is not bad idea to split each app into libraries:
-
The highest possible splitting:
- For each entity and each batch-script (with a name XXXX-MonoYYY.json) create a separate library.
- As a result, for each entity we obtain 15 libraries or so.
-
More realistic splitting way:
- For each DbContext create 15 libraries: one library per batch-script
-
Typical splitting way: eight libraries per Dbcontext
- One lib per DbContext for all entities and the following scripts
- 01101-MonoInterfaces.json
- One lib per DbContext for all entities and the following scripts
- 01401-MonoWebApiService.json
- One lib per DbContext for all entities and the following scripts
- 01421-MonoSForm.json (01421-MonoSForm.kendo.json)
- One lib per DbContext for all entities and the following scripts
- 01501-MonoVform.json (01501-MonoVform.kendo.json)
- 01503-MonoAform.json (01503-MonoAform.kendo.json)
- 01505-MonoUform.json (01505-MonoUform.kendo.json)
- 01507-MonoDform.json (01507-MonoDform.kendo.json)
- One lib per DbContext for all entities and the following scripts
- 01601-MonoLform.json (01601-MonoLform.kendo.json).
- Lform is not recommended for the production!!!
- 01601-MonoLform.json (01601-MonoLform.kendo.json).
- One lib per DbContext for all entities and the following scripts:
- 01961-MonoRv.json (01961-MonoRv.kendo.json)
- 01963-MonoRa.json (01963-MonoRa.kendo.json)
- 01965-MonoRu.json (01965-MonoRu.kendo.json)
- 01967-MonoRd.json (01967-MonoRd.kendo.json)
- 01969-MonoRl.json (01969-MonoRl.kendo.json)
- One lib per DbContext for all entities and the following scripts:
- 02021-MonoRdl.json (02021-MonoRdl.kendo.json)
- One lib per DbContext for all entities and the following scripts:
- 02031-MonoSc.json (02031-MonoSc.kendo.json)
- One lib per DbContext for all entities and the following scripts
-
The highest possible splitting:
- it is not bad idea to split each app into libraries:
- Naming approach is the same as for Monolithic App
- we create the subfolders in each library and name them as for monolithic app (read paragraph above).
- We will use Typical splitting for our demo app. Let's create eight libraries:
ng generate library phonebook-interfaces
ng generate library phonebook-services
ng generate library phonebook-sforms
ng generate library phonebook-updforms
ng generate library phonebook-lforms
ng generate library phonebook-rlforms
ng generate library phonebook-rdlforms
ng generate library phonebook-scforms
- After creating we remove all files in the 'src/lib'-subfolders
- Modify each 'src/public-api.ts'-file as follows:
/*
* Public API Surface of common-auth
*/
import '@angular/localize/init';
-
Under 'src/lib'-folder of each library we create the following subfolders
- phbk-phone-type
- phbk-enterprise
- phbk-division
- phbk-employee
- phbk-phone
-
Under 'src/lib'-folder of phonebook-interfaces and phonebook-services library we create additional subfolders
- lpd-division
- lpr-division01
- lpr-division02
- lpd-emp-last-name
- lpd-emp-first-name
- lpd-emp-second-name
- lpr-employee01
- lpr-employee02
- lpd-phone
- lpr-phone01
- lpr-phone02
- lpr-phone03
- lpr-phone04
- in the paragraph we described creation of the
AngularPhonebook
-application.- according to Typical splitting way paragraph we do not use the folders of
AngularPhonebook
-application to generate typescript classes. - there are two scripts which will be used to modify the files of
AngularPhonebook
-application - the generated code by these two scripts above should be copied into
src/app/app-routing.module.ts
-
src/app/app.component.html
(orsrc/app/app.component.ts
)
- according to Typical splitting way paragraph we do not use the folders of
- Please read the article "109 Security: All Views of the app".
- we have the second DbContext, which is used to manage users, roles, permissions and so on.
- There are special batch-scripts to create such an application
- 02140-MonoAspNetAllInterfacesBatch.json
- 02141-MonoAspNetAllWebApiServicesBatch.json
- 02142-MonoAspNetAllSFormsBatch.json (02142-MonoAspNetAllSFormsBatch.kendo.json)
- 02143-MonoAspNetAllVformsBatch.json (02143-MonoAspNetAllVformsBatch.kendo.json)
- 02144-MonoAspNetAllAformsBatch.json (02144-MonoAspNetAllAformsBatch.kendo.json)
- 02145-MonoAspNetAllUformsBatch.json (02145-MonoAspNetAllUformsBatch.kendo.json)
- 02146-MonoAspNetAllDformsBatch.json (02146-MonoAspNetAllDformsBatch.kendo.json)
- 02147-MonoAspNetAllRvBatch.json (02147-MonoAspNetAllRvBatch.kendo.json)
- 02148-MonoAspNetAllRaBatch.json (02148-MonoAspNetAllRaBatch.kendo.json)
- 02149-MonoAspNetAllRuBatch.json (02149-MonoAspNetAllRuBatch.kendo.json)
- 02150-MonoAspNetAllRdBatch.json (02150-MonoAspNetAllRdBatch.kendo.json)
- 02151-MonoAspNetAllRlBatch.json (02151-MonoAspNetAllRlBatch.kendo.json)
- 02152-MonoAspNetAllRdlBatch.json (02152-MonoAspNetAllRdlBatch.kendo.json)
- Again applying "Typical splitting way" we will generate all the code into libraries
-
ng generate library asp-interfaces
- for 02140-MonoAspNetAllInterfacesBatch.json
-
ng generate library asp-services
- for 02141-MonoAspNetAllWebApiServicesBatch.json
-
ng generate library asp-sforms
- for 02142-MonoAspNetAllSFormsBatch.json (02142-MonoAspNetAllSFormsBatch.kendo.json)
-
ng generate library asp-updforms
- for 02143-MonoAspNetAllVformsBatch.json (02143-MonoAspNetAllVformsBatch.kendo.json)
- for 02144-MonoAspNetAllAformsBatch.json (02144-MonoAspNetAllAformsBatch.kendo.json)
- for 02145-MonoAspNetAllUformsBatch.json (02145-MonoAspNetAllUformsBatch.kendo.json)
- for 02146-MonoAspNetAllDformsBatch.json (02146-MonoAspNetAllDformsBatch.kendo.json)
-
ng generate library asp-lforms
- there is no special scripts for asp-lforms
-
ng generate library asp-rlforms
- for 02147-MonoAspNetAllRvBatch.json (02147-MonoAspNetAllRvBatch.kendo.json)
- for 02148-MonoAspNetAllRaBatch.json (02148-MonoAspNetAllRaBatch.kendo.json)
- for 02149-MonoAspNetAllRuBatch.json (02149-MonoAspNetAllRuBatch.kendo.json)
- for 02150-MonoAspNetAllRdBatch.json (02150-MonoAspNetAllRdBatch.kendo.json)
- for 02151-MonoAspNetAllRlBatch.json (02151-MonoAspNetAllRlBatch.kendo.json)
-
ng generate library asp-rdlforms
- for 02152-MonoAspNetAllRdlBatch.json (02152-MonoAspNetAllRdlBatch.kendo.json)
-
ng generate library asp-scforms
- there is no special scripts for asp-scforms
-
- Talking about first Micro-frontend App
- If to follow the rules described above we could not apply Module Federation library since the scripts below import code not from the second app but from the "asp-libraries" (asp-interfaces, asp-services, ..., asp-rdlforms)
- To make Module Federation applicable we will generate the following scripts in some folders of the second app
- 02147-MonoAspNetAllRvBatch.json (02147-MonoAspNetAllRvBatch.kendo.json)
- 02148-MonoAspNetAllRaBatch.json (02148-MonoAspNetAllRaBatch.kendo.json)
- 02149-MonoAspNetAllRuBatch.json (02149-MonoAspNetAllRuBatch.kendo.json)
- 02150-MonoAspNetAllRdBatch.json (02150-MonoAspNetAllRdBatch.kendo.json)
- 02151-MonoAspNetAllRlBatch.json (02151-MonoAspNetAllRlBatch.kendo.json)
- 02152-MonoAspNetAllRdlBatch.json (02152-MonoAspNetAllRdlBatch.kendo.json)