Meet & Git Slides

NgNigeria slides by Kes

Transcript

1. NG2 - MEETUP Workshop II
2. The Meet & Git App
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.
4. OUR STRUCTURE Home Search Profile
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 <router-outlet> is configured in the host template
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
7. THAT’S IT ➤ THANK YOU