{"id":10003,"date":"2016-01-13T16:11:17","date_gmt":"2016-01-13T14:11:17","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=10003"},"modified":"2017-12-19T16:35:18","modified_gmt":"2017-12-19T14:35:18","slug":"angular-js-transclusion-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/","title":{"rendered":"Angular.js Transclusion Example"},"content":{"rendered":"<p>There is a myth that wants <em>transclusion<\/em> to be a hard concept to understand and manage, according to Angular.js. So, for today, we&#8217;ll wear the hat of Mythbusters, by displaying several simple examples of transclusion in Angular.js.<\/p>\n<h2>1. Introduction<\/h2>\n<p>First things first, which means that we have to understand the term itself, in order to delve into tougher\/technical questions that may occur.<\/p>\n<p><em>Transclusion is generally the inclusion of the content of a document into another document by reference.<\/em><br \/>\n[ulp id=&#8217;LXJcMJZXSsqGXYW8&#8242;]<\/p>\n<h3>1.1 Transclusion Definitions<\/h3>\n<p>In other words, one could say &#8220;it&#8217;s all about templating; specifically, when you want to include some content from one template to another&#8221;, but I&#8217;m sure, there are still some logical gaps, so, I hereby quote several <strong>transclusion<\/strong> definitions, in order to ensure everyone&#8217;s in the same page, before displaying a single line of code:<\/p>\n<ul>\n<li>a directive (with a template) that either wraps, or is wrapped by end user code<\/li>\n<li>a setting to tell angular to capture everything that is put inside the directive in the markup and use it somewhere (where actually the <code>ng-transclude<\/code> is at) in the directive&#8217;s template.<\/li>\n<li>provides a way to pass in templates to a directive and it is displayed<\/li>\n<li>it allows you to place HTML inside of a directive\u2019s declaring HTML to be used within the directives template<\/li>\n<li>is used to insert the original contents of a directive&#8217;s element into a specified place in the template of the directive<\/li>\n<\/ul>\n<p><em>After reading the above, the very first output is &#8220;what are directives?&#8221;, but this is covered in the following section, as I will hereby stick with the <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/service\/$compile#transclusion\" target=\"_blank\">official definition<\/a>:<\/em><\/p>\n<p><strong>Transclusion is the process of extracting a collection of DOM elements from one part of the DOM and copying them to another part of the DOM, while maintaining their connection to the original AngularJS scope from where they were taken.<\/strong><\/p>\n<h3>1.2 Angular Directives<\/h3>\n<p><a href=\"https:\/\/docs.angularjs.org\/guide\/directive\" target=\"_blank\">Directives<\/a> are markers on a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\" target=\"_blank\">DOM<\/a> element (attributes, CSS classes, names of elements, comments) that tell Angular&#8217;s HTML <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/service\/$compile\" target=\"_blank\">compiler<\/a> to attach a specific behavior to that DOM element (i.e through event listeners), or even to transform the DOM element and its children. Some of the built-in Angular directives are: <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/directive\/ngBind\" target=\"_blank\"><code>ngBind<\/code><\/a>, <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/directive\/ngModel\" target=\"_blank\"><code>ngModel<\/code><\/a> and <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/directive\/ngClass\" target=\"_blank\"><code>ngClass<\/code><\/a>.<\/p>\n<p>In addition to all the built-in Angular.js directives, you can also <a href=\"https:\/\/docs.angularjs.org\/guide\/directive#creating-directives\" target=\"_blank\">create your own directives<\/a>, by using the <code>.directive<\/code> function.<\/p>\n<p>Such directives look like this, on their html part:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;script src=&quot;http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.8\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script src=&quot;second.js&quot;&gt;&lt;\/script&gt;\r\n&lt;body ng-app=&quot;app&quot;&gt;\r\n    &lt;div test-directive&gt;&lt;\/div&gt;\r\n    Hello from page\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>whereas the javascript part is like:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar app = angular.module(&quot;app&quot;, &#x5B;]);\r\napp.directive(&quot;testDirective&quot;, function() {\r\n    return {\r\n        restrict : &quot;EA&quot;,\r\n        template : &quot;&lt;h1&gt;Hey, I'm the directive's content!&lt;\/h1&gt;&quot;\r\n    };\r\n});\r\n<\/pre>\n<p>As expected, the output firstly contains the template inserted from the directive and then the actual html content of the page itself:<\/p>\n<figure id=\"attachment_10133\" aria-describedby=\"caption-attachment-10133\" style=\"width: 481px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/1-1.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/1-1.jpg\" alt=\"Figure 1. Sample Directive\" width=\"481\" height=\"168\" class=\"size-full wp-image-10133\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/1-1.jpg 481w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/1-1-300x105.jpg 300w\" sizes=\"(max-width: 481px) 100vw, 481px\" \/><\/a><figcaption id=\"caption-attachment-10133\" class=\"wp-caption-text\">Figure 1. Sample Directive<\/figcaption><\/figure>\n<p><em>Did you notice the transition between the camel-case, used in the js part and the dash (&#8220;-&#8220;), when on html, according to the directive&#8217;s reference?<\/em><\/p>\n<p>There are some points here, according to directives:<\/p>\n<ul>\n<li>A camel-case name must be used for naming a directive (js), but for invoking it (html), a dash (&#8220;-&#8220;) separated name must be used (i.e. <code>testDirective<\/code> -&gt; <code>test-directive<\/code>).<\/li>\n<li>The <code>restrict<\/code> property is used to restrict the directive&#8217;s invocation by some of the existing methods.<\/li>\n<li>The <code>template<\/code> property is used to define the html content that the specified directive will contain.<\/li>\n<\/ul>\n<p>For instance, the legal restrict values are:<\/p>\n<ul>\n<li><code>E<\/code> for element&#8217;s name<\/li>\n<li><code>A<\/code> for attribute<\/li>\n<li><code>C<\/code> for class<\/li>\n<li><code>M<\/code> for comment<\/li>\n<\/ul>\n<p><em>By default, the <code>restrict<\/code> property has a value of <code>EA<\/code>, which means that both element names and attribute names can invoke the directive.<\/em><\/p>\n<h2>2. Transclusion in Angular.js<\/h3>\n<p>In Angular.js, transclusion is used with the <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/directive\/ngTransclude\" target=\"_blank\"><code>ngTransclude<\/code><\/a> directive to insert the original contents of a directive&#8217;s element into a specified place in the template of the directive.<\/p>\n<p>That is, it can be used within the directive&#8217;s template, which provides better modularity on the directive itself, when having to handle lots of templates for different purposes.<\/p>\n<p>Here a simple transclusion directive, where the HTML paragraph is used within its own template, using <code>ngTransclude<\/code>:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;my-transclusion-directive&gt;\r\n  &lt;div&gt;I am the transcluded element. I have transclude property enabled.&lt;\/div&gt;\r\n&lt;\/my-transclusion-directive&gt;\r\n<\/pre>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n.directive('myTransclusionDirective', function() {\r\n \r\n  return {\r\n    restrict: 'EA',\r\n    scope:{}, \/\/isolate scope.\r\n    transclude:true,\r\n    template: &quot;&lt;div ng-transclude&gt;&lt;\/div&gt;&lt;div&gt;My first transclusion directive.&lt;\/div&gt;&quot;\r\n  };\r\n \r\n});\r\n<\/pre>\n<p>The above transcluded directive will place <code>&lt;div&gt;I am the transcluded element. I have transclude property enabled.&lt;\/div&gt;<\/code> inside the div marked with <code>ng-transclude<\/code> in the directive&#8217;s code.<\/p>\n<h2>3. Today&#8217;s Example<\/h2>\n<p>So, here&#8217;s the today&#8217;s example, according to the html, js and visual part.<\/p>\n<p><u><code>index.html<\/code><\/u><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n    &lt;head lang=&quot;en&quot;&gt;\r\n      &lt;meta charset=&quot;utf-8&quot;&gt;\r\n      &lt;title&gt;AngularJS Transclusion&lt;\/title&gt;\r\n      &lt;script src=&quot;http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.5\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n      &lt;script type=&quot;text\/javascript&quot; src=&quot;app.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;\/head&gt;\r\n    &lt;body&gt;\r\n \r\n      &lt;div ng-app=&quot;mainApp&quot;&gt;\r\n        &lt;my-transclusion-directive&gt;\r\n          &lt;div&gt;I am the transcluded element. I have transclude property enabled.&lt;\/div&gt;\r\n        &lt;\/my-transclusion-directive&gt;\r\n     &lt;\/div&gt;\r\n\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><u><code>script.js<\/code><\/u><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar app = angular.module('mainApp', &#x5B;]);\r\n \r\napp.directive('myTransclusionDirective', function() {\r\n \r\n  return {\r\n    restrict: 'EA',\r\n    scope:{}, \/\/isolate scope.\r\n    transclude:true,\r\n    template: &quot;&lt;div ng-transclude&gt;&lt;\/div&gt;&lt;div&gt;My first transclusion directive.&lt;\/div&gt;&quot;\r\n  };\r\n \r\n});\r\n<\/pre>\n<p>As expected\/explained from the previous paragraph, the output is like:<\/p>\n<figure id=\"attachment_10131\" aria-describedby=\"caption-attachment-10131\" style=\"width: 501px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/aaa.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/aaa.jpg\" alt=\"Figure 2. App screenshot\" width=\"501\" height=\"290\" class=\"size-full wp-image-10131\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/aaa.jpg 501w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/aaa-300x174.jpg 300w\" sizes=\"(max-width: 501px) 100vw, 501px\" \/><\/a><figcaption id=\"caption-attachment-10131\" class=\"wp-caption-text\">Figure 2. App screenshot<\/figcaption><\/figure>\n<p>What if setting the transclude property to false? That is, the html content of the transcluded element will not be displayed. Instead, only the directive&#8217;s template will be displayed, which means:<\/p>\n<figure id=\"attachment_10135\" aria-describedby=\"caption-attachment-10135\" style=\"width: 391px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/2.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/2.jpg\" alt=\"Figure 3. Transclude property is disabled\" width=\"391\" height=\"228\" class=\"size-full wp-image-10135\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/2.jpg 391w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/2-300x175.jpg 300w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><\/a><figcaption id=\"caption-attachment-10135\" class=\"wp-caption-text\">Figure 3. Transclude property is disabled<\/figcaption><\/figure>\n<h2>4. Download<\/h2>\n<p>This was an example of Angular.js Transclusion.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>You can download the full source code of this example here : <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/ng-transclude.zip\"><strong>ng-transclude.zip<\/strong><\/a>.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>There is a myth that wants transclusion to be a hard concept to understand and manage, according to Angular.js. So, for today, we&#8217;ll wear the hat of Mythbusters, by displaying several simple examples of transclusion in Angular.js. 1. Introduction First things first, which means that we have to understand the term itself, in order to &hellip;<\/p>\n","protected":false},"author":63,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-10003","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular.js Transclusion Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"There is a myth that wants transclusion to be a hard concept to understand and manage, according to Angular.js. So, for today, we&#039;ll wear the hat of\" \/>\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\/angular-js-transclusion-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular.js Transclusion Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"There is a myth that wants transclusion to be a hard concept to understand and manage, according to Angular.js. So, for today, we&#039;ll wear the hat of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/\" \/>\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:author\" content=\"https:\/\/www.facebook.com\/toubou.techblog\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-13T14:11:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T14:35:18+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=\"Thodoris Bais\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ThodorisBais\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thodoris Bais\" \/>\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.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/\"},\"author\":{\"name\":\"Thodoris Bais\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/f622d6017801d9aa8131e1ae69bbdd0d\"},\"headline\":\"Angular.js Transclusion Example\",\"datePublished\":\"2016-01-13T14:11:17+00:00\",\"dateModified\":\"2017-12-19T14:35:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/\"},\"wordCount\":1075,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/#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\/angular-js-transclusion-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/\",\"name\":\"Angular.js Transclusion Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2016-01-13T14:11:17+00:00\",\"dateModified\":\"2017-12-19T14:35:18+00:00\",\"description\":\"There is a myth that wants transclusion to be a hard concept to understand and manage, according to Angular.js. So, for today, we'll wear the hat of\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/#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\/angular-js-transclusion-example\/#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\":\"Angular.js Transclusion Example\"}]},{\"@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\/f622d6017801d9aa8131e1ae69bbdd0d\",\"name\":\"Thodoris Bais\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dc31ee119255c1e4aa4a4f34858284d907cce53d033584d86b0e3de46db7d0ff?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dc31ee119255c1e4aa4a4f34858284d907cce53d033584d86b0e3de46db7d0ff?s=96&d=mm&r=g\",\"caption\":\"Thodoris Bais\"},\"description\":\"Thodoris is an Oracle Certified Associate Java Programmer and currently works as a Junior Software Developer, for Intrasoft International S.A. He holds a diploma at Informatics &amp; Telecommunications Engineering and is interested in continuous development.\",\"sameAs\":[\"http:\/\/thodorisbais.blogspot.com\",\"https:\/\/www.facebook.com\/toubou.techblog\/\",\"https:\/\/instagram.com\/thodoris.bais\/\",\"https:\/\/www.linkedin.com\/pub\/thodoris-bais\/69\/6b7\/408\",\"https:\/\/x.com\/@ThodorisBais\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/thodoris-bais\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular.js Transclusion Example - Web Code Geeks - 2026","description":"There is a myth that wants transclusion to be a hard concept to understand and manage, according to Angular.js. So, for today, we'll wear the hat of","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\/angular-js-transclusion-example\/","og_locale":"en_US","og_type":"article","og_title":"Angular.js Transclusion Example - Web Code Geeks - 2026","og_description":"There is a myth that wants transclusion to be a hard concept to understand and manage, according to Angular.js. So, for today, we'll wear the hat of","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/toubou.techblog\/","article_published_time":"2016-01-13T14:11:17+00:00","article_modified_time":"2017-12-19T14:35:18+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":"Thodoris Bais","twitter_card":"summary_large_image","twitter_creator":"@ThodorisBais","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Thodoris Bais","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/"},"author":{"name":"Thodoris Bais","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/f622d6017801d9aa8131e1ae69bbdd0d"},"headline":"Angular.js Transclusion Example","datePublished":"2016-01-13T14:11:17+00:00","dateModified":"2017-12-19T14:35:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/"},"wordCount":1075,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/#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\/angular-js-transclusion-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/","name":"Angular.js Transclusion Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2016-01-13T14:11:17+00:00","dateModified":"2017-12-19T14:35:18+00:00","description":"There is a myth that wants transclusion to be a hard concept to understand and manage, according to Angular.js. So, for today, we'll wear the hat of","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-transclusion-example\/#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\/angular-js-transclusion-example\/#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":"Angular.js Transclusion Example"}]},{"@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\/f622d6017801d9aa8131e1ae69bbdd0d","name":"Thodoris Bais","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dc31ee119255c1e4aa4a4f34858284d907cce53d033584d86b0e3de46db7d0ff?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dc31ee119255c1e4aa4a4f34858284d907cce53d033584d86b0e3de46db7d0ff?s=96&d=mm&r=g","caption":"Thodoris Bais"},"description":"Thodoris is an Oracle Certified Associate Java Programmer and currently works as a Junior Software Developer, for Intrasoft International S.A. He holds a diploma at Informatics &amp; Telecommunications Engineering and is interested in continuous development.","sameAs":["http:\/\/thodorisbais.blogspot.com","https:\/\/www.facebook.com\/toubou.techblog\/","https:\/\/instagram.com\/thodoris.bais\/","https:\/\/www.linkedin.com\/pub\/thodoris-bais\/69\/6b7\/408","https:\/\/x.com\/@ThodorisBais"],"url":"https:\/\/www.webcodegeeks.com\/author\/thodoris-bais\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10003","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\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=10003"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10003\/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=10003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=10003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=10003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}