018.1 Navigation aware typescript components for the First View (Material UI) - chempkovsky/CS82ANGULAR GitHub Wiki

Notes

07 Generating Rdl component

08 Generating code for Rdl Angular Routes

09 Test Rdl Component

10 Generating Rl component

11 Generating code for Rl Angular Routes

12 Test Rl Component

Notes

  • PhbkPhoneTypeView-View is our very first View.

  • The list of Navigation aware component includes

    • dialog based component
      • Rdl-component. This component is routed Lform, where Add/Update/Delete/View Item implemented as a popup Dialogs.
    • pure navigation based components
      • Rl-component. This component is a routed SForm. It uses Angular routing to navigate to Add/Update/Delete/View Item.
      • RA, RU, RD, RV` components.
        • these components support Angular routing.
        • these components use AForm, UForm, DForm, VForm-components to implement Add/Update/Delete/View Item functionality.

  • 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 the app-routing.module.ts-file
    • Modifying <mat-nav-list>...<mat-nav-list> of the app.component.html-file, to make navigation available to the user/

  • 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 the app-routing.module.ts-file
    • Modifying <mat-nav-list>...<mat-nav-list> of the app.component.html-file, to make navigation available to the user/

07 Generating Rdl component

  • To generate Rdl

    • Run Visual Studio and Open PhonebookSolution solution
    • Right Click src/app/components/phbk-phone-type-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog

  • 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 and UI List properties again.

07 Batch Action dialog

  • On the Batch Action-dialog of the Wizard
    • select 02020-Rdl.json
    • click start-button
Click to show the picture

project structure

08 Generating code for Rdl Angular Routes

  • To generate Rdl Angular Routes
    • Run Visual Studio and Open PhonebookSolution solution
    • Right Click src/app/ of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
      • Note: We should right click src/app/-folder, since we will insert the generated code in the app-routing.module.ts-file. The last one is in the src/app/-folder.
Click to show the picture

project structure

  • 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 and UI List properties again.

08 Fourth page of the Wizard

  • On the Fourth page of the Wizard
    • select 02060-Rdl-lazy.routes.ts
    • click Next-button
Click to show the picture

project structure

08 Fifth page of the Wizard

  • On the Fourth page of the Wizard
    • select rdl-lazy.routes.ts.t4
    • click Next-button
Click to show the picture

project structure

08 Sixth page of the Wizard

  • 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 and app-routing.module.ts files.
Click to show the picture

project structure

08 Modify AppRouting module file

  • open app-routing.module.ts- file
  • modify const routes: Routes = [...]-array as follows (insert generated code from the clipboard):
const routes: Routes = [
  //  begin RDLPhbkPhoneTypeView

  { path: 'RDLPhbkPhoneTypeView', 
  loadChildren: () => import('./components/phbk-phone-type-view/phbk-phone-type-view-rdl-lazy.routing.module').then(m => m.PhbkPhoneTypeViewRdlLazyRoutingModule),
  data: { vn: 'PhbkPhoneTypeView', va: 'l', ms: true, np: 'RDL', fh: 2, mh: 10, sf: true, /* title: 'Phone Types', */  dp: 1, uid: '71bbc88a112d453fab0400aef267e342' }  },

  // end RDLPhbkPhoneTypeView


  { 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 },

];

08 Modify AppComponentHtml file

  • open app.component.html- file
    • inside <mat-nav-list>...</mat-nav-list> insert recommended line
      <mat-nav-list>
      ...
        <a mat-list-item [routerLink]="['RDLPhbkPhoneTypeView']" routerLinkActive="active">List of PhbkPhoneTypeView</a>
      </mat-nav-list>

09 Test Rdl Component

09 Run PhBkWebApp

  • With Visual Studio 2022 launch PhBkWebApp-app

09 Run Angular 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

project structure

10 Generating Rl component

  • To generate Rdl

    • Run Visual Studio and Open PhonebookSolution solution
    • Right Click src/app/components/phbk-phone-type-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog

  • 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 and UI List properties again.

10 Batch Action dialog

  • 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

project structure

11 Generating code for Rl Angular Routes

  • To generate Rl Angular Routes
    • Run Visual Studio and Open PhonebookSolution solution
    • Right Click src/app/ of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
      • Note: We should right click src/app/-folder, since we will insert the generated code in the app-routing.module.ts-file. The last one is in the src/app/-folder.
Click to show the picture

project structure

  • 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 and UI List properties again.

11 Fourth page of the Wizard

  • On the Fourth page of the Wizard
    • select 01980-R-lazy.routes.ts
    • click Next-button
Click to show the picture

project structure

11 Fifth page of the Wizard

  • On the Fourth page of the Wizard
    • select r-lazy.routes.ts.t4
    • click Next-button
Click to show the picture

project structure

11 Sixth page of the Wizard

  • 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 and app-routing.module.ts files.
Click to show the picture

project structure

11 Modify AppRouting module file

  • open app-routing.module.ts- file
  • modify const routes: Routes = [...]-array as follows (insert generated code from the clipboard):
const routes: Routes = [

  ///////// begin PhbkPhoneTypeView

    { path: 'PhbkPhoneTypeView/ViewPhbkPhoneTypeView/:hf2/:id2', 
        loadChildren: () => import('./components/phbk-phone-type-view/phbk-phone-type-view-rv-lazy.routing.module').then(m => m.PhbkPhoneTypeViewRvLazyRoutingModule),
        data: { vn: 'PhbkPhoneTypeView', va: 'v', /* sf: true,  title: 'View Phone Type', */ hf: 'hf2',  id: 'id2', dp: 2}},

    { path: 'PhbkPhoneTypeView/AddPhbkPhoneTypeView/:hf2', 
        loadChildren: () => import('./components/phbk-phone-type-view/phbk-phone-type-view-ra-lazy.routing.module').then(m => m.PhbkPhoneTypeViewRaLazyRoutingModule),
        data: { vn: 'PhbkPhoneTypeView', va: 'a', /* sf: true,  title: 'Add Phone Type', */ hf: 'hf2',  dp: 2}},

    { path: 'PhbkPhoneTypeView/UpdPhbkPhoneTypeView/:hf2/:id2', 
        loadChildren: () => import('./components/phbk-phone-type-view/phbk-phone-type-view-ru-lazy.routing.module').then(m => m.PhbkPhoneTypeViewRuLazyRoutingModule),
        data: { vn: 'PhbkPhoneTypeView', va: 'u', /* sf: true,  title: 'Update Phone Type', */ hf: 'hf2',  id: 'id2',  dp: 2}},

    { path: 'PhbkPhoneTypeView/DelPhbkPhoneTypeView/:hf2/:id2', 
        loadChildren: () => import('./components/phbk-phone-type-view/phbk-phone-type-view-rd-lazy.routing.module').then(m => m.PhbkPhoneTypeViewRdLazyRoutingModule),
        data: { vn: 'PhbkPhoneTypeView', va: 'd', /* sf: true,  title: 'Delete Phone Type', */ hf: 'hf2',  id: 'id2',  dp: 2}},

    { path: 'PhbkPhoneTypeView', 
        loadChildren: () => import('./components/phbk-phone-type-view/phbk-phone-type-view-rl-lazy.routing.module').then(m => m.PhbkPhoneTypeViewRlLazyRoutingModule),
        data: { vn: 'PhbkPhoneTypeView', va: 'l', ms: true,  fh: 2, mh: 10, sf: true, /* title: 'Phone Types', */  dp: 1, uid: '789b63345a3b491cbb674f7bd03fc8b5' }  },

  ///////// end PhbkPhoneTypeView

  ///////// begin RDLPhbkPhoneTypeView

  { path: 'RDLPhbkPhoneTypeView', 
  loadChildren: () => import('./components/phbk-phone-type-view/phbk-phone-type-view-rdl-lazy.routing.module').then(m => m.PhbkPhoneTypeViewRdlLazyRoutingModule),
  data: { vn: 'PhbkPhoneTypeView', va: 'l', ms: true, np: 'RDL', fh: 2, mh: 10, sf: true, /* title: 'Phone Types', */  dp: 1, uid: '71bbc88a112d453fab0400aef267e342' }  },

  ///////// end RDLPhbkPhoneTypeView


  { 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 },

];

11 Modify AppComponentHtml file

  • open app.component.html- file
    • inside <mat-nav-list>...</mat-nav-list> insert recommended line
      <mat-nav-list>
      ...
        <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>
      </mat-nav-list>

12 Test Rl Component

12 Run PhBkWebApp

  • With Visual Studio 2022 launch PhBkWebApp-app

12 Run Angular 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

project structure

⚠️ **GitHub.com Fallback** ⚠️