Meet & Git Slides

NgNigeria slides by Kes

Transcript

1. NG2 - MEETUP
   Workshop II
   

   View Slide

2. The Meet & Git App
   

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

4. OUR STRUCTURE
   Home Search Profile
   

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

7. THAT’S IT
   ➤ THANK YOU
   

   View Slide