019.1 Feature typescript component for the First View (Material UI) - chempkovsky/CS82ANGULAR GitHub Wiki

Notes

13 Generating Static Content component

14 Adding features folder to Angular project

15 Adding SimpleDictionary folder to Angular project

16 Generate SimpleDictionary feature

17 SimpleDictionary feature Angular Routes

18 Test SimpleDictionary feature Component

Notes

  • 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?
  • 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
  • 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 or Rdl forms) (but only one per Feature-component)
    • and it can be used to host static content components

13 Generating Static Content component

  • 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 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.

13 Batch Action dialog

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

project structure

14 Adding features folder to Angular project

  • Add featues-subfolder in src/app-folder
Click to show the picture

project structure

15 Adding SimpleDictionary folder to Angular project

  • Add simple-dictionaries-subfolder in src/app/featues-folder
Click to show the picture

project structure

16 Generate SimpleDictionary feature

16 Run FeatureScripts Wizard

  • To generate SimpleDictionary feature component
    • Run Visual Studio and Open PhonebookSolution solution
    • Right Click src/app/featues/simple-dictionaries of the src-project (Angular project) and select FeatureScripts Wizard menu item to open the Wizard dialog
Click to show the picture

project structure

16 First page of the Wizard

  • 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

project structure

16 Second page of the Wizard

  • 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

project structure

16 Third page of the Wizard

  • On the third page of the Wizard
    • Click Add Button
Click to show the picture

project structure

16 Feature Dialog

  • On the Feature Dialog of the Wizard
    • Enter the SimpleDictionary-name
    • Check the following components for PhbkPhoneTypeView-View
      • 01600
      • 01920
      • 02100
    • Click Save-button
Click to show the picture

project structure

16 Third page of the Wizard again

  • On the Third page
    • reorder the components of the feature
    • click Next-Button
Click to show the picture

project structure

16 Fourth page of the Wizard

  • select 30100-.ftr.component.css
  • Click Next-button
Click to show the picture

project structure

16 Fifth page of the Wizard

  • select ftr.component.css.t4
  • Click Next-button
Click to show the picture

project structure

16 Sixth page of the Wizard

  • Click Save-button
  • Click Next-button
Click to show the picture

project structure

16 Repeat actions

17 SimpleDictionary feature Angular Routes

  • open the simple-dictionary.ftr.lazy.routing.module.ts-file which is generated with 30160-.ftr.lazy.routing.module.ts-script
    • At the beginning of the file you can see the instruction of how to modify app.component.html and app-routing.module.ts files.
...
//
// 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 into const 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
  <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>
...

18 Test SimpleDictionary feature Component

18 Run PhBkWebApp

  • With Visual Studio 2022 launch PhBkWebApp-app

18 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

  • each component inside the feature can be expanded and collapsed
⚠️ **GitHub.com Fallback** ⚠️