019.1 Feature typescript component for the First View (Material UI) - chempkovsky/CS82ANGULAR GitHub Wiki
- 16 Run FeatureScripts Wizard
- 16 First page of the Wizard
- 16 Second page of the Wizard
- 16 Third page of the Wizard
- 16 Feature Dialog
- 16 Third page of the Wizard again
- 16 Fourth page of the Wizard
- 16 Fifth page of the Wizard
- 16 Sixth page of the Wizard
- 16 Repeat actions
-
PhbkPhoneTypeView
-View is our very first View. - For any ModelView we can generate LForm-component.
- But LForm does not support routing.
- On the other hand, we have Rdl-component which implements the same functions and in addition supports routing.
- There is another question which is related to 06 The possible error you must be aware.
- And the question is
- What is a reason to generate
LForm
-component?
- What is a reason to generate
- The answer will be as follows:
- sometimes you need to display more than one tabled View on the page with and without supporting routing
- e.g. for example, a list of simple application's dictionaries along with static content (with some description) attached to each dictionary, which will be useful for the admin-user
- sometimes you need to display more than one tabled View on the page with and without supporting routing
- The Feature-component implements such a functionality
- it supports navigation (or angular routing)
- it can be used to host any number of
LForm
-components (for different ModelViews). - it also can be used to host navigation aware component (like
Rl
orRdl
forms) (but only one per Feature-component) - and it can be used to host static content components
-
Sc-component (Static Content form) is a content form of the data for the given ModelView.
-
To generate Sc
- Run Visual Studio and Open
PhonebookSolution
solution - Right Click
src/app/components/phbk-phone-type-view
of thesrc
-project (Angular project) and selectJavaScripts Wizard
menu item to open the Wizard dialog
- Run Visual Studio and Open
-
repeat the steps as they described at 01 Generating interfaces until
Batch Action dialog
-
Note: you do not need to set up
UI Form properties
andUI List properties
again.
-
Note: you do not need to set up
- On the Batch Action-dialog of the Wizard
- select 02030-Sc.json
- click start-button
Click to show the picture
- Add
featues
-subfolder insrc/app
-folder
Click to show the picture
- Add
simple-dictionaries
-subfolder insrc/app/featues
-folder
Click to show the picture
- To generate SimpleDictionary feature component
- Run Visual Studio and Open
PhonebookSolution
solution - Right Click
src/app/featues/simple-dictionaries
of thesrc
-project (Angular project) and selectFeatureScripts 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
- Click
Add
Button
- Click
Click to show the picture
- On the Feature Dialog of the Wizard
- Enter the
SimpleDictionary
-name - Check the following components for
PhbkPhoneTypeView
-View- 01600
- 01920
- 02100
- Click
Save
-button
- Enter the
Click to show the picture
- On the Third page
- reorder the components of the feature
- click
Next
-Button
Click to show the picture
- select
30100-.ftr.component.css
- Click
Next
-button
Click to show the picture
- select
ftr.component.css.t4
- Click
Next
-button
Click to show the picture
- Click
Save
-button - Click
Next
-button
Click to show the picture
- After
Next
-button on the Sixth page of the Wizard you will be back to 16 Third page of the Wizard again - Repeat the following actions
- For the pairs
-
30100-.ftr.component.html
ftr.component.html.t4
-
30100-.ftr.component.ts
ftr.component.ts.t4
-
30130-.ftr.routing.module.ts
FtrRoutingModuleForFeature.ts.t4
-
30150-.ftr.module.ts
FtrModuleForFeature.ts.t4
-
30160-.ftr.lazy.routing.module.ts
FtrLazyRoutingModuleForFeature.ts.t4
-
- open the
simple-dictionary.ftr.lazy.routing.module.ts
-file which is generated with30160-.ftr.lazy.routing.module.ts
-script- At the beginning of the file you can see the instruction of how to modify
app.component.html
andapp-routing.module.ts
files.
- At the beginning of the file you can see the instruction of how to modify
...
//
// Hint:
// add the following two lines
//
// { path: 'simpledictionary', loadChildren: () => import('./featues/simple-dictionaries/simple-dictionary.ftr.lazy.routing.module').then(m => m.SimpleDictionaryFtrLazyRoutingModule),
// data: { vn: 'SimpleDictionaryFtrComponent', va: 'l'} },
//
// to the array
// const routes: Routes = [ ... ]
//
// of the "app-routing.module.ts"-file
//
// In the app.component.html-file add the following line
// <mat-nav-list>
// ...
// <a mat-list-item [routerLink]="['/simpledictionary']" routerLinkActive="active">Title for SimpleDictionary </a>
// ...
// </mat-nav-list>
//
//
//
...
- open the
app-routing.module.ts
-file and copy the following lines of code intoconst routes: Routes = [...]
- definition
///////// begin SimpleDictionary
{ path: 'simpledictionary', loadChildren: () => import('./featues/simple-dictionaries/simple-dictionary.ftr.lazy.routing.module').then(m => m.SimpleDictionaryFtrLazyRoutingModule),
data: { vn: 'SimpleDictionaryFtrComponent', va: 'l'} },
///////// end SimpleDictionary
- open
app.component.html
- file- inside
<mat-nav-list>...</mat-nav-list>
insert recommended line
- inside
<a mat-list-item [routerLink]="['/simpledictionary']" routerLinkActive="active">Title for SimpleDictionary </a>
- so our html-code becomes as follows:
...
<mat-nav-list>
<a mat-list-item [routerLink]="['/home']" routerLinkActive="active"> <mat-icon>home</mat-icon> </a>
<!--
<a mat-list-item [routerLink]="['/admin1feature']" routerLinkActive="active">Admin1</a>
-->
<a mat-list-item [routerLink]="['RDLPhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types (Dlg)</a>
<a mat-list-item [routerLink]="['PhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types</a>
<a mat-list-item [routerLink]="['/simpledictionary']" routerLinkActive="active">Title for SimpleDictionary </a>
</mat-nav-list>
...
- With Visual Studio 2022 launch
PhBkWebApp
-app
- save changes of the
app-routing.module.ts
- file - save changes of the
app.component.html
-file - with Visual Studio Code open the terminal and run the command
ng serve -o
- Here is a result
Click to show the picture
- each component inside the feature can be expanded and collapsed