Three-layer structure
.NET API + Auth + Angular
\WWWebApp -- .NET Core 5.0 Web API
Back-end / .NET Core API
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
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(); }
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
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
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)
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,]
Add route in the [name]-routing.module.ts
const routes: Routes = [ { path: '', component: WeighingComponent, data: { title: $localize
Weighing
} } ];Add content in model class
export class Weighing { Location!: number; Carrier!: string; }
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
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; }
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"); }); }
Add routing in app-routing.module.ts
{ path: 'weighing', loadChildren: () => import('./components/weighing/weighing.module').then((m) => m.WeighingModule) },
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, ]
[name].service.ts
import { environment } from 'src/environments/environment'; import { Inject, Injectable } from '@angular/core';
rootURL = environment.backEndAPIEndpoint;
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
Last updated
Was this helpful?