{"id":1760,"date":"2014-12-19T13:15:13","date_gmt":"2014-12-19T11:15:13","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1760"},"modified":"2015-01-05T13:08:40","modified_gmt":"2015-01-05T11:08:40","slug":"web-components-like-angularjs-directives","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/","title":{"rendered":"Web-components like AngularJS directives"},"content":{"rendered":"

As you may already know web components consist out of a set of technologies which are combined to create a custom element for use in your HTML markup. The main additions, as described in several blogposts, are HTML imports, Shadow Dom and Templates combined with isolated scripts and\u00a0styling. (If these concepts are new to you i suggest you read up on web components at WebComponents.org<\/a>).<\/p>\n

This blog post has a living example on plnkr.co<\/a>.<\/p>\n

If we look at Angular it already supports\u00a0html imports and isolated scripts through it\u2019s directive approach. This means we can already create custom components by using directives. The downside of this approach however is that there is no true isolation of markup and styling. Meaning both markup\u00a0and styling may be inadvertently\u00a0influenced by an outside source.<\/p>\n

Let\u2019s start with a basic directive and template:<\/p>\n

\r\nangular.module('shadow.app', ['component.api'])\r\n.directive('simpleDirective', function() {\r\n    return {\r\n      restrict: 'E',\r\n      replace: false,\r\n      templateUrl: 'template.html',\r\n      transclude: true,\r\n      scope: {\r\n        dynamic: '='\r\n      },\r\n      link: function($scope, element) {\r\n        \/\/ your code here\r\n      }\r\n    };\r\n  })<\/pre>\n
\r\n<div class="outer">\r\n  <div class="boilerplate">\r\n    This is template content\r\n  <\/div>\r\n  <div class="name">\r\n    <div ng-transclude><\/div>\r\n  <\/div>\r\n  <div class="boilerplate">\r\n    {{dynamic}}\r\n  <\/div>\r\n<\/div> <\/pre>\n
As you can see lines 6 and 11 in the directive have been highlighted. This is because these lines will be where we\u2019ll add our logic to turn this normal directive in to the essence of a true web component.<\/p>\n
Now the first thing we\u2019ll want to do is make sure that the template we get is correct. In order to do this we will\u00a0be creating a function which retrieves the template and encapsulates it inside a template. You could also do this in the template it\u2019s self, but it\u2019ll soon become clear why I\u00a0choose to work this way.<\/p>\n
The method for doing this will require $interpolate and $templateCache to be added to your directive. As we\u2019ll be getting the template from the cache directly and create a template stamp. It should look something like this.<\/p>\n
\r\nvar shadowTemplate = $interpolate('<div ng-transclude><\/div>' +\r\n    '<template>{{template}}<\/template>'); <\/pre>\n
\r\nfunction handleShadowTemplate(url) {\r\n  var template = $templateCache.get(url);\r\n\r\n  template =\r\n    template.replace('<div ng-transclude><\/div>', '<content><\/content>');\r\n  template = shadowTemplate({\r\n    template: template\r\n  })\r\n\r\n  return template;\r\n} <\/pre>\n
This effectively wraps the markup\u00a0inside a Template for later use with the shadow root whilst still maintaining a link inside it with our transcluded content through the content<\/strong> tag. The trick here is to create a wrapper for the link function. You could also use\u00a0the link function for this but it\u2019ll become clear later on why i choose not follow said approach.<\/p>\n
The function would look something like this:<\/p>\n
\r\nfunction shadowLink(linkCallback) {\r\n  return function($scope, element, attr, controllers, transcludeFn) {\r\n      var shadow = element.find('div')[0].createShadowRoot(),\r\n          template = element.find('template')[0],\r\n          clone = document.importNode(template.content, true);\r\n\r\n    shadow.appendChild(clone);\r\n    $compile(shadow)($scope);\r\n\r\n    linkCallback($scope, element, attr, controllers, transcludeFn);\r\n  }\r\n} <\/pre>\n
This effectively retrieves the transcluding tag which will now also become our shadow root, retrieve our template (the one we stamped out earlier) and clone it\u2019s content and now the magic begins. Well not really magic but something interesting nonetheless. We add our cloned content to our shadow root and then compile it with the scope of our directive.<\/p>\n
This effectively binds our scope content to our shadow-document. Allowing data binding to function as it normally would in a AngularJS directive. Only now our markup is isolated and will not be as prone to accidental manipulation.<\/p>\n
Now I\u00a0mentioned styling earlier on. And in many blogs you\u2019ll see people add styling inline. I don\u2019t really like that method so I\u00a0personally prefer to use the @import statement but that is mainly preference I\u00a0think.<\/p>\n
And as for the reason for the wrappers. Using methods en encapsulate our callbacks it\u2019s possible to move them into a service\u00a0allowing us to use these exact same methods in multiple directives whilst maintaining a single point of maintainability. Like so:<\/p>\n
\r\nangular.module('component.api', [])\r\n  .provider('ShadowService', function() {\r\n    this.$get = ['$compile', '$interpolate', '$templateCache',\r\n\r\n      function($compile, $interpolate, $templateCache) {\r\n        var shadowTemplate = $interpolate('<div ng-transclude><\/div>' +\r\n          '<template>{{template}}<\/template>');\r\n\r\n        function handleShadowTemplate(url) {\r\n          \/\/ code here\r\n        }\r\n\r\n        function shadowLink(linkCallback) {\r\n          \/\/ Code here\r\n        }\r\n\r\n        return {\r\n          shadowTemplate: handleShadowTemplate,\r\n          shadowLink: shadowLink\r\n        };\r\n      }\r\n    ];\r\n  });\r\n<\/pre>\n
Always good to keep up with the DRY principle and all. You can see more on how I\u00a0implemented the provider in my plunker<\/a> example. And also how I\u00a0prevent shadow dom execution when createShadowRoot is not supported.<\/p>\n
If you want to see more or just play\u00a0with this setup see the\u00a0plunker<\/a> i\u2019ve created for your enjoyment. I hope you\u2019ve enjoyed reading this and please ask any questions you may have through the comments section below.<\/p>\n
\n\n\n\n
Reference: <\/span><\/td>\nWeb-components like AngularJS directives<\/a> from our WCG partner<\/a> Richard Rijnberk at the JDriven<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
As you may already know web components consist out of a set of technologies which are combined to create a custom element for use in your HTML markup. The main additions, as described in several blogposts, are HTML imports, Shadow Dom and Templates combined with isolated scripts and\u00a0styling. (If these concepts are new to you …<\/p>\n","protected":false},"author":44,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-1760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"\nWeb-components like AngularJS directives - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"As you may already know web components consist out of a set of technologies which are combined to create a custom element for use in your HTML markup. The\" \/>\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.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web-components like AngularJS directives - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"As you may already know web components consist out of a set of technologies which are combined to create a custom element for use in your HTML markup. The\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-19T11:15:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-01-05T11:08:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/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=\"Richard Rijnberk\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Richard Rijnberk\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/\"},\"author\":{\"name\":\"Richard Rijnberk\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/baff23f5b51fffe59f51d74e9c87b216\"},\"headline\":\"Web-components like AngularJS directives\",\"datePublished\":\"2014-12-19T11:15:13+00:00\",\"dateModified\":\"2015-01-05T11:08:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/\"},\"wordCount\":861,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/\",\"name\":\"Web-components like AngularJS directives - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2014-12-19T11:15:13+00:00\",\"dateModified\":\"2015-01-05T11:08:40+00:00\",\"description\":\"As you may already know web components consist out of a set of technologies which are combined to create a custom element for use in your HTML markup. The\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Web-components like AngularJS directives\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/baff23f5b51fffe59f51d74e9c87b216\",\"name\":\"Richard Rijnberk\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/96585632a5625f9098657c27a269d45c9971bd753e995051d595b0ce638dfca8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/96585632a5625f9098657c27a269d45c9971bd753e995051d595b0ce638dfca8?s=96&d=mm&r=g\",\"caption\":\"Richard Rijnberk\"},\"description\":\"Richard is an experienced Java software engineer and Frontend Developer. Over the last period he has mainly focused on Frontend development with frameworks such as Angular. He has an interest in gadgets and is always eager to learn new technologies. He currently works for JDriven and is one of the bloggers on their site.\",\"sameAs\":[\"http:\/\/blog.jdriven.com\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/richard-rijnberk\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web-components like AngularJS directives - Web Code Geeks - 2026","description":"As you may already know web components consist out of a set of technologies which are combined to create a custom element for use in your HTML markup. The","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.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/","og_locale":"en_US","og_type":"article","og_title":"Web-components like AngularJS directives - Web Code Geeks - 2026","og_description":"As you may already know web components consist out of a set of technologies which are combined to create a custom element for use in your HTML markup. The","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2014-12-19T11:15:13+00:00","article_modified_time":"2015-01-05T11:08:40+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Richard Rijnberk","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Richard Rijnberk","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/"},"author":{"name":"Richard Rijnberk","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/baff23f5b51fffe59f51d74e9c87b216"},"headline":"Web-components like AngularJS directives","datePublished":"2014-12-19T11:15:13+00:00","dateModified":"2015-01-05T11:08:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/"},"wordCount":861,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/","name":"Web-components like AngularJS directives - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2014-12-19T11:15:13+00:00","dateModified":"2015-01-05T11:08:40+00:00","description":"As you may already know web components consist out of a set of technologies which are combined to create a custom element for use in your HTML markup. The","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/web-components-like-angularjs-directives\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"Web-components like AngularJS directives"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/baff23f5b51fffe59f51d74e9c87b216","name":"Richard Rijnberk","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/96585632a5625f9098657c27a269d45c9971bd753e995051d595b0ce638dfca8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/96585632a5625f9098657c27a269d45c9971bd753e995051d595b0ce638dfca8?s=96&d=mm&r=g","caption":"Richard Rijnberk"},"description":"Richard is an experienced Java software engineer and Frontend Developer. Over the last period he has mainly focused on Frontend development with frameworks such as Angular. He has an interest in gadgets and is always eager to learn new technologies. He currently works for JDriven and is one of the bloggers on their site.","sameAs":["http:\/\/blog.jdriven.com\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/richard-rijnberk\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=1760"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1760\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=1760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=1760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=1760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}