Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meet & Git Slides

Meet & Git Slides

NgNigeria slides by Kes

Christian Nwamba

March 20, 2017
Tweet

More Decks by Christian Nwamba

Other Decks in Programming

Transcript

  1. NG2 - MEETUP
    Workshop II

    View full-size slide

  2. The Meet & Git App

    View full-size slide

  3. OUR GOAL
    ➤ We are going to create a simple 3 page application
    ➤ that shows users highly ranked “code ninjas” in different
    ➤ languages and different locations.

    View full-size slide

  4. OUR STRUCTURE
    Home Search Profile

    View full-size slide

  5. LET’S GET OUR FEET WET
    1. Instantiate new app => ng new {app-name}
    i. Sections of NgModule
    1. imports -> different from TS/JS imports
    2. declarations
    3. providers
    2. Create top level pages:
    1. ng g component …
    3. Create page routes -> {talk about child routes}
    1. import Router module and call forRoot method
    2. define paths without leading/trailing slash

    3. empty path is default

    4. you can redirect within path definition, pathMatch is necessary

    5. multiple route params

    6. The order of the routes in the configuration matters and this is by design. The router uses a first-
    match wins strategy when matching routes, so more specific routes should be placed above less
    specific routes

    7. for routerLink “route” would resolve to a child route and “/route” resolves to base

    8. routerLinkActive lets you supply css class to style with

    9. child routes won’t work unless is configured in the host template

    View full-size slide

  6. CONTINUE
    4. Setup home with button to navigate to search and then style
    5. Create Git service -> setup baseurl in environment
    6. Return result to the select template and style a little
    7. Add inputs to make data dynamic
    8. Demonstrate [(ngModel)] and console log both location and language
    9. Add getters and settlers for activeUser
    10. Dump user details in profile component and navigate there
    11.Refactor route to have as top level route

    View full-size slide

  7. THAT’S IT
    ➤ THANK YOU

    View full-size slide