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