Three-layer structure

.NET API + Auth + Angular

\WWWebApp -- .NET Core 5.0 Web API

Back-end / .NET Core API

  1. Add a model using Scaffold-Dbcontext (database first ET)

Open Package Manager Console:

Scaffold-DbContext "Server=.\SQLEXPRESS2019; User ID=sa; Password=mrpresident12; database=SquibWeb;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables Flexpoint.Customer, Flexpoint.Driver, Flexpoint.Product, Flexpoint.Product_Warehouse, Flexpoint.Warehouse, Flexpoint.RFID, Flexpoint.Contract, Flexpoint.VehicleType, Flexpoint.Vehicle, Flexpoint.Email, Flexpoint.PermitType, Flexpoint.Settings

Models\Customer -- Company Models\Driver Models\Product Models\Product_Warehouse -- Poduct_Warehouse Models\Warehouse Models\RFID Models\Contract Models\VehicleType Models\Vehicle

Models\Email Models\PermitType Models\Settings

Create model from table: Scaffold-DbContext "Server=.\SQLEXPRESS2019; User ID=sa; Password=mrpresident12; database=SquibWeb;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables Flexpoint.BARLEY_PRODUCT_INFO, Flexpoint.CANOLA_PRODUCT_INFO, Flexpoint.WHEAT_PRODUCT_INFO

class SquibWebContext: connect move to class WWWebContext.cs delete class SquibWebContext.cs

  1. Add Base Repository

    Web Server->Controller->Repository->Unit of Work(DbContext)->EF database

    Add: 1. Repository: BaseRepository and UnitOfWork 2. IRepository: IBaseRepository and IUnitOfWork

    Add SampleRepository first, then use refoctory (Ctrl .) to generate ISampleRepository

    public class SampleRepository : BaseRepository<Weighing>, ISampleRepository

    Add AutoMapProfile

     public class AutofacModule: Autofac.Module
 {
 	protected override void Load(ContainerBuilder builder)
 	{
 		var assembly = Assembly.Load("WWWebApp");
 		builder.RegisterAssemblyTypes(assembly)
 			.Where(x => x.Name.EndsWith("Repository") && !x.Name.StartsWith('I') || x.Name.Equals("UnitOfWork"))
 			.AsImplementedInterfaces().PropertiesAutowired();
 	}
 }

    Startup.cs public IServiceProvider ConfigureServices(IServiceCollection services) { builder.RegisterModule(); builder.Populate(services); AutofacContainer = builder.Build(); }

  2. Add Controller

BarleyProductInfo, CanolaProductInfo, WheatProductInfo

New Scaffolded / API / API Controller with read/write actions Add IRepositories

    private readonly IUnitOfWork _unitOfWork;
    private readonly IDisplayWeightRepository _repository;
    private readonly IMapper _mapper;

    public DisplayWeightController(IUnitOfWork unitOfWork, IDisplayWeightRepository repository, IMapper mapper)
    {
        this._unitOfWork = unitOfWork;
        this._repository = repository;
        this._mapper = mapper;
    }

3. Add ViewModel

// Create sampleViewModel


 public class AutoMapProfile : Profile
 {
    //Model to ViewModel
    public AutoMapProfile()
    {
        CreateMap<sampleViewModel, sampleModel>();
        CreateMap<sampleModel, sampleViewModel>();
    }
 }

Startup.cs
    public IServiceProvider ConfigureServices(IServiceCollection services)
    {
	    var mappingConfiguration = new MapperConfiguration(config => config.AddProfile(new AutoMapProfile()));
        IMapper mapper = mappingConfiguration.CreateMapper();
        services.AddSingleton(mapper);	
    }

4. add repository (interface and service)

a. Create DriverRepository.cs in \Repositories\Repository b. Ctrl . Generate a IDriverRepository public interface IDriverRepository : IBaseRepository { } c. move to \IRepository

  • Add mapping in \MapProfileFormapper\AutoMapProfile.cs

    CreateMap<DriverViewModel, Driver>().ReverseMap();

Front-end / Angular

  1. Add (Generate) Service and Model class

    ---- goto .\src\app ----

     ng g s services/[name]      --skip-tests         // add service
 
 
 ng g class models/[name]    --skip-tests         // add a model class
 
 example:
   ng g service auth-interceptor --skiptests     ////  AuthInterceptorService will be created

  2. Add component and module

    ---- goto .\src\app\components ----

     ng g module [name] --routing        // add a module with rounting.modules.ts
 
 ng g c [name]  	                    // add a component  (app.module.ts  check component has added)

 ng g c driver/driver-delete   --skip-tests     // skip generate the test file
 ng g c driver/driver-add-update
 ng g c driver/driver-info   (or under the folder driver: ng g c /driver-info)

  3. Add the Component name into [name].module.ts (app.module.ts, it need to delete component)

    import { MatDialogModule } from '@angular/material/dialog'; //if use it

    declarations: [WeighingComponent]

        imports: [MatDialogModule,]

  4. Add route in the [name]-routing.module.ts

    const routes: Routes = [ { path: '', component: WeighingComponent, data: { title: $localizeWeighing } } ];

  5. Add content in model class

    export class Weighing { Location!: number; Carrier!: string; }

  6. Add [name]Module in the \app\app-routing.module.ts

     path: 'customer',
 loadChildren: () =>
   import('./components/customer/customer.module').then((m) => m.CustomerModule)

 *** components has add in app.module.ts, it need to delete ****
 *** only need add [component]Component in one place

  7. Add url and method in the [name].service.ts

    url = 'http://localhost:5000/api/'; // url = 'https://localhost:5001/api/';

    constructor(private httpClient: HttpClient) { }

    getAllWeighings(): Observable<any[]> { var data = this.httpClient.get<Weighing[]>(this.url + 'displayweight'); // .pipe(map((res: Weighing[]) => res)); return data; }

  8. Add method in the [name].components.ts

    constructor(private weighingService: WeighingService) {

    }

    ngOnInit(): void { this.weighingService.getAllWeighings().subscribe((res:any) => { this.WeighingList = res; }, error => { console.log("retrive weighing list error"); }); }

  9. Add routing in app-routing.module.ts

    { path: 'weighing', loadChildren: () => import('./components/weighing/weighing.module').then((m) => m.WeighingModule) },

  10. add Modul in [name].module.ts if using MatDialog

    Can't bind to 'formGroup' since it isn't a known property of 'form'

    import { MatDialogModule } from '@angular/material/dialog';

    imports: [ MatDialogModule, ReactiveFormsModule, ]

  11. [name].service.ts

    import { environment } from 'src/environments/environment'; import { Inject, Injectable } from '@angular/core';

    rootURL = environment.backEndAPIEndpoint;

  12. add route in \containers_nav.ts

    children: [ { name: 'Customer', url: '/customer', },

  app-routing.module.ts    ---> point to 	 .\components\[name]\[name].module
   
  components\components.module.ts   (or app.modules.ts -- {opertion})   ??????
 
 .\models\
          -> [name].ts
		  
 .\services\
          -> [name].service.ts                   --> server url and get data from server using model

 .\components\[name]\
				  -> [name].module.ts            --> point to [name].component.ts
				  -> [name].component.ts         --> point to [name]Service
				  -> [name].component.html
				  -> [name]-routing.module.ts
 
 .\containers\_nav.ts     Change link

publish: https://www.c-sharpcorner.com/article/easily-deploy-angular-app-to-azure-from-visual-studio-code/

1. ng build

2. VS Code, left Icon, Azure Workloads->Pay-As-You-Go->NWIApps->select Squ
3. Azure -> APP SERVICE -> Squib (mouse right key) ->  Deploy to Web

*** The files in \dist and \dist\assets will be upload to Azure

npm install ngx-toastr --save npm install @angular/animations --save

PreviousDelete column from ArrayNextRemove shadow when print mat-dialog content

Last updated