Home - chempkovsky/CS82ANGULAR GitHub Wiki

Welcome to the CS82ANGULAR wiki!

  • CS82ANGULAR is a Rapid application development tool (RAD). With CS82ANGULAR the developer can model and generate data management web application with

    • Frontend based on ANGULAR framework.
      • tested on ANGULAR 15, 16, 17, 18, 19
      • no longer supported ANGULAR 14, 13, 12, 11, 10, 9 (a few years ago the project started with Angular 9)
    • Backend based on net.core 6. (last test on TargetFramework = net9.0)

  • The documentation is structured as a set of detailed instructions for building a fully functional application. Follow the instructions to create a sample application and this will give you a complete understanding of how to use this tool.

  • At the end you will create (Don't worry, the demo front-end app was built on Angular 13)

Live app

  • You can take a look at live app in the docker
    • For this
      • create a folder
      • in the folder save the docker-compose.yml-file with content shown below
      • in the terminal run the command: docker-compose -f "docker-compose.yml" up -d
      • in the browser go to URL=http://localhost:93/
      • to stop the app run the command: docker-compose -f "docker-compose.yml" down
Show docker-compose.yml 
services:
  pbdb:
    image: "mcr.microsoft.com/mssql/server:2019-latest"
    hostname: "pbdb"
    expose:
      - "1433"
#    ports:
#      - "1433:1433"
    environment:
      ACCEPT_EULA: "Y"
      SA_PASSWORD: "myPss@wrd"
    healthcheck:
      test: /opt/mssql-tools/bin/sqlcmd -S localhost -U sa -P "$${SA_PASSWORD}" -Q "SELECT 1" -b -o /dev/null
      interval: 10s
      timeout: 3s
      retries: 10
      start_period: 10s
  pbrabbit:
    image: "chempkovsky/rabbitmq-phn-bk:latest"
    hostname: "pbrabbit"
    environment:
      RABBITMQ_CONFIG_FILE: '/etc/rabbitmq/rabbitmq.conf'
    expose:
      - "5672"
    healthcheck:
      test: rabbitmq-diagnostics -q ping
      interval: 30s
      timeout: 30s
      retries: 3
      start_period: 10s    
#    ports:
#      - 15672:15672
  webapiphnlkup:
    image: "chempkovsky/webapi-phn-lkup:latest"
    hostname: "webapiphnlkup"
    environment:
      ConnectionStrings:LpPhnPhBkConnection: "Data Source=pbdb;Initial Catalog=LpPhnPhBkDbDef;Persist Security Info=True;User ID=sa;Password=myPss@wrd" 
      ConnectionStrings:LpEmpPhBkConnection: "Data Source=pbdb;Initial Catalog=LpEmpPhBkDbDef;Persist Security Info=True;User ID=sa;Password=myPss@wrd" 
      ConnectionStrings:LpPhBkConnection: "Data Source=pbdb;Initial Catalog=LpPhBkDbDef;Persist Security Info=True;User ID=sa;Password=myPss@wrd" 
      JWT:ValidAudience: "PhBkAudience" 
      JWT:ValidIssuer: "PhBkIssuer" 
      JWT:Secret": "JWTAuthenticationHIGHsecuredPasswordVVVp1OH7Xzyr" 
      PhbkDivisionViewExtForLkUpConf:HostName: "pbrabbit" 
      PhbkDivisionViewExtForLkUpConf:Username: "admin" 
      PhbkDivisionViewExtForLkUpConf:Password: "admin" 
      PhbkDivisionViewExtForLkUpConf:VirtualHostName: "phbkhost" 
      PhbkDivisionViewExtForLkUpConf:ClusterIpAddresses: null
      PhbkEmployeeViewExtForLkUpConf:HostName: "pbrabbit" 
      PhbkEmployeeViewExtForLkUpConf:Username: "admin" 
      PhbkEmployeeViewExtForLkUpConf:Password: "admin" 
      PhbkEmployeeViewExtForLkUpConf:VirtualHostName: "phbkhost" 
      PhbkEmployeeViewExtForLkUpConf:ClusterIpAddresses: null
      PhbkPhoneViewExtForLkUpConf:HostName: "pbrabbit" 
      PhbkPhoneViewExtForLkUpConf:Username: "admin" 
      PhbkPhoneViewExtForLkUpConf:Password: "admin" 
      PhbkPhoneViewExtForLkUpConf:VirtualHostName: "phbkhost" 
      PhbkPhoneViewExtForLkUpConf:ClusterIpAddresses: null
    links:
      - pbdb
      - pbrabbit
    ports:
      - 91:80
    depends_on:
      pbdb:
        condition: service_healthy
      pbrabbit:
        condition: service_healthy
  webapiphnbk:
    image: "chempkovsky/webapi-phn-bk:latest"
    hostname: "webapiphnbk"
    environment:
      ConnectionStrings:PhBkConnection: "Data Source=pbdb;Initial Catalog=PhBkDbDef;Persist Security Info=True;User ID=sa;Password=myPss@wrd" 
      ConnectionStrings:AuthConnection: "Data Source=pbdb;Initial Catalog=PhBkDbAuth;Persist Security Info=True;User ID=sa;Password=myPss@wrd" 
      ConnectionStrings:AspNetRegConnection: "Data Source=pbdb;Initial Catalog=PhBkAspNet;Persist Security Info=True;User ID=sa;Password=myPss@wrd" 
      JWT:ValidAudience: "PhBkAudience" 
      JWT:ValidIssuer: "PhBkIssuer" 
      JWT:Secret: "JWTAuthenticationHIGHsecuredPasswordVVVp1OH7Xzyr" 
      PhbkDivisionViewExtForLkUpConf:HostName: "pbrabbit" 
      PhbkDivisionViewExtForLkUpConf:Username: "admin" 
      PhbkDivisionViewExtForLkUpConf:Password: "admin" 
      PhbkDivisionViewExtForLkUpConf:VirtualHostName: "phbkhost" 
      PhbkDivisionViewExtForLkUpConf:ClusterIpAddresses: null
      PhbkEmployeeViewExtForLkUpConf:HostName: "pbrabbit" 
      PhbkEmployeeViewExtForLkUpConf:Username: "admin" 
      PhbkEmployeeViewExtForLkUpConf:Password: "admin" 
      PhbkEmployeeViewExtForLkUpConf:VirtualHostName: "phbkhost" 
      PhbkEmployeeViewExtForLkUpConf:ClusterIpAddresses: null
      PhbkPhoneViewExtForLkUpConf:HostName: "pbrabbit" 
      PhbkPhoneViewExtForLkUpConf:Username: "admin" 
      PhbkPhoneViewExtForLkUpConf:Password: "admin" 
      PhbkPhoneViewExtForLkUpConf:VirtualHostName: "phbkhost" 
      PhbkPhoneViewExtForLkUpConf:ClusterIpAddresses: null
    links:
      - pbdb
      - pbrabbit
    ports:
      - 92:80
    depends_on:
      pbdb:
        condition: service_healthy
      pbrabbit:
        condition: service_healthy
      webapiphnlkup:
        condition: service_started
  angularphnbk:
    image: "chempkovsky/angular-phn-bk:latest"
    environment:
      PHNLP_URL: "http://localhost:91/"
      EMPLP_URL: "http://localhost:91/"
      DIVLP_URL: "http://localhost:91/"
      WA_URL: "http://localhost:92/" 
      SEC_URL: "http://localhost:92/" 
      PERM_URL: "http://localhost:92/" 
    ports:
      - 93:80
    depends_on:
      pbdb:
        condition: service_healthy
      pbrabbit:
        condition: service_healthy
      webapiphnlkup:
        condition: service_started
      webapiphnbk:
        condition: service_started
  • read the notes about the very first run after logging in as administrator.
    • possible temporary errors are due to the fact that when the administrator requests data for the very first time, then the database creation and filling with data begins.
      • Access denied-message will be shown.
    • Please click
      • Phones
      • then Phones Dlg (5-10 seconds later)
      • then Phones again (5-10 seconds later)
    • After that, the application starts to work stably.

Overview

  • CS82ANGULAR includes modeling tool and code generators based on Microsoft Code Generation and T4 Text Templates

  • The structure of hands-on-lab is as follows

    • repeat the same steps five times. It's incremental approach of project development.

      • We have added a first entity PhoneType to the project
        • 007 - 019. Here we have ready to use app with one entity.
      • We have added a second entity Enterprise to the project
        • 020 - 26. Here we have ready to use app with two entities.
      • We have added a third entity Department to the project
        • 027 - 48. Here we have ready to use app with three entities.
      • We have added a fourth entity Employee to the project
        • 049 - 067. Here we have ready to use app with four entities.
      • We have added a fifth entity Phone to the project
        • 068 - 85. Here we have ready to use app with five entities.

    • Security of the app

    • Internationalization of the app

    • Running an Application in Docker

    • Using MySql

    • Using PostgreSQL

  • In the 300 Micro frontend support article you will find step-by-step instruction of app creation with micro frontend support.

    • goto github copy of the created micro frontend application.
⚠️ **GitHub.com Fallback** ⚠️