{"id":3489,"date":"2021-10-01T10:45:06","date_gmt":"2021-10-01T10:45:06","guid":{"rendered":"https:\/\/www.liainfraservices.com\/blog\/?p=3489"},"modified":"2022-07-13T05:49:03","modified_gmt":"2022-07-13T05:49:03","slug":"angular-router-and-its-essential-concepts","status":"publish","type":"post","link":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/","title":{"rendered":"Angular Router And Its Essential Concepts"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span><div class='epvc-post-count'><span class='epvc-eye'><\/span>  <span class=\"epvc-count\"> 3,340<\/span><\/div>\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lia Infraservices the professional <strong><a href=\"https:\/\/www.liainfraservices.com\/web-app-development-company-in-chennai\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-vivid-cyan-blue-color\">Web App Development Company in Chennai<\/span><\/a><\/strong> presents you with the <strong>Angular Router and its Essential Concepts<\/strong>. To start with, <span class=\"has-inline-color has-black-color\">Angular Router <\/span>is a powerful JavaScript router built and maintained by the Angular core team that can be installed from the <a href=\"https:\/\/angular.io\/api\/router\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-vivid-cyan-blue-color\">@angular\/router package<\/span><\/a>. It provides a complete routing library with the possibility to have multiple router outlets, different path matching strategies, easy access to route parameters, and route guards to protect components from unauthorized access. It is an important part of the<strong> <a href=\"https:\/\/www.liainfraservices.com\/web-app-development-company-in-chennai\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-vivid-cyan-blue-color\">web app development <\/span><\/a><\/strong>paradigm.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Angular router is a core part of the Angular platform in<strong><a href=\"https:\/\/www.liainfraservices.com\/web-app-development-company-in-chennai\" target=\"_blank\" rel=\"noreferrer noopener\"> <span class=\"has-inline-color has-vivid-cyan-blue-color\">web app development.<\/span><\/a><\/strong> It enables developers to build Single Page Applications with multiple views and allow navigation between these views.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s now see the essential Router concepts in detail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>THE ROUTER-OUTLET<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The<span class=\"has-inline-color has-black-color\"> Router-Outlet<\/span> is a directive that\u2019s available from the router library where the Router inserts the component that gets matched based on the current browser\u2019s URL. You can add multiple outlets in your Angular application which enables you to implement advanced routing scenarios.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Any component that gets matched by the Router will render it as a sibling of the Router outlet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>ROUTES AND PATHS<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Routes are definitions (objects) comprised of at least a path and a component (or a<strong> <\/strong>redirect<strong> <\/strong>path) attributes. The path refers to the part of the URL that determines a unique view that should be displayed, and the component refers to the Angular component that needs to be associated with a path. Based on a route definition that we provide (via a static RouterModule.forRoot(routes) method), the Router is able to navigate the user to a specific view.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each <strong><span class=\"has-inline-color has-black-color\">Route<\/span><\/strong> maps a URL path to a component.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The path can be empty which denotes the default path of an application and it\u2019s usually the start of the application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The path can take a wildcard string (**). The router will select this route if the requested URL doesn\u2019t match any paths for the defined routes. This can be used for displaying a \u201cNot Found\u201d view or redirecting to a specific view if no match is found.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">This is an example of a route:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">{ path:&nbsp; \u2018home\u2019, component:&nbsp; HomePageComponent}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If this route definition is provided to the Router configuration, the router will render HomePageComponent when the browser URL for the web application becomes \/home.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>ROUTE MATCHING STRATEGIES<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Angular Router provides different route matching strategies. The default strategy is simply checking if the current browser\u2019s URL is prefixed with the <em>path<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example our previous route:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">{ path:&nbsp; \u2018home\u2019, component:&nbsp; HomePageComponent}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Could be also written as:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">{ path:&nbsp; \u2018home\u2019,pathMatch: &#8216;prefix&#8217;, component:&nbsp; ContactListComponent}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The patchMath attribute specifies the matching strategy. In this case, it&#8217;s the prefix that is the default.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The second \u200amatching strategy is full. When it\u2019s specified for a route, the router will check if the path is exactly equal to the path of the current browser\u2019s URL:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">{ path:&nbsp; \u2018home\u2019,pathMatch: &#8216;full&#8217;, component:&nbsp; HomePageComponent}<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>ROUTE PARAMS<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Creating routes with parameters is a common feature in web apps. Angular Router allows you to access parameters in different ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Using the<span class=\"has-inline-color has-black-color\"> ActivatedRoute<\/span> service,<\/li><li>Using the<span class=\"has-inline-color has-black-color\"> ParamMap<\/span> observable available starting with v4.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can create a route parameter using the colon syntax. This is an example route with an <em>id<\/em> parameter:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">{ path:&nbsp; &#8216;home\/:id&#8217;, component:&nbsp; HomeDetailComponent}<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>ROUTE GUARDS<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A route guard is a feature of the Angular Router that allows developers to run some logic when a route is requested, and based on that logic, it allows or denies the user access to the route. It\u2019s commonly used to check if a user is logged in and has the authorization before he can access a page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can add a route guard by implementing the <span class=\"has-inline-color has-black-color\">CanActivate<\/span> interface available from the @angular\/router package and extending the canActivate() method which holds the logic to allow or deny access to the route. For example, the following guard will always allow access to a route:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">class MyGuard implements CanActivate {<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;canActivate() {<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;return true;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can then protect a route with the guard using the canActivate attribute:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">{ path:&nbsp; &#8216;home\/:id, canActivate:[MyGuard], component:&nbsp; HomeDetailComponent}<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>NAVIGATION DIRECTIVE<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Angular Router provides the router link directive to create navigation links. This directive takes the path associated with the component to navigate to. For example:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;a [routerLink]=&#8221;&#8216;\/Home'&#8221;&gt;Home Page&lt;\/a&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>MULTIPLE OUTLETS AND AUXILIARY ROUTES<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Angular Router supports multiple outlets in the same application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A component has one associated primary route and can have auxiliary routes. Auxiliary routes enable developers to navigate multiple routes at the same time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To create an auxiliary route, you\u2019ll need a named router outlet where the component associated with the auxiliary route will be displayed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;router-outlet&gt;&lt;\/router-outlet&gt;&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;router-outlet&nbsp; name=&#8221;outlet1&#8243;&gt;&lt;\/router-outlet&gt;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The outlet with no name is the primary outlet.<\/li><li>All outlets should have a name except for the primary outlet.<\/li><li>You can then specify the outlet where you want to render your component using the outlet attribute<\/li><li>{ path: &#8220;home&#8221;, component: HomeComponent, outlet: &#8220;outlet1&#8221; }<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Conclusion&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The angular router is mostly used for creating dashboards, for front-end <strong>web app developments<\/strong>. It can be a perfect choice for any kind of web application due to its stylish design and responsive layout.<strong><span class=\"has-inline-color has-vivid-cyan-blue-color\"> <\/span><\/strong><a href=\"https:\/\/www.liainfraservices.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-vivid-cyan-blue-color\"><strong>Lia Infraservices<\/strong><\/span><\/a> the <strong><a href=\"https:\/\/www.liainfraservices.com\/web-app-development-company-in-chennai\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-vivid-cyan-blue-color\">best web app development company in Chennai<\/span><\/a><span class=\"has-inline-color has-vivid-cyan-blue-color\"><a href=\"https:\/\/www.liainfraservices.com\/web-app-development-company-in-chennai\" target=\"_blank\" rel=\"noreferrer noopener\"> <\/a><\/span><\/strong>uses angular routers which allows us to access parameters in different ways. To know more about <a href=\"https:\/\/www.liainfraservices.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-vivid-cyan-blue-color\"><strong>Lia infraservices<\/strong><\/span><\/a> the best web and<span class=\"has-inline-color has-black-color\"><a href=\"https:\/\/www.liainfraservices.com\/mobile-app-development-company-in-chennai\" target=\"_blank\" rel=\"noreferrer noopener\"> <\/a><\/span><a href=\"https:\/\/www.liainfraservices.com\/mobile-app-development-company-in-chennai\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-vivid-cyan-blue-color\"><strong>mobile app development company in Chennai<\/strong><\/span><\/a> visit our website.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a class=\"https:\/\/www.liainfraservices.com\/web-app-development-company-in-chennai\" href=\"https:\/\/www.liainfraservices.com\/web-app-development-company-in-chennai\" target=\"_blank\" rel=\"https:\/\/www.liainfraservices.com\/web-app-development-company-in-chennai noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"91\" src=\"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/02\/For-the-Web-Development-Company-1.jpg\" alt=\"Web App Development Company in Chennai - Lia Infraservices\" class=\"wp-image-2577\" srcset=\"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/02\/For-the-Web-Development-Company-1.jpg 729w, https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/02\/For-the-Web-Development-Company-1-300x37.jpg 300w\" sizes=\"auto, (max-width: 729px) 100vw, 729px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Hope you like this blog &#8220;Angular Router And Its Essential Concepts&#8221;. I wish you to check out few other blogs suggested below that you may find interesting.  <\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/www.liainfraservices.com\/blog\/why-choose-mean-stack-development-for-mobile-web-application\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-vivid-cyan-blue-color\">Why choose MEAN Stack Development for Mobile &amp; Web Application?<\/span><\/a><span class=\"has-inline-color has-vivid-cyan-blue-color\"><br><\/span><a href=\"https:\/\/www.liainfraservices.com\/blog\/how-to-build-a-web-application-like-an-enterprise-based-application\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-vivid-cyan-blue-color\">How to build a Web application like an Enterprise based Application?<\/span><\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks for reading our blog. Please feel free to leave your comment below. <\/p>\n\n\n<div class=\"taxonomy-post_tag wp-block-post-terms has-medium-font-size\"><a href=\"https:\/\/www.liainfraservices.com\/blog\/tag\/android-app-development-company-in-chennai\/\" rel=\"tag\">android app development company in chennai<\/a><span class=\"wp-block-post-terms__separator\">|<\/span><a href=\"https:\/\/www.liainfraservices.com\/blog\/tag\/android-app-development-in-saudi-arabia\/\" rel=\"tag\">android app development in saudi arabia<\/a><span class=\"wp-block-post-terms__separator\">|<\/span><a href=\"https:\/\/www.liainfraservices.com\/blog\/tag\/angular-platform\/\" rel=\"tag\">angular platform<\/a><span class=\"wp-block-post-terms__separator\">|<\/span><a href=\"https:\/\/www.liainfraservices.com\/blog\/tag\/front-end-devlopment\/\" rel=\"tag\">front end devlopment<\/a><span class=\"wp-block-post-terms__separator\">|<\/span><a href=\"https:\/\/www.liainfraservices.com\/blog\/tag\/ios-app-development-company-in-chennai\/\" rel=\"tag\">ios app development company in chennai<\/a><span class=\"wp-block-post-terms__separator\">|<\/span><a href=\"https:\/\/www.liainfraservices.com\/blog\/tag\/ios-app-development-in-saudi-arabia\/\" rel=\"tag\">iOS App Development in Saudi Arabia<\/a><span class=\"wp-block-post-terms__separator\">|<\/span><a href=\"https:\/\/www.liainfraservices.com\/blog\/tag\/mobile-app-development-company-in-chennai\/\" rel=\"tag\">mobile app development company in chennai<\/a><span class=\"wp-block-post-terms__separator\">|<\/span><a href=\"https:\/\/www.liainfraservices.com\/blog\/tag\/mobile-app-development-in-saudi-arabia\/\" rel=\"tag\">Mobile App Development in Saudi Arabia<\/a><span class=\"wp-block-post-terms__separator\">|<\/span><a href=\"https:\/\/www.liainfraservices.com\/blog\/tag\/web-application-development\/\" rel=\"tag\">Web Application Development<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>3,340 Lia Infraservices the professional Web App Development Company in Chennai presents you with the Angular Router and its Essential Concepts. To start with, Angular Router is a powerful JavaScript<\/p>\n","protected":false},"author":1,"featured_media":3490,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"footnotes":""},"categories":[236],"tags":[886,944,787,791,887,943,826,941,210],"class_list":["post-3489","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-application","tag-android-app-development-company-in-chennai","tag-android-app-development-in-saudi-arabia","tag-angular-platform","tag-front-end-devlopment","tag-ios-app-development-company-in-chennai","tag-ios-app-development-in-saudi-arabia","tag-mobile-app-development-company-in-chennai","tag-mobile-app-development-in-saudi-arabia","tag-web-application-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular Router And Its Essential Concepts - Blog | Liainfraservices<\/title>\n<meta name=\"description\" content=\"Angular Router And Its Essential Concepts- Lia Infraservices the best web app development company in Chennai uses angular routers which allows us to access parameters in different ways.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Router And Its Essential Concepts - Blog | Liainfraservices\" \/>\n<meta property=\"og:description\" content=\"Angular Router And Its Essential Concepts- Lia Infraservices the best web app development company in Chennai uses angular routers which allows us to access parameters in different ways.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | Liainfraservices\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-01T10:45:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-13T05:49:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/10\/Angular-Router-And-Its-Essential-Concepts..jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"315\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Partho\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Partho\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/\"},\"author\":{\"name\":\"Partho\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#\\\/schema\\\/person\\\/b5a729cb152dd3bc7f07550ca9d223e4\"},\"headline\":\"Angular Router And Its Essential Concepts\",\"datePublished\":\"2021-10-01T10:45:06+00:00\",\"dateModified\":\"2022-07-13T05:49:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/\"},\"wordCount\":1021,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/Angular-Router-And-Its-Essential-Concepts..jpg\",\"keywords\":[\"android app development company in chennai\",\"android app development in saudi arabia\",\"angular platform\",\"front end devlopment\",\"ios app development company in chennai\",\"iOS App Development in Saudi Arabia\",\"mobile app development company in chennai\",\"Mobile App Development in Saudi Arabia\",\"Web Application Development\"],\"articleSection\":[\"Web Application\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/\",\"url\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/\",\"name\":\"Angular Router And Its Essential Concepts - Blog | Liainfraservices\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/Angular-Router-And-Its-Essential-Concepts..jpg\",\"datePublished\":\"2021-10-01T10:45:06+00:00\",\"dateModified\":\"2022-07-13T05:49:03+00:00\",\"description\":\"Angular Router And Its Essential Concepts- Lia Infraservices the best web app development company in Chennai uses angular routers which allows us to access parameters in different ways.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/Angular-Router-And-Its-Essential-Concepts..jpg\",\"contentUrl\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/Angular-Router-And-Its-Essential-Concepts..jpg\",\"width\":512,\"height\":315,\"caption\":\"Angular Router And Its Essential Concepts\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/angular-router-and-its-essential-concepts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Application\",\"item\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/category\\\/web-application\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular Router And Its Essential Concepts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/\",\"name\":\"Blog | Liainfraservices\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#organization\",\"name\":\"Blog | Liainfraservices\",\"url\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/lia-logo-b-e1635340384244.png\",\"contentUrl\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/lia-logo-b-e1635340384244.png\",\"width\":308,\"height\":96,\"caption\":\"Blog | Liainfraservices\"},\"image\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#\\\/schema\\\/person\\\/b5a729cb152dd3bc7f07550ca9d223e4\",\"name\":\"Partho\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6c5fc8918cc5dbc844eccbeaaf854eef27d2c79ab17ff0022304f712805d6959?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6c5fc8918cc5dbc844eccbeaaf854eef27d2c79ab17ff0022304f712805d6959?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6c5fc8918cc5dbc844eccbeaaf854eef27d2c79ab17ff0022304f712805d6959?s=96&d=mm&r=g\",\"caption\":\"Partho\"},\"description\":\"Partho Das, founder of Lia Infraservices, has 15+ years of expertise in cloud solutions, DevOps, and infrastructure security. He provides consultation on architecture planning, DevOps setup, Kubernetes, and cloud migrations. Partho holds multiple AWS and Azure certifications, along with CISCO CCNA &amp; CCNP. Connect on LinkedIn\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/partho-dev\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Router And Its Essential Concepts - Blog | Liainfraservices","description":"Angular Router And Its Essential Concepts- Lia Infraservices the best web app development company in Chennai uses angular routers which allows us to access parameters in different ways.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/","og_locale":"en_US","og_type":"article","og_title":"Angular Router And Its Essential Concepts - Blog | Liainfraservices","og_description":"Angular Router And Its Essential Concepts- Lia Infraservices the best web app development company in Chennai uses angular routers which allows us to access parameters in different ways.","og_url":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/","og_site_name":"Blog | Liainfraservices","article_published_time":"2021-10-01T10:45:06+00:00","article_modified_time":"2022-07-13T05:49:03+00:00","og_image":[{"width":512,"height":315,"url":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/10\/Angular-Router-And-Its-Essential-Concepts..jpg","type":"image\/jpeg"}],"author":"Partho","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Partho","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/#article","isPartOf":{"@id":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/"},"author":{"name":"Partho","@id":"https:\/\/www.liainfraservices.com\/blog\/#\/schema\/person\/b5a729cb152dd3bc7f07550ca9d223e4"},"headline":"Angular Router And Its Essential Concepts","datePublished":"2021-10-01T10:45:06+00:00","dateModified":"2022-07-13T05:49:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/"},"wordCount":1021,"commentCount":0,"publisher":{"@id":"https:\/\/www.liainfraservices.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/10\/Angular-Router-And-Its-Essential-Concepts..jpg","keywords":["android app development company in chennai","android app development in saudi arabia","angular platform","front end devlopment","ios app development company in chennai","iOS App Development in Saudi Arabia","mobile app development company in chennai","Mobile App Development in Saudi Arabia","Web Application Development"],"articleSection":["Web Application"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/","url":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/","name":"Angular Router And Its Essential Concepts - Blog | Liainfraservices","isPartOf":{"@id":"https:\/\/www.liainfraservices.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/#primaryimage"},"image":{"@id":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/10\/Angular-Router-And-Its-Essential-Concepts..jpg","datePublished":"2021-10-01T10:45:06+00:00","dateModified":"2022-07-13T05:49:03+00:00","description":"Angular Router And Its Essential Concepts- Lia Infraservices the best web app development company in Chennai uses angular routers which allows us to access parameters in different ways.","breadcrumb":{"@id":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/#primaryimage","url":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/10\/Angular-Router-And-Its-Essential-Concepts..jpg","contentUrl":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/10\/Angular-Router-And-Its-Essential-Concepts..jpg","width":512,"height":315,"caption":"Angular Router And Its Essential Concepts"},{"@type":"BreadcrumbList","@id":"https:\/\/www.liainfraservices.com\/blog\/angular-router-and-its-essential-concepts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.liainfraservices.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Application","item":"https:\/\/www.liainfraservices.com\/blog\/category\/web-application\/"},{"@type":"ListItem","position":3,"name":"Angular Router And Its Essential Concepts"}]},{"@type":"WebSite","@id":"https:\/\/www.liainfraservices.com\/blog\/#website","url":"https:\/\/www.liainfraservices.com\/blog\/","name":"Blog | Liainfraservices","description":"","publisher":{"@id":"https:\/\/www.liainfraservices.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.liainfraservices.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.liainfraservices.com\/blog\/#organization","name":"Blog | Liainfraservices","url":"https:\/\/www.liainfraservices.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.liainfraservices.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/10\/lia-logo-b-e1635340384244.png","contentUrl":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/10\/lia-logo-b-e1635340384244.png","width":308,"height":96,"caption":"Blog | Liainfraservices"},"image":{"@id":"https:\/\/www.liainfraservices.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.liainfraservices.com\/blog\/#\/schema\/person\/b5a729cb152dd3bc7f07550ca9d223e4","name":"Partho","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/6c5fc8918cc5dbc844eccbeaaf854eef27d2c79ab17ff0022304f712805d6959?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6c5fc8918cc5dbc844eccbeaaf854eef27d2c79ab17ff0022304f712805d6959?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6c5fc8918cc5dbc844eccbeaaf854eef27d2c79ab17ff0022304f712805d6959?s=96&d=mm&r=g","caption":"Partho"},"description":"Partho Das, founder of Lia Infraservices, has 15+ years of expertise in cloud solutions, DevOps, and infrastructure security. He provides consultation on architecture planning, DevOps setup, Kubernetes, and cloud migrations. Partho holds multiple AWS and Azure certifications, along with CISCO CCNA &amp; CCNP. Connect on LinkedIn","sameAs":["https:\/\/www.linkedin.com\/in\/partho-dev\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/posts\/3489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/comments?post=3489"}],"version-history":[{"count":21,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/posts\/3489\/revisions"}],"predecessor-version":[{"id":4998,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/posts\/3489\/revisions\/4998"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/media\/3490"}],"wp:attachment":[{"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/media?parent=3489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/categories?post=3489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/tags?post=3489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}