Skip to content

Instantly share code, notes, and snippets.

@dahlsailrunner

dahlsailrunner/README.md

Last active April 28, 2023 08:34
Show Gist options
  • Save dahlsailrunner/b4574db2d17280f573f2d78e372f589b to your computer and use it in GitHub Desktop.
Save dahlsailrunner/b4574db2d17280f573f2d78e372f589b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Erik Dahl revised this gist Apr 13, 2019. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,9 @@ Repos:

    Notes from code are below.

    Slides are here:
    https://github.com/dahlsailrunner/tccc2019-api-starter/blob/master/Tccc2019-EmpowerDevs.pptx


    Demo notes
    <pre>
  2. Erik Dahl revised this gist Apr 13, 2019. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,7 @@ Notes from code are below.


    Demo notes
    <pre>
    ---------------- Sample model --------------------------
    public class Sample
    {
    @@ -74,4 +75,5 @@ ngOnInit() {
    ------ app.component.html -------------------
    <li class="nav-item">
    <a class="nav-link" routerLink="sample">Sample</a>
    </li>
    </li>
    </pre>
  3. Erik Dahl created this gist Apr 13, 2019.
    77 changes: 77 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,77 @@
    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.


    Demo notes
    ---------------- Sample model --------------------------
    public class Sample
    {
    public int Id { get; set; }
    public string Name { get; set; }
    }

    ---------- SampleController ----------------------------
    [HttpGet]
    public List<Models.Sample> Get()
    {
    return new List<Models.Sample>
    {
    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 -------------
    <p>
    sample works!
    </p>

    <div class="badge badge-primary">{{sampleResponse}}</div>
    ------- app-routing.module.ts ---------------
    {
    path: 'sample',
    component: SampleComponent,
    },
    ------ app.component.html -------------------
    <li class="nav-item">
    <a class="nav-link" routerLink="sample">Sample</a>
    </li>