Repos:
- https://github.com/dahlsailrunner/tccc2019-api-starter
- https://github.com/dahlsailrunner/tccc2019-angular-starter
- https://github.com/dahlsailrunner/tccc2019-api-booster
- https://knowyourtoolset.visualstudio.com/TCCC-2019
Notes from code are below.
Slides are here: https://github.com/dahlsailrunner/tccc2019-api-starter/blob/master/Tccc2019-EmpowerDevs.pptx
Demo notes
---------------- Sample model -------------------------- public class Sample { public int Id { get; set; } public string Name { get; set; } } ---------- SampleController ---------------------------- [HttpGet] public List Get() { return new List { new Models.Sample {Id = 1, Name = "Erik"}, new Models.Sample {Id = 2, Name = "Dahl"}, }; } --------------------------------------------------- -- Angular ---------------------------------------- ng g c sample ng g s sample/sample -f ---------- sample.service.ts ------------ apiRoot = environment.backendApiRoot; constructor(private http: HttpClient) { } public getSamples(): any { let apiUrl = `${this.apiRoot}/sample`; return this.http.get(apiUrl); } ---------- sample.component.ts ------------ sampleResponse: string; constructor(private pageSvc: NewPageService, private alertSvc: AlertService, private smplApi: SampleService) { } ngOnInit() { this.pageSvc.setNewPage("Sample Page - Here We Are!"); this.alertSvc.createAlert({ alertClass :"alert-info", alertMessage: "Wowzers!", alertLink :"", alertLinkText : "" }) this.smplApi.getSamples().subscribe((results) => { this.sampleResponse = JSON.stringify(results); }); } -------- sample.component.html -------------sample works!
{{sampleResponse}}------- app-routing.module.ts --------------- { path: 'sample', component: SampleComponent, }, ------ app.component.html -------------------