{"id":102099,"date":"2020-02-19T07:00:00","date_gmt":"2020-02-19T05:00:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=102099"},"modified":"2020-02-17T15:33:28","modified_gmt":"2020-02-17T13:33:28","slug":"angularjs-custom-directives-example","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html","title":{"rendered":"AngularJS Custom Directives Example"},"content":{"rendered":"<p>Welcome readers, in this tutorial, we will understand custom directives in angularjs.<\/p>\n<h2>1. Introduction<\/h2>\n<ul>\n<li>AngularJS helps developers to write custom directives which are easy to manipulate and simplify the DOM manipulation<\/li>\n<li>These directives extend the HTML functionality and help manipulate the HTML behavior<\/li>\n<li>Directives can be implemented in the following ways i.e.\n<ul>\n<li><em>Element directives<\/em>: Activated when a matching HTML element is found in the template<\/li>\n<li><em>Attribute directives<\/em>: Activated when a matching HTML attribute is found in the template<\/li>\n<li><em>CSS class directives<\/em>: Activated when a matching CSS class is found<\/li>\n<li><em>Comment directives<\/em>: Enabled when a matching HTML comment is found<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>1.1 Commonly used Directive properties<\/h3>\n<ul>\n<li><strong>restrict<\/strong>: Specifies the implementation of a directive in the angular app i.e. &#8216;A&#8217; for an attribute, &#8216;C&#8217; for class, &#8216;E&#8217; for element, &#8216;M&#8217; for comment<\/li>\n<li><strong>scope<\/strong>: Accesses the data or the method inside the template and the link function. It is of three types i.e. <code>true<\/code>, <code>false<\/code> or the isolated scope (i.e. the scope that does not inherit from parent and exists on its own)<\/li>\n<li><strong>template<\/strong>: HTML content that will be generated when the directive is compiled<\/li>\n<li><strong>templateUrl<\/strong>: Template path that will be used by the directive<\/li>\n<\/ul>\n<p>In this tutorial, we\u2019ll focus on Element directive as they are most used today.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<h2>2. AngularJS Custom Directives 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 the HTML editor to create an HTML file and play it in the browser.<\/p>\n<h2>3. Creating a HTML file<\/h2>\n<p>Add the following code to the html file.<\/p>\n<p><span style=\"text-decoration: underline\"><em>Angularjs-custom-directive.html<\/em><\/span><\/p>\n<pre class=\"brush:html; wrap-lines:false;\">&lt;html&gt;\n   &lt;head&gt;\n      &lt;title&gt;JCG tutorial&lt;\/title&gt;\n   &lt;\/head&gt;\n   &lt;body&gt;\n      &lt;h1&gt;AngularJS Custom Directives&lt;\/h1&gt;\n      &lt;div ng-app = \"myApp\" ng-controller = \"empCtrl\"&gt;\n         &lt;myemployee name = \"Abc\"&gt;&lt;\/myemployee&gt;\n         &lt;br\/&gt;\n         &lt;myemployee name = \"Xyz\"&gt;&lt;\/myemployee&gt;\n      &lt;\/div&gt;\n      &lt;script src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.7.8\/angular.min.js\"&gt;&lt;\/script&gt;\n      &lt;script&gt;\n\t\tvar myApp = angular.module(\"myApp\", []);\n\t\tmyApp.directive('myemployee', function() {\n\t\t\tvar directive = {};\n\t\t\tdirective.restrict = 'E';\n\t\t\tdirective.template = \"myemployee: &lt;b&gt;{{myemployee.name}}&lt;\/b&gt; , Id: &lt;b&gt;{{myemployee.id}}&lt;\/b&gt;, Designation: &lt;b&gt;{{myemployee.designation}}&lt;\/b&gt;\";\n\t\t\tdirective.scope = {\n\t\t\t\tmyemployee: \"=name\"\n\t\t\t}\n\t\t\tdirective.compile = function(element, attributes) {\n\t\t\t\tvar linkFunction = function($scope, element, attributes) {\n\t\t\t\t\telement.html(\"Employee: &lt;b&gt;\" + $scope.myemployee.name + \"&lt;\/b&gt; , Id: &lt;b&gt;\" + $scope.myemployee.id + \"&lt;\/b&gt;, Designation: &lt;b&gt;\" + $scope.myemployee.designation + \"&lt;\/b&gt;&lt;br\/&gt;\");\n\t\t\t\t}\n\t\t\t\treturn linkFunction;\n\t\t\t}\n\t\t\treturn directive;\n\t\t});\n\t\t\n\t\tmyApp.controller('empCtrl', function($scope) {\n\t\t\t$scope.Abc = {};\n\t\t\t$scope.Abc.name = \"Abc\";\n\t\t\t$scope.Abc.id = 101;\n\t\t\t$scope.Abc.designation = \"Software engineer\";\n\t\t\t$scope.Xyz = {};\n\t\t\t$scope.Xyz.name = \"Xyz\";\n\t\t\t$scope.Xyz.id = 102;\n\t\t\t$scope.Xyz.designation = \"Software engineer\";\n\t\t});         \n      &lt;\/script&gt;\n   &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n<p>And done! We have created a simple HTML page that developers can double click to preview in a browser.<\/p>\n<h2>4. Run the Application<\/h2>\n<p>Double click on the HTML file to preview in the browser of your preferred choice.<\/p>\n<h2>5. Project Demo<\/h2>\n<p>If everything goes well, custom directive will display the employee\u2019s information.<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"706\" height=\"199\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/Angularjs-custom-directive-demo-img1.jpg\" alt=\"AngularJS Custom Directives - Index page\" class=\"wp-image-102100\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/Angularjs-custom-directive-demo-img1.jpg 706w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/Angularjs-custom-directive-demo-img1-300x85.jpg 300w\" sizes=\"(max-width: 706px) 100vw, 706px\" \/><figcaption>Fig. 1: Index page<\/figcaption><\/figure>\n<p>That is all for this tutorial and I hope the article served you whatever you were expecting. Happy Learning and do not forget to share!<\/p>\n<h2>6. Conclusion<\/h2>\n<p>In this section, we learned how to create custom directives in an angularjs 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 Angular Project<\/h2>\n<p>This was a tutorial of Custom Directives in AngularJS.<\/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\/2020\/02\/AngularJS-Custom-Directive-example.zip\"><strong>AngularJS Custom Directives Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Welcome readers, in this tutorial, we will understand custom directives in angularjs. 1. Introduction AngularJS helps developers to write custom directives which are easy to manipulate and simplify the DOM manipulation These directives extend the HTML functionality and help manipulate the HTML behavior Directives can be implemented in the following ways i.e. Element directives: Activated &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":[742],"class_list":["post-102099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angularjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>AngularJS Custom Directives Example - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"Welcome readers, in this tutorial, we will understand custom directives in angularjs. 1. Introduction AngularJS helps developers to write custom\" \/>\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\/angularjs-custom-directives-example.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS Custom Directives Example - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"Welcome readers, in this tutorial, we will understand custom directives in angularjs. 1. Introduction AngularJS helps developers to write custom\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-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=\"2020-02-19T05:00:00+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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/angularjs-custom-directives-example.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/angularjs-custom-directives-example.html\"},\"author\":{\"name\":\"Yatin Batra\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\"},\"headline\":\"AngularJS Custom Directives Example\",\"datePublished\":\"2020-02-19T05:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/angularjs-custom-directives-example.html\"},\"wordCount\":393,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/angularjs-custom-directives-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"keywords\":[\"AngularJS\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/angularjs-custom-directives-example.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/angularjs-custom-directives-example.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/angularjs-custom-directives-example.html\",\"name\":\"AngularJS Custom Directives Example - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/angularjs-custom-directives-example.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/angularjs-custom-directives-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"datePublished\":\"2020-02-19T05:00:00+00:00\",\"description\":\"Welcome readers, in this tutorial, we will understand custom directives in angularjs. 1. Introduction AngularJS helps developers to write custom\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/angularjs-custom-directives-example.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/angularjs-custom-directives-example.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/angularjs-custom-directives-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\\\/angularjs-custom-directives-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\":\"AngularJS Custom Directives 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":"AngularJS Custom Directives Example - Java Code Geeks","description":"Welcome readers, in this tutorial, we will understand custom directives in angularjs. 1. Introduction AngularJS helps developers to write custom","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\/angularjs-custom-directives-example.html","og_locale":"en_US","og_type":"article","og_title":"AngularJS Custom Directives Example - Java Code Geeks","og_description":"Welcome readers, in this tutorial, we will understand custom directives in angularjs. 1. Introduction AngularJS helps developers to write custom","og_url":"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2020-02-19T05:00:00+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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html"},"author":{"name":"Yatin Batra","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d"},"headline":"AngularJS Custom Directives Example","datePublished":"2020-02-19T05:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html"},"wordCount":393,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","keywords":["AngularJS"],"articleSection":["Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html","url":"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html","name":"AngularJS Custom Directives Example - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","datePublished":"2020-02-19T05:00:00+00:00","description":"Welcome readers, in this tutorial, we will understand custom directives in angularjs. 1. Introduction AngularJS helps developers to write custom","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-example.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/angularjs-custom-directives-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\/angularjs-custom-directives-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":"AngularJS Custom Directives 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\/102099","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=102099"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/102099\/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=102099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=102099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=102099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}