filmov
tv
#10.13 - Route Parameter Example - Routing - Angular Series
Показать описание
In this video a full fledged example is done to display a list of employees and navigate to edit employee page based on a selected employee. This is implemented using Route Parameter feature in Angular.
===
===
export interface Employee {
id: number,
name: string,
salary: number,
gender: string
}
export const employees: Employee[] = [
{ id: 1, name: "John", salary: 4000, gender: "M"},
{ id: 2, name: "Smith", salary: 10000, gender: "M"},
{ id: 3, name: "Sophia", salary: 5000, gender: "F"},
{ id: 4, name: "Emma", salary: 9000, gender: "F"},
{ id: 5, name: "James", salary: 2000, gender: "M"}
];
===
Component Creation Commands
===
ng g c employee-list --skip-tests=true
ng g c edit-employee --skip-tests=true
Chapters
==
1. 00:00 - Router Parameter Example Walkthrough
2. 02:04 - Define Employee Data
3. 04:01 - Create Components
4. 04:55 - Define Routes and Links
5. 06:24 - Employee data in component
6. 07:05 - Employee List 'name' display
7. 08:37 - Employee List 'salary' display
8. 09:32 - Employee List 'gender' display
9. 10:13 - Employee List 'Edit' link
10. 11:54 - routerLink with parameter
11. 13:59 - Edit Employee 'name' field
12. 15:08 - Edit Employee 'salary' field
13. 15:35 - Edit Employee 'name' field
14. 16:18 - Edit Employee 'gender' field
15. 17:24 - Edit Employee Submit button and link
16. 18:42 - Sample employee data
17. 22:04 - Get route parameter value
18. 26:24 - Find employee and assign in component
19. 33:09 - Route Parameter Summary
===
===
export interface Employee {
id: number,
name: string,
salary: number,
gender: string
}
export const employees: Employee[] = [
{ id: 1, name: "John", salary: 4000, gender: "M"},
{ id: 2, name: "Smith", salary: 10000, gender: "M"},
{ id: 3, name: "Sophia", salary: 5000, gender: "F"},
{ id: 4, name: "Emma", salary: 9000, gender: "F"},
{ id: 5, name: "James", salary: 2000, gender: "M"}
];
===
Component Creation Commands
===
ng g c employee-list --skip-tests=true
ng g c edit-employee --skip-tests=true
Chapters
==
1. 00:00 - Router Parameter Example Walkthrough
2. 02:04 - Define Employee Data
3. 04:01 - Create Components
4. 04:55 - Define Routes and Links
5. 06:24 - Employee data in component
6. 07:05 - Employee List 'name' display
7. 08:37 - Employee List 'salary' display
8. 09:32 - Employee List 'gender' display
9. 10:13 - Employee List 'Edit' link
10. 11:54 - routerLink with parameter
11. 13:59 - Edit Employee 'name' field
12. 15:08 - Edit Employee 'salary' field
13. 15:35 - Edit Employee 'name' field
14. 16:18 - Edit Employee 'gender' field
15. 17:24 - Edit Employee Submit button and link
16. 18:42 - Sample employee data
17. 22:04 - Get route parameter value
18. 26:24 - Find employee and assign in component
19. 33:09 - Route Parameter Summary
Комментарии