025.1 Navigation aware typescript components for the Second View (Material UI) - chempkovsky/CS82ANGULAR GitHub Wiki
- 08 Fourth page of the Wizard
- 08 Fifth page of the Wizard
- 08 Sixth page of the Wizard
- 08 Modify AppRouting module file
- 08 Modify AppComponentHtml file
- 11 Fourth page of the Wizard
- 11 Fifth page of the Wizard
- 11 Sixth page of the Wizard
- 11 Modify AppRouting module file
- 11 Modify AppComponentHtml file
-
PhbkEnterpriseView
-View is our second View. -
The list of Navigation aware component includes
- dialog based component
-
Rdl
-component. This component is routedLform
, whereAdd/Update/Delete/View Item
implemented as a popup Dialogs.
-
- pure navigation based components
-
Rl
-component. This component is a routedSForm
. It uses Angular routing to navigate toAdd/Update/Delete/View Item
. -
RA
,RU
,RD
, RV` components.- these components support Angular routing.
- these components use
AForm, UForm, DForm, VForm
-components to implementAdd/Update/Delete/View Item
functionality.
-
- dialog based component
-
For dialog based components the development process consists of
- Generation code for
Rdl
-component. - Generation code for Angular Routes to be inserted in
const routes: Routes = [...]
of theapp-routing.module.ts
-file - Modifying
<mat-nav-list>...<mat-nav-list>
of theapp.component.html
-file, to make navigation available to the user/
- Generation code for
-
For pure navigation based components the development process consists of
- Generation code for
RA
,RU
,RD
, RV,
Rdl` components. - Generation code for Angular Routes to be inserted in
const routes: Routes = [...]
of theapp-routing.module.ts
-file - Modifying
<mat-nav-list>...<mat-nav-list>
of theapp.component.html
-file, to make navigation available for the user
- Generation code for
-
To generate Rdl
- Run Visual Studio and Open
PhonebookSolution
solution - Right Click
src/app/components/phbk-enterprise-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
- repeat the steps described in the article
- To generate Rdl Angular Routes
- Run Visual Studio and Open
PhonebookSolution
solution - Right Click
src/app/
of thesrc
-project (Angular project) and selectJavaScripts Wizard
menu item to open the Wizard dialog-
Note: We should right click
src/app/
-folder, since we will insert the generated code in theapp-routing.module.ts
-file. The last one is in thesrc/app/
-folder.
-
Note: We should right click
- Run Visual Studio and Open
Click to show the picture
- 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
- repeat the steps described in the article
- repeat the steps described in the article
- repeat the steps described in the article
- open
app-routing.module.ts
- file - modify
const routes: Routes = [...]
-array as follows (insert generated code from the clipboard):
const routes: Routes = [
///////// begin RDLPhbkEnterpriseView
{ path: 'RDLPhbkEnterpriseView',
loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rdl-lazy.routing.module').then(m => m.PhbkEnterpriseViewRdlLazyRoutingModule),
data: { vn: 'PhbkEnterpriseView', va: 'l', ms: true, np: 'RDL', fh: 2, mh: 10, sf: true, /* title: 'Enterprises', */ dp: 1, uid: 'fcc588b4652048b6ae553d1adb6edaae' } },
///////// end RDLPhbkEnterpriseView
...
{ path: 'authentication', loadChildren: () => import('./shared/modules/app-glbl-security.module').then(m => m.AppGlblSecurityModule) },
{ path: 'home', component: AppGlblHomeComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
// { path: '**', component: AppGlblHomeComponent },
{ path: '**', component: AppGlblPagenotfoundComponent },
];
- open
app.component.html
- file- inside
<mat-nav-list>...</mat-nav-list>
insert recommended line
- inside
<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>
<a mat-list-item [routerLink]="['RDLPhbkEnterpriseView']" routerLinkActive="active">List of Enterprises (Dlg)</a>
</mat-nav-list>
- open the
PhbkDbContext.cs
-file of thePhBkContext.csproj
-project and modifyOnModelCreating
-method as follows
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
modelBuilder.Entity<PhbkEnterprise>().HasAlternateKey(p => p.EntrprsName).HasName("EntrprsNameUK");
modelBuilder.Entity<PhbkEnterprise>().HasKey(p => p.EntrprsId);
modelBuilder.Entity<PhbkPhoneType>().HasKey(p => p.PhoneTypeId);
modelBuilder.Entity<PhbkPhoneType>().HasData(new { PhoneTypeId = 1, PhoneTypeName = "Office phone", PhoneTypeDesc = "Office phone (one or more than one)" });
modelBuilder.Entity<PhbkPhoneType>().HasData(new { PhoneTypeId = 2, PhoneTypeName = "Home phone", PhoneTypeDesc = "Home phone (one or more than one)" });
modelBuilder.Entity<PhbkPhoneType>().HasData(new { PhoneTypeId = 3, PhoneTypeName = "Office mobile", PhoneTypeDesc = "Office mobile phone (one or more than one)" });
modelBuilder.Entity<PhbkPhoneType>().HasData(new { PhoneTypeId = 4, PhoneTypeName = "Personal mobile", PhoneTypeDesc = "Personal mobile phone (one or more than one)" });
modelBuilder.Entity<PhbkEnterprise>().HasData(new { EntrprsId = 1, EntrprsName = "Enterprise 1", EntrprsDesc = "Short description for Enterprise 1" });
modelBuilder.Entity<PhbkEnterprise>().HasData(new { EntrprsId = 2, EntrprsName = "Enterprise 2", EntrprsDesc = "Short description for Enterprise 2" });
modelBuilder.Entity<PhbkEnterprise>().HasData(new { EntrprsId = 3, EntrprsName = "Enterprise 3", EntrprsDesc = "Short description for Enterprise 3" });
modelBuilder.Entity<PhbkEnterprise>().HasData(new { EntrprsId = 4, EntrprsName = "Enterprise 4", EntrprsDesc = "Short description for Enterprise 4" });
}
- Delete copy of old database on SqlServer
- 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
-
Note: Returning to 06 The possible error you must be aware. The Error is gone!!!
-
Node: We added additional Unique Key to the Entity. As a result we have additional filtering method.
Click to show the picture
- and
Click to show the picture
-
To generate Rdl
- Run Visual Studio and Open
PhonebookSolution
solution - Right Click
src/app/components/phbk-enterprise-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 01960-Rv.json
- click start-button
- select 01962-Ra.json
- click start-button
- select 01964-Ru.json
- click start-button
- select 01966-Rd.json
- click start-button
- select 01968-Rl.json
- click start-button
Click to show the picture
- To generate Rl Angular Routes
- Run Visual Studio and Open
PhonebookSolution
solution - Right Click
src/app/
of thesrc
-project (Angular project) and selectJavaScripts Wizard
menu item to open the Wizard dialog-
Note: We should right click
src/app/
-folder, since we will insert the generated code in theapp-routing.module.ts
-file. The last one is in thesrc/app/
-folder.
-
Note: We should right click
- Run Visual Studio and Open
Click to show the picture
- 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 Fourth page of the Wizard
- select
01980-R-lazy.routes.ts
- click
Next
-button
- select
Click to show the picture
- On the Fourth page of the Wizard
- select
r-lazy.routes.ts.t4
- click
Next
-button
- select
Click to show the picture
-
Note 1: Do not save the generated file.
- Instead copy the content into the clipboard
-
Note 2: The generated code contains instructions of how to modify
app.component.html
andapp-routing.module.ts
files.
Click to show the picture
- open
app-routing.module.ts
- file - modify
const routes: Routes = [...]
-array as follows (insert generated code from the clipboard):
const routes: Routes = [
///////// begin PhbkEnterpriseView
{ path: 'PhbkEnterpriseView/ViewPhbkEnterpriseView/:hf2/:id2',
loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rv-lazy.routing.module').then(m => m.PhbkEnterpriseViewRvLazyRoutingModule),
data: { vn: 'PhbkEnterpriseView', va: 'v', /* sf: true, title: 'View Enterprise', */ hf: 'hf2', id: 'id2', dp: 2}},
{ path: 'PhbkEnterpriseView/AddPhbkEnterpriseView/:hf2',
loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-ra-lazy.routing.module').then(m => m.PhbkEnterpriseViewRaLazyRoutingModule),
data: { vn: 'PhbkEnterpriseView', va: 'a', /* sf: true, title: 'Add Enterprise', */ hf: 'hf2', dp: 2}},
{ path: 'PhbkEnterpriseView/UpdPhbkEnterpriseView/:hf2/:id2',
loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-ru-lazy.routing.module').then(m => m.PhbkEnterpriseViewRuLazyRoutingModule),
data: { vn: 'PhbkEnterpriseView', va: 'u', /* sf: true, title: 'Update Enterprise', */ hf: 'hf2', id: 'id2', dp: 2}},
{ path: 'PhbkEnterpriseView/DelPhbkEnterpriseView/:hf2/:id2',
loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rd-lazy.routing.module').then(m => m.PhbkEnterpriseViewRdLazyRoutingModule),
data: { vn: 'PhbkEnterpriseView', va: 'd', /* sf: true, title: 'Delete Enterprise', */ hf: 'hf2', id: 'id2', dp: 2}},
{ path: 'PhbkEnterpriseView',
loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rl-lazy.routing.module').then(m => m.PhbkEnterpriseViewRlLazyRoutingModule),
data: { vn: 'PhbkEnterpriseView', va: 'l', ms: true, fh: 2, mh: 10, sf: true, /* title: 'Enterprises', */ dp: 1, uid: '00f49a2e5d0945f6bb083b33a22dc6bd' } },
///////// end PhbkEnterpriseView
...
{ path: 'authentication', loadChildren: () => import('./shared/modules/app-glbl-security.module').then(m => m.AppGlblSecurityModule) },
{ path: 'home', component: AppGlblHomeComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
// { path: '**', component: AppGlblHomeComponent },
{ path: '**', component: AppGlblPagenotfoundComponent },
];
- open
app.component.html
- file- inside
<mat-nav-list>...</mat-nav-list>
insert recommended line
- inside
<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>
<a mat-list-item [routerLink]="['RDLPhbkEnterpriseView']" routerLinkActive="active">List of Enterprises (Dlg)</a>
<a mat-list-item [routerLink]="['PhbkEnterpriseView']" routerLinkActive="active">List of Enterprises</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
- and
Update Item
-form