{"id":435,"date":"2019-04-14T03:40:13","date_gmt":"2019-04-13T22:10:13","guid":{"rendered":"http:\/\/uitutorials.in\/wp\/?p=435"},"modified":"2019-09-30T08:04:28","modified_gmt":"2019-09-30T02:34:28","slug":"angular-6-routing-tutorial","status":"publish","type":"post","link":"https:\/\/uitutorials.in\/wp\/angular-6-routing-tutorial\/","title":{"rendered":"Angular 6 routing tutorial"},"content":{"rendered":"

Why a separate routing module<\/h3>\n

1.Separation of Concerns<\/p>\n

2.Maintainability<\/p>\n

\r\nng g c employee\/create-employee --skipTests=false --flat=true\r\n\r\nng g c employee\/list-employees --skipTests=false --flat=true\r\n\r\nng g m app-routing --flat=true --module=app\r\n<\/code><\/pre>\n
    \n
  1. \n
    create routing module<\/p>\n<\/li>\n
  2. \n
    add routing module into app.module<\/p>\n<\/li>\n
  3. \n
    Import routerModule, Routes into app-routing.module<\/p>\n<\/li>\n
  4. \n
    create routes in app-routing.module<\/p>\n
    \r\nconst appRoutes: Routes = [\r\n{path: 'list', component: },\r\n{path: 'create', component: },\r\n{path: '', redirectTo: '\/list', pathMatch: 'full'}\r\n]\r\n<\/code><\/pre>\n<\/li>\n
  5. \n
    Add navigation menu in root component(app.component.html)<\/p>\n<\/li>\n
  6. \n
    Used three directives routerLinkActive, routerLink, router-outlet<\/p>\n<\/li>\n
  7. \n
    routerLink asociated directive will be loaded into “router-outlet”<\/p>\n<\/li>\n
  8. \n
    If you get ‘router-outlet’ is not a known element, add the “exports: [RouterModule]” into app-routing.module. Make it avilable the RouterModule into root module<\/p>\n<\/li>\n<\/ol>\n
    Sample Download – Branch angularroute<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    Why a separate routing module 1.Separation of Concerns 2.Maintainability ng g c employee\/create-employee –skipTests=false –flat=true ng g c employee\/list-employees –skipTests=false –flat=true ng g m app-routing –flat=true –module=app create routing module add routing module into app.module Import routerModule, Routes into app-routing.module create routes in app-routing.module const appRoutes: Routes = [ {path:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[66],"class_list":["post-435","post","type-post","status-publish","format-standard","hentry","category-angular","tag-angular-routing","ct-col-2"],"_links":{"self":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":3,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/435\/revisions"}],"predecessor-version":[{"id":438,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/435\/revisions\/438"}],"wp:attachment":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/media?parent=435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/categories?post=435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/tags?post=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}