CODEWITHSUNDEEP
angularangular2-routing
Jihun No
Jihun No

Reputation: 1221

Sub url delegation Angular2 Router3.0.0

AS I am not familiar with FE dev, Angular's URL processing is not easy. So I want to ask you several point.

I have a site, sitemap like,

-----------------------------------------------------
/ <-- main page
        /company/{companyId} <-- main page redirected to.
-----------------------------------------------------
                            /employee/{empId}/profile 
                            /employee/{empId}/worklog
-----------------------------------------------------
                            /dept/{deptId}/empList
                            /dept/{deptId}/issueList
-----------------------------------------------------

one url may looks like
/company/{facebook}/employee/{james}/profile

I imagine four RouterConfigs.

(line numbers are not a actuall value, but for question describe..)

// main.ts
01 export const MainRoutes: RouterConfig = [
02  { path: '', redirectTo:'company/facebook' component: CompanyComponent},
03  { path: 'company/:companyId', component: CompanyComponent}
04 ];

// company.ts
05 export const CompanyRoutes: RouterConfig = [
06   { path: 'employee/:empId', component: EmployeeComponent},
07   { path: 'dept/:deptId', component: DeptComponent}
08 ];

// employee.ts
09 export const EmployeeRoutes: RouterConfig = [
10   { path: 'profile', component: EmployeeProfile},
11   { path: 'worklog', component: EmployeeWorklog}
12 ];

// dept.ts
13 export const DeptRoutes: RouterConfig = [
14   { path: 'empList', component: EmpListComponent},
15   { path: 'issueList', component: IssueListComponent}
16 ];

my questions

  1. which one is right?
// employee.ts (path from parent)
09 export const EmployeeRoutes: RouterConfig = [
10   { path: 'profile', component: EmployeeProfile},
11   { path: 'worklog', component: EmployeeWorklog}
12 ];

// employee.ts (path from home)
09 export const EmployeeRoutes: RouterConfig = [
10   { path: 'company/:companyId/employee:empId/profile', component: EmployeeProfile},
11   { path: 'company/:companyId/employee:empId/worklog', component: EmployeeWorklog}
12 ];

  1. Any way let indivisual Routes register themselves? like spring 'http://www.journaldev.com/3358/spring-requestmapping-requestparam-pathvariable-example'

  2. Do I have to call 'provideRouter()' in single place with all of Routes like this?

    http://plnkr.co/edit/?p=preview

    import { provideRouter, RouterConfig }  from '@angular/router';

import { CrisisCenterRoutes } from './crisis-center/crisis-center.routes';
import { HeroesRoutes }       from './heroes/heroes.routes';

import { LoginRoutes,
         AUTH_PROVIDERS }     from './login.routes';

import { CanDeactivateGuard } from './interfaces';

export const routes: RouterConfig = [
  ...HeroesRoutes,
  ...LoginRoutes,
  ...CrisisCenterRoutes
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes),
  AUTH_PROVIDERS,
  CanDeactivateGuard
];

  3. Sub url components have to remember the Upper components' parameters?

I know this question is too.... not specified. but I am fall in a confusing totally.

Regards. Jihun.

Upvotes: 1

Views: 89

Answers (1)

Arpit Agarwal
Arpit Agarwal

Reputation: 4013

  1. I will prefer the first way of declaring routes as it is more manageable
  2. AFAIK not possible with new router
  3. Yes, all routes has to be specified here although they can be nested child routes.
  4. I didn't understand but if you want to access param supplied on parent. You can do that via accessing parent of activated route.

Upvotes: 1

Related Questions