{"id":91962,"date":"2019-05-22T07:00:53","date_gmt":"2019-05-22T04:00:53","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=91962"},"modified":"2019-05-20T15:11:32","modified_gmt":"2019-05-20T12:11:32","slug":"angular-route-guards-example","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html","title":{"rendered":"Angular Route Guards Example"},"content":{"rendered":"<p>Welcome readers, in this tutorial, we will implement the <strong>Route Guards<\/strong> in an angular application.<\/p>\n<h2>1. Introduction<\/h2>\n<ul>\n<li><strong>Angular<\/strong> is a Typescript-based open-source framework that helps developers build single page applications<\/li>\n<li>Offers Object-oriented features and supports the dynamic loading of the pages<\/li>\n<li>Supports Two-way data-binding, Property (<code>[]<\/code>), and Event (<code>()<\/code>) binding techniques<\/li>\n<li>Supports command-line-interface to easily initiate and manage the angular projects from the command line<\/li>\n<\/ul>\n<h3>1.1 Routing in Angular<\/h3>\n<p><strong>Routing<\/strong> in angular is an essential part of the angular framework contained in the <code>@angular\/router<\/code> package. It,<\/p>\n<ul>\n<li>Helps developers build single page applications with multiple states and views using routes and components<\/li>\n<li>Allows client-side navigation and routing between various components<\/li>\n<li>Allows lazy loading of modules<\/li>\n<li>Add router guards for client-side protection and allow or disallow access to the components or modules<\/li>\n<li>Various path matching strategies (i.e. <em>prefix<\/em> and <em>full<\/em>) to tell the router how to match a specific path to a component<\/li>\n<li>Easy access to route and query parameters<\/li>\n<\/ul>\n<h4>1.1.1 Route Guards in Angular<\/h4>\n<p><strong>Route Guarding<\/strong> in angular is a mechanism of protecting a route. Angular provides the following set of guards and their purpose.<\/p>\n<ul>\n<li>CanActivate: Provides guard navigation to a route<\/li>\n<li>CanDeactivate: Provides guard navigation away from the current route<\/li>\n<li>CanActivateChild: Provides guard navigation to a child route<\/li>\n<li>Resolve: Perform route data retrieval before the route activation<\/li>\n<li>CanLoad: Provides guard navigation to an asynchronously loaded feature module<\/li>\n<\/ul>\n<p>Now open the visual studio code and let us see how to implement this tutorial in angular 6 frameworks.<\/p>\n<h2>2. Angular Route Guards Example<\/h2>\n<p>Here is a systematic guide for implementing this tutorial.<\/p>\n<h3>2.1 Tools Used<\/h3>\n<p>We are using Visual Studio Code and Node Terminal to compile and execute the angular code on a browser.<\/p>\n<h3>2.2 Project Structure<\/h3>\n<p>In case you are confused about where you should create the corresponding files or folder, let us review the project structure of the angular application.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"419\" height=\"464\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/angular-route-guards-tutorial-project-structure-guide-img1.jpg\" alt=\"Angular Route Guards - Application Structure\" class=\"wp-image-91963\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/angular-route-guards-tutorial-project-structure-guide-img1.jpg 419w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/angular-route-guards-tutorial-project-structure-guide-img1-271x300.jpg 271w\" sizes=\"(max-width: 419px) 100vw, 419px\" \/><figcaption>Fig. 1: Application Structure<\/figcaption><\/figure>\n<\/div>\n<h2>3. Creating Angular application<\/h2>\n<p>Run the <code>ng new angular-route-guard-tutorial<\/code> command in the npm console to create a new angular project. Once the new project is created, following the below steps.<\/p>\n<h3>3.1 Creating a Routing module<\/h3>\n<p>Run the <code>ng g m routing<\/code> command in the npm console to create a <em>routing<\/em> module. In here we\u2019ll add the common routes and protect the admin route i.e. as soon as the administrator route is clicked, the login guard will come in picture and shall ask the user to authenticate first. Add the following code to the <code>src\/app\/app-routing.module.ts<\/code> file.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>app-routing.module.ts<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_45582\" class=\"syntaxhighlighter  js\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">01<\/div>\n<div class=\"line number2 index1 alt1\">02<\/div>\n<div class=\"line number3 index2 alt2\">03<\/div>\n<div class=\"line number4 index3 alt1\">04<\/div>\n<div class=\"line number5 index4 alt2\">05<\/div>\n<div class=\"line number6 index5 alt1\">06<\/div>\n<div class=\"line number7 index6 alt2\">07<\/div>\n<div class=\"line number8 index7 alt1\">08<\/div>\n<div class=\"line number9 index8 alt2\">09<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<div class=\"line number17 index16 alt2\">17<\/div>\n<div class=\"line number18 index17 alt1\">18<\/div>\n<div class=\"line number19 index18 alt2\">19<\/div>\n<div class=\"line number20 index19 alt1\">20<\/div>\n<div class=\"line number21 index20 alt2\">21<\/div>\n<div class=\"line number22 index21 alt1\">22<\/div>\n<div class=\"line number23 index22 alt2\">23<\/div>\n<div class=\"line number24 index23 alt1\">24<\/div>\n<div class=\"line number25 index24 alt2\">25<\/div>\n<div class=\"line number26 index25 alt1\">26<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ NgModule } from <\/code><code class=\"js string\">'@angular\/core'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ Routes, RouterModule } from <\/code><code class=\"js string\">'@angular\/router'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number3 index2 alt2\">\u00a0<\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"js comments\">\/\/ Application components.<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ UserComponent } from <\/code><code class=\"js string\">'.\/components\/user\/user.component'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ AdminComponent } from <\/code><code class=\"js string\">'.\/components\/admin\/admin.component'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ LoginComponent } from <\/code><code class=\"js string\">'.\/components\/login\/login.component'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number8 index7 alt1\">\u00a0<\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"js comments\">\/\/ Authentication guard.<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"js comments\">\/\/ Will display the login component if the admin component is clicked!<\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ LoginGuard } from <\/code><code class=\"js string\">'.\/guard\/login.guard'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number12 index11 alt1\">\u00a0<\/div>\n<div class=\"line number13 index12 alt2\"><code class=\"js comments\">\/\/ Routes definition.<\/code><\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"js plain\">const routes: Routes = [<\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">{ path: <\/code><code class=\"js string\">''<\/code><code class=\"js plain\">, redirectTo: <\/code><code class=\"js string\">'\/home'<\/code><code class=\"js plain\">, pathMatch: <\/code><code class=\"js string\">'full'<\/code> <code class=\"js plain\">},<\/code><\/div>\n<div class=\"line number16 index15 alt1\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">{ path: <\/code><code class=\"js string\">'home'<\/code><code class=\"js plain\">, component: UserComponent },<\/code><\/div>\n<div class=\"line number17 index16 alt2\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">{ path: <\/code><code class=\"js string\">'admin'<\/code><code class=\"js plain\">, component: AdminComponent, canActivate: [LoginGuard] },<\/code><\/div>\n<div class=\"line number18 index17 alt1\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">{ path: <\/code><code class=\"js string\">'login'<\/code><code class=\"js plain\">, component: LoginComponent }\u00a0 <\/code><code class=\"js comments\">\/\/ Will be activated by the login-guard to check user is authorised to access admin page.<\/code><\/div>\n<div class=\"line number19 index18 alt2\"><code class=\"js plain\">];<\/code><\/div>\n<div class=\"line number20 index19 alt1\">\u00a0<\/div>\n<div class=\"line number21 index20 alt2\"><code class=\"js plain\">@NgModule({<\/code><\/div>\n<div class=\"line number22 index21 alt1\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">imports: [RouterModule.forRoot(routes)],<\/code><\/div>\n<div class=\"line number23 index22 alt2\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">exports: [RouterModule]<\/code><\/div>\n<div class=\"line number24 index23 alt1\"><code class=\"js plain\">})<\/code><\/div>\n<div class=\"line number25 index24 alt2\">\u00a0<\/div>\n<div class=\"line number26 index25 alt1\"><code class=\"js keyword\">export<\/code> <code class=\"js keyword\">class<\/code> <code class=\"js plain\">AppRoutingModule { }<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>3.2 Import Routing module<\/h3>\n<p>To start working with angular routing we\u2019ll need to import the <code>RoutingModule<\/code> module in <code>src\/app\/app.module.ts<\/code> file.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<p><span style=\"text-decoration: underline;\"><em>app.module.ts<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_930159\" class=\"syntaxhighlighter  js\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<div class=\"line number7 index6 alt2\">7<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"js comments\">\/\/ Injecting the routing module.<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ AppRoutingModule } from <\/code><code class=\"js string\">'.\/app-routing.module'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number3 index2 alt2\">\u00a0<\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"js comments\">\/\/ Declaring the routing module in the imports section of NgModule decorator.<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"js plain\">imports: [<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"js spaces\">\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"js plain\">BrowserModule, AppRoutingModule<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">],<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>3.3 Injecting Router Outlet in the Application module<\/h3>\n<p>To activate routing in the angular application, inject the routing outlet in the <code>src\/app\/app.component.html<\/code> file.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>app.component.html<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_132400\" class=\"syntaxhighlighter  html\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<div class=\"line number7 index6 alt2\">7<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"container\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"html spaces\">\u00a0\u00a0<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">h2<\/code> <code class=\"html color1\">align<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"center\"<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"text-info\"<\/code><code class=\"html plain\">&gt;{{ title }}&lt;\/<\/code><code class=\"html keyword\">h2<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"html spaces\">\u00a0\u00a0<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">hr<\/code> <code class=\"html plain\">\/&gt;<\/code><\/div>\n<div class=\"line number4 index3 alt1\">\u00a0<\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"html spaces\">\u00a0\u00a0<\/code><code class=\"html comments\">&lt;!-- To activate the routing in the angular application. --&gt;<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"html spaces\">\u00a0\u00a0<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">router-outlet<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">router-outlet<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>3.4 Creating Components<\/h3>\n<p>To understand route guarding in angular we will create some components. Execute the following commands in the npm console.<\/p>\n<div>\n<div id=\"highlighter_939986\" class=\"syntaxhighlighter  html\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<div class=\"line number7 index6 alt2\">7<\/div>\n<div class=\"line number8 index7 alt1\">8<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"html plain\">\/\/ Administrator component.<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"html plain\">ng generate component components\/admin<\/code><\/div>\n<div class=\"line number3 index2 alt2\">\u00a0<\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"html plain\">\/\/ Login component.<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"html plain\">ng generate component components\/login<\/code><\/div>\n<div class=\"line number6 index5 alt1\">\u00a0<\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"html plain\">\/\/ User component.<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"html plain\">ng generate component components\/user<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>Following commands will generate the sample components to better understand the guarding in angular. If developers have any confusion regarding the project structure, they can refer to Fig. 1.<\/p>\n<h3>3.5 Creating a Routing Guard<\/h3>\n<p>Run the <code>ng g g guard\/login<\/code> command in the npm console to create a <em>guard<\/em> module. Add the following code to the <code>src\/app\/guard\/login.guard.ts<\/code> file.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>login.guard.ts<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_709378\" class=\"syntaxhighlighter  js\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">01<\/div>\n<div class=\"line number2 index1 alt1\">02<\/div>\n<div class=\"line number3 index2 alt2\">03<\/div>\n<div class=\"line number4 index3 alt1\">04<\/div>\n<div class=\"line number5 index4 alt2\">05<\/div>\n<div class=\"line number6 index5 alt1\">06<\/div>\n<div class=\"line number7 index6 alt2\">07<\/div>\n<div class=\"line number8 index7 alt1\">08<\/div>\n<div class=\"line number9 index8 alt2\">09<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<div class=\"line number17 index16 alt2\">17<\/div>\n<div class=\"line number18 index17 alt1\">18<\/div>\n<div class=\"line number19 index18 alt2\">19<\/div>\n<div class=\"line number20 index19 alt1\">20<\/div>\n<div class=\"line number21 index20 alt2\">21<\/div>\n<div class=\"line number22 index21 alt1\">22<\/div>\n<div class=\"line number23 index22 alt2\">23<\/div>\n<div class=\"line number24 index23 alt1\">24<\/div>\n<div class=\"line number25 index24 alt2\">25<\/div>\n<div class=\"line number26 index25 alt1\">26<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ Injectable, OnInit } from <\/code><code class=\"js string\">'@angular\/core'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from <\/code><code class=\"js string\">'@angular\/router'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ Observable } from <\/code><code class=\"js string\">'rxjs'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ Router } from <\/code><code class=\"js string\">'@angular\/router'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number5 index4 alt2\">\u00a0<\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"js plain\">@Injectable({<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">providedIn: <\/code><code class=\"js string\">'root'<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"js plain\">})<\/code><\/div>\n<div class=\"line number9 index8 alt2\">\u00a0<\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"js keyword\">export<\/code> <code class=\"js keyword\">class<\/code> <code class=\"js plain\">LoginGuard <\/code><code class=\"js keyword\">implements<\/code> <code class=\"js plain\">OnInit, CanActivate {<\/code><\/div>\n<div class=\"line number11 index10 alt2\">\u00a0<\/div>\n<div class=\"line number12 index11 alt1\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">constructor(<\/code><code class=\"js keyword\">private<\/code> <code class=\"js plain\">router: Router) { }<\/code><\/div>\n<div class=\"line number13 index12 alt2\">\u00a0<\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">ngOnInit() {<\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"js spaces\">\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"js plain\">console.log(<\/code><code class=\"js string\">'Login guard activated!'<\/code><code class=\"js plain\">);<\/code><\/div>\n<div class=\"line number16 index15 alt1\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number17 index16 alt2\">\u00a0<\/div>\n<div class=\"line number18 index17 alt1\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js comments\">\/\/ If the administration component is clicked angular will activate the guard<\/code><\/div>\n<div class=\"line number19 index18 alt2\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js comments\">\/\/ to check if the user is authorized user or not.<\/code><\/div>\n<div class=\"line number20 index19 alt1\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">canActivate(<\/code><\/div>\n<div class=\"line number21 index20 alt2\"><code class=\"js spaces\">\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"js plain\">next: ActivatedRouteSnapshot,<\/code><\/div>\n<div class=\"line number22 index21 alt1\"><code class=\"js spaces\">\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"js plain\">state: RouterStateSnapshot): Observable | Promise | boolean {<\/code><\/div>\n<div class=\"line number23 index22 alt2\"><code class=\"js spaces\">\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"js comments\">\/\/ TODO - Add the authentication and authorization mechanism.<\/code><\/div>\n<div class=\"line number24 index23 alt1\"><code class=\"js spaces\">\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"js keyword\">return<\/code> <code class=\"js keyword\">this<\/code><code class=\"js plain\">.router.navigate([<\/code><code class=\"js string\">'\/login'<\/code><code class=\"js plain\">]);<\/code><\/div>\n<div class=\"line number25 index24 alt2\"><code class=\"js spaces\">\u00a0\u00a0<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number26 index25 alt1\"><code class=\"js plain\">}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2>4. Run the Application<\/h2>\n<p>As we are ready with all the changes, let us compile and run the angular application with <code>ng serve<\/code> command. Once the projects are successfully compiled and deployed, open the browser to test it.<\/p>\n<h2>5. Project Demo<\/h2>\n<p>Open your favorite browser and hit the angular application url (<code>http:\/\/localhost:4200\/<\/code>) to display the index page of the application.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"814\" height=\"107\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/angular-route-guards-tutorial-project-demo-guide-img1.jpg\" alt=\"Angular Route Guards - Index Page\" class=\"wp-image-91964\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/angular-route-guards-tutorial-project-demo-guide-img1.jpg 814w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/angular-route-guards-tutorial-project-demo-guide-img1-300x39.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/angular-route-guards-tutorial-project-demo-guide-img1-768x101.jpg 768w\" sizes=\"(max-width: 814px) 100vw, 814px\" \/><figcaption>Fig. 2: Index Page<\/figcaption><\/figure>\n<\/div>\n<p>User can access the secure page and they will be shown the login guard as the administration is protected.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"803\" height=\"116\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/angular-route-guards-tutorial-project-demo-guide-img2.jpg\" alt=\"Angular Route Guards - Login Guard \" class=\"wp-image-91965\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/angular-route-guards-tutorial-project-demo-guide-img2.jpg 803w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/angular-route-guards-tutorial-project-demo-guide-img2-300x43.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/angular-route-guards-tutorial-project-demo-guide-img2-768x111.jpg 768w\" sizes=\"(max-width: 803px) 100vw, 803px\" \/><figcaption>Fig. 3: Login Guard <\/figcaption><\/figure>\n<\/div>\n<p>That is all for this tutorial and I hope the article served you whatever you were expecting for. Happy Learning and do not forget to share!<\/p>\n<h2>6. Conclusion<\/h2>\n<p>In this section, we learned how to include a simple guard control in the angular application. Developers can download the sample application as an Eclipse project in the <a href=\"#projectDownload\">Downloads<\/a> section.<\/p>\n<h2><a name=\"projectDownload\"><\/a>7. Download the Eclipse Project<\/h2>\n<p>This was a tutorial of route guarding in an angular application.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>You can download the full source code of this example here: <a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/angular-route-guard-tutorial.zip\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Angular Route Guards Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Welcome readers, in this tutorial, we will implement the Route Guards in an angular application. 1. Introduction Angular is a Typescript-based open-source framework that helps developers build single page applications Offers Object-oriented features and supports the dynamic loading of the pages Supports Two-way data-binding, Property ([]), and Event (()) binding techniques Supports command-line-interface to easily &hellip;<\/p>\n","protected":false},"author":26931,"featured_media":49726,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1880],"tags":[740],"class_list":["post-91962","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular Route Guards Example - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"Interested to learn more about Angular? Then check out our detailed example on Angular Route Guards!\" \/>\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.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Route Guards Example - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about Angular? Then check out our detailed example on Angular Route Guards!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-22T04:00:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Yatin Batra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yatin Batra\" \/>\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.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html\"},\"author\":{\"name\":\"Yatin Batra\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\"},\"headline\":\"Angular Route Guards Example\",\"datePublished\":\"2019-05-22T04:00:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html\"},\"wordCount\":686,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html\",\"name\":\"Angular Route Guards Example - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"datePublished\":\"2019-05-22T04:00:53+00:00\",\"description\":\"Interested to learn more about Angular? Then check out our detailed example on Angular Route Guards!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/05\\\/angular-route-guards-example.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Angular\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\\\/angular\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Angular Route Guards Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\",\"name\":\"Yatin Batra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"caption\":\"Yatin Batra\"},\"description\":\"An experience full-stack engineer well versed with Core Java, Spring\\\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).\",\"sameAs\":[\"https:\\\/\\\/www.javacodegeeks.com\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/yatin-batra\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Route Guards Example - Java Code Geeks","description":"Interested to learn more about Angular? Then check out our detailed example on Angular Route Guards!","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.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html","og_locale":"en_US","og_type":"article","og_title":"Angular Route Guards Example - Java Code Geeks","og_description":"Interested to learn more about Angular? Then check out our detailed example on Angular Route Guards!","og_url":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2019-05-22T04:00:53+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Yatin Batra","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Yatin Batra","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html"},"author":{"name":"Yatin Batra","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d"},"headline":"Angular Route Guards Example","datePublished":"2019-05-22T04:00:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html"},"wordCount":686,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","keywords":["Angular"],"articleSection":["Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html","url":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html","name":"Angular Route Guards Example - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","datePublished":"2019-05-22T04:00:53+00:00","description":"Interested to learn more about Angular? Then check out our detailed example on Angular Route Guards!","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/2019\/05\/angular-route-guards-example.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.javacodegeeks.com\/category\/web-development"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript"},{"@type":"ListItem","position":4,"name":"Angular","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript\/angular"},{"@type":"ListItem","position":5,"name":"Angular Route Guards Example"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d","name":"Yatin Batra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","caption":"Yatin Batra"},"description":"An experience full-stack engineer well versed with Core Java, Spring\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).","sameAs":["https:\/\/www.javacodegeeks.com"],"url":"https:\/\/www.javacodegeeks.com\/author\/yatin-batra"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/91962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/26931"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=91962"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/91962\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/49726"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=91962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=91962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=91962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}