{"id":1113,"date":"2014-10-10T04:00:00","date_gmt":"2014-10-10T01:00:00","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1113"},"modified":"2014-10-10T18:53:39","modified_gmt":"2014-10-10T15:53:39","slug":"twitter-bootstrap-navbar-as-angularjs-component","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/","title":{"rendered":"Twitter Bootstrap Navbar as AngularJS Component"},"content":{"rendered":"

You all know Twitter Bootstrap<\/a>, don\u2019t you? It\u2019s the awesome library to make your web application looks pretty good without spending many hours on CSS. We are using Bootstrap based design in our current project that also uses AngularJS and as we are planning to have many new pages, we decided that\u2019s the earlier we introduce some components to our UI the better. And, what shouldn\u2019t be a surprise, navigation bar natually became the first candidate.<\/p>\n

Overview<\/h2>\n

So in this post I am going to show how externalize Twitter Bootstrap Navbar into a separate, flexible AngularJS component. All source code is available in my GitHub repository<\/a> , so everything should be easy to follow and repeat.<\/p>\n

Basic setup<\/h2>\n

To start from the basics, I\u2019ve prepared three pages that use the same navigation bar. These pages will soon become our super simple web application using AngularJS:<\/p>\n

\"navbar_angularjs1\"<\/a><\/p>\n

Next step will be adding AngularJS and converting three pages into one small application. This is done in this commit<\/a>. And after that we are ready to start working on our Navbar component.<\/p>\n

Problem<\/h2>\n

On each page we have very similar html fragment rendering navbar element.<\/p>\n

\r\n<div class="navbar navbar-inverse">\r\n    <div class="navbar-inner">\r\n        <div class="container">\r\n            <a class="brand">Example App<\/a>\r\n\r\n            <div class="nav-collapse">\r\n                <ul class="nav">\r\n                    <li class="active"><a href="home.html">Home<\/a><\/li>\r\n                    <li><a href="second.html">Second<\/a><\/li>\r\n                    <li><a href="third.html">Third<\/a><\/li>\r\n                <\/ul>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\n
The only difference is in where class active<\/em> which highlights link is located. And every time we see such repetition, our DRY detector should start ringing and don\u2019t stop until we do something about it.<\/p>\n
Simple directive<\/h2>\n
For a start, we will move this code fragment into a AngularJS directive. At first, it will be only a \u201cdumb\u201d piece of code that just renders the same html in different places. All html from the listing above is now located in the components\/bootstrapNavbar.html file.<\/p>\n
Next thing we need is a directive declaration in JS file:<\/p>\n
angular.module('navbarapp', ['controllers'])\r\n  .directive('bootstrapNavbar', function() { \/\/ (1)\r\n  return {\r\n    restrict: 'E',         \/\/ (2)\r\n    replace: true,         \/\/ (3)\r\n    transclude: true,      \/\/ (4)\r\n    templateUrl: 'bootstrapNavbar.html'    \/\/ (5)\r\n  }});\r\n;<\/pre>\n
What happens here:<\/p>\n
    \n
  1. we declare directive, please keep in mind that name of directive you use in the code will be boostrap-navbar, camelCase is transformed into \u2013 character.<\/li>\n
  2. restrict: E \u2013 means that directive is used as an element, there are other options: C-class, A-attribute, more on docs<\/a><\/li>\n
  3. replace: true \u2013 means that markup from template will completely replace directive element in the page markup<\/li>\n
  4. transclude: true \u2013 what it means\u2026 you better tell me, I am not able to describe it more vaguely that it is done in the docs<\/a> ;)<\/li>\n
  5. templateUrl \u2013 file where we store our template content<\/li>\n<\/ol>\n
    After that we should replace navbar html markup on every page with something like:<\/p>\n
    <bootstrap-navbar><\/bootstrap-navbar><\/pre>\n
    Now it\u2019s high time to test it. Unfortunately there is one problem. Security policy does not allow browser to execute XHR(Ajax) calls from html file stored on our disk. So we have to setup lightweight httpServer to serve our files to browser. You can do it using Jetty or anything similar. I tried one from Python and it worked without issues. So basically navigate to directory where all files are stored, execute:<\/p>\n
    python -m SimpleHTTPServer 9000<\/pre>\n
    and then open your browser using address http:\/\/localhost:9000\/home.html<\/a>. You should see the same page as before, but now it is using our directive.<\/p>\n
    Flexibility++<\/h2>\n
    So we have our first directive, yay! But its IQ is not that high. If you navigate to Second and Third Page, you will notice that it always renders link to Home Page as active, which is not exactly true for all pages. And in this paragraph we will try to make it smarter.<\/p>\n
    At first, let\u2019s add attribute current-tab<\/em> to our directive usages:<\/p>\n
    <bootstrap-navbar current-tab='Second'><\/bootstrap-navbar><\/pre>\n
    Passed value must be the same as link name in the navbar, so in our example app it should be either: Home, Second or Third.<\/p>\n
    Next step is to prepare our template file for easy modification. Because we will use jQuery selectors to find link to activate, we will remove active class and also add an id attribute to ul<\/em> element to make it easier to locate with selector:<\/p>\n
    \r\n<div class="navbar navbar-inverse">\r\n    <div class="navbar-inner">\r\n        <div class="container">\r\n            <a class="brand">Example App<\/a>\r\n\r\n            <div class="nav-collapse">\r\n                <ul class="nav" id="navigation-tabs">     <!-- id added here -->\r\n                    <li><a href="..\/home.html">Home<\/a><\/li>   <!-- removed class='active' -->\r\n                    <li><a href="..\/second.html">Second<\/a><\/li>\r\n                    <li><a href="..\/third.html">Third<\/a><\/li>\r\n                <\/ul>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\n
    Core logic<\/strong><\/h2>\n
    Now the last thing we have to do is some jQuery selector magic with little addition of AngularJS magic :)<\/p>\n
    Angular directives have function compile<\/em> which allows to alter directive template markup, so we will use it here. What this function receives is value of parameters defined on the component usage in our pages, so basically we have an access to all attributes that are declared where our navbar component is used, specifically our current-tab<\/em> attribute (again transformed to currentTab<\/em> inside JS file). So when we know which link should be highlighted, jQuery selectors come to do the actual job:<\/p>\n
    angular.module('navbarapp', ['controllers'])\r\n  .directive('bootstrapNavbar', function() {\r\n  return {\r\n    restrict: 'E',\r\n    replace: true,\r\n    transclude: true,\r\n    templateUrl: 'components\/bootstrapNavbar.html',\r\n    compile: function(element, attrs) {  \/\/ (1)\r\n      var li, liElements, links, index, length;\r\n\r\n      liElements = $(element).find('#navigation-tabs li');   \/\/ (2)\r\n      for (index = 0, length = liElements.length; index < length; index++) {\r\n        li = liElements[index];\r\n        links = $(li).find('a');  \/\/ (3)\r\n        if (links[0].textContent === attrs.currentTab) $(li).addClass('active'); \/\/ (4)\r\n      }\r\n    }\r\n  }});\r\n;<\/pre>\n
    So what we do here:<\/p>\n
      \n
    1. define compile function that has passed two things, element on which it is called (template markup in our case) and attrs, an object with all attributes declared where our directive was used.<\/li>\n
    2. select all list items from #navigation-tabs node<\/li>\n
    3. find all links there, it will be only one<\/li>\n
    4. if text content of link is equal to currentTab attribute we know that this is the link to highlight, so we simply add proper CSS class there<\/li>\n<\/ol>\n
      It\u2019s the simplest working solution. Of course we could add some error checking, but I wanted to show easy to follow approach to introducing flexible components to AngularJS applications.<\/p>\n
      Summary<\/h2>\n
      In this post I tried to show how with a few simple steps we could apply DRY rule to our html markup in AngularJS application. And as your application grow, you will probably find more and more places where html is duplicated making it a good candidate to convert it into component directive.<\/p>\n
      \n\n\n\n
      Reference: <\/span><\/td>\nTwitter Bootstrap Navbar as AngularJS Component<\/a> from our WCG partner<\/a> Tomasz Dziurko at the Code Hard Go Pro<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      You all know Twitter Bootstrap, don\u2019t you? It\u2019s the awesome library to make your web application looks pretty good without spending many hours on CSS. We are using Bootstrap based design in our current project that also uses AngularJS and as we are planning to have many new pages, we decided that\u2019s the earlier we …<\/p>\n","protected":false},"author":9,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-1113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"\nTwitter Bootstrap Navbar as AngularJS Component - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"You all know Twitter Bootstrap, don\u2019t you? It\u2019s the awesome library to make your web application looks pretty good without spending many hours on CSS. We\" \/>\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\/twitter-bootstrap-navbar-as-angularjs-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Twitter Bootstrap Navbar as AngularJS Component - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"You all know Twitter Bootstrap, don\u2019t you? It\u2019s the awesome library to make your web application looks pretty good without spending many hours on CSS. We\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/\" \/>\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-10-10T01:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-10-10T15:53:39+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=\"Tomasz Dziurko\" \/>\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=\"Tomasz Dziurko\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 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\/twitter-bootstrap-navbar-as-angularjs-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/\"},\"author\":{\"name\":\"Tomasz Dziurko\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/5d5c74963e7f64b33d8cf3c9567a66a3\"},\"headline\":\"Twitter Bootstrap Navbar as AngularJS Component\",\"datePublished\":\"2014-10-10T01:00:00+00:00\",\"dateModified\":\"2014-10-10T15:53:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/\"},\"wordCount\":1288,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/#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\/twitter-bootstrap-navbar-as-angularjs-component\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/\",\"name\":\"Twitter Bootstrap Navbar as AngularJS Component - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2014-10-10T01:00:00+00:00\",\"dateModified\":\"2014-10-10T15:53:39+00:00\",\"description\":\"You all know Twitter Bootstrap, don\u2019t you? It\u2019s the awesome library to make your web application looks pretty good without spending many hours on CSS. We\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/#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\/twitter-bootstrap-navbar-as-angularjs-component\/#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\":\"Twitter Bootstrap Navbar as AngularJS Component\"}]},{\"@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\/5d5c74963e7f64b33d8cf3c9567a66a3\",\"name\":\"Tomasz Dziurko\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4536ab9b39bda1ff3eadf8fef1745ba7b5e25b01a37900598b1b9f4285d0176e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4536ab9b39bda1ff3eadf8fef1745ba7b5e25b01a37900598b1b9f4285d0176e?s=96&d=mm&r=g\",\"caption\":\"Tomasz Dziurko\"},\"sameAs\":[\"http:\/\/tomaszdziurko.pl\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/tomasz-dziurko\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Twitter Bootstrap Navbar as AngularJS Component - Web Code Geeks - 2026","description":"You all know Twitter Bootstrap, don\u2019t you? It\u2019s the awesome library to make your web application looks pretty good without spending many hours on CSS. We","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\/twitter-bootstrap-navbar-as-angularjs-component\/","og_locale":"en_US","og_type":"article","og_title":"Twitter Bootstrap Navbar as AngularJS Component - Web Code Geeks - 2026","og_description":"You all know Twitter Bootstrap, don\u2019t you? It\u2019s the awesome library to make your web application looks pretty good without spending many hours on CSS. We","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2014-10-10T01:00:00+00:00","article_modified_time":"2014-10-10T15:53:39+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":"Tomasz Dziurko","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Tomasz Dziurko","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/"},"author":{"name":"Tomasz Dziurko","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/5d5c74963e7f64b33d8cf3c9567a66a3"},"headline":"Twitter Bootstrap Navbar as AngularJS Component","datePublished":"2014-10-10T01:00:00+00:00","dateModified":"2014-10-10T15:53:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/"},"wordCount":1288,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/#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\/twitter-bootstrap-navbar-as-angularjs-component\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/","name":"Twitter Bootstrap Navbar as AngularJS Component - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2014-10-10T01:00:00+00:00","dateModified":"2014-10-10T15:53:39+00:00","description":"You all know Twitter Bootstrap, don\u2019t you? It\u2019s the awesome library to make your web application looks pretty good without spending many hours on CSS. We","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/twitter-bootstrap-navbar-as-angularjs-component\/#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\/twitter-bootstrap-navbar-as-angularjs-component\/#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":"Twitter Bootstrap Navbar as AngularJS Component"}]},{"@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\/5d5c74963e7f64b33d8cf3c9567a66a3","name":"Tomasz Dziurko","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4536ab9b39bda1ff3eadf8fef1745ba7b5e25b01a37900598b1b9f4285d0176e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4536ab9b39bda1ff3eadf8fef1745ba7b5e25b01a37900598b1b9f4285d0176e?s=96&d=mm&r=g","caption":"Tomasz Dziurko"},"sameAs":["http:\/\/tomaszdziurko.pl\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/tomasz-dziurko\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1113","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=1113"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1113\/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=1113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=1113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=1113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}