{"id":5022,"date":"2015-06-26T12:15:39","date_gmt":"2015-06-26T09:15:39","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5022"},"modified":"2017-12-19T16:44:19","modified_gmt":"2017-12-19T14:44:19","slug":"angular-js-ng-src-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/","title":{"rendered":"Angular.js ng-src Example"},"content":{"rendered":"

Hi there! Today we ‘re gonna see how to include images in our Angular applications.<\/p>\n

<\/p>\n

1. Introduction<\/h2>\n

<\/span>
\nIn plain HTML, we use the <img><\/code> tag to insert an image to our site. For example, this could be a sample image insertion:
\n 
\n 
\n 
\n[ulp id=’LXJcMJZXSsqGXYW8′]<\/p>\n

\r\n<img src=\"image.png\" alt=\"A sample image\" height=\"64\" width=\"64\">\r\n<\/pre>\n
Now, in terms of Angular.js and image insertion, one could easily claim, that we can similarly refer to an image, by using one of the standard Angular.js templates<\/a>. I suppose, everyone would go for the “markup” one, with which, we can use the double curly brace notation {{ }}<\/code> to bind expressions to elements.<\/p>\n
However, using Angular markup like {{hash}}<\/code> in the fore-mentioned form, within an HTML src<\/code> attribute doesn’t work well, as the browser will fetch from the URL with the literal text {{hash}}<\/code>, until Angular replaces the expression inside {{hash}}<\/code>. <\/p>\n
Angular’s ngSrc<\/code><\/a> directive solves this problem.<\/p>\n
The fore-mentioned “buggy” way to implement is, seems like:<\/p>\n
\r\n<img src=\"http:\/\/www.gravatar.com\/avatar\/{{hash}}\" alt=\"Sample avatar\"\/>\r\n<\/pre>\n
But the correct way to write it, is by using the ngSrc<\/code> directive:<\/p>\n
\r\n<img ng-src=\"http:\/\/www.gravatar.com\/avatar\/{{hash}}\" alt=\"Sample avatar\" \/>\r\n<\/pre>\n
2. Example’s concept<\/h2>\n
For our convenience, we ‘ll make use of an existing example concept, the one where I demonstrated the Angular.js JSON Fetching<\/a>. That is, assuming that we have to display some countries’ data in our page, we may also want to let the user view the country’s flag, too. So, we ‘ll use the ngSrc<\/code> directive in conjuction with a JSON file. This is not so close to the introduction section, but I ‘ll cover that usage, too.<\/p>\n
3. The Example<\/h3>\n
My previously linked example, according to JSON fetching, describes in depth how to load and “consume” a json file, into an Angular.js application, so I’ll quickly get into this.<\/p>\n
3.1 The JSON file<\/h3>\n
Here’s a minified version of our JSON file:<\/p>\n
countries.json<\/code><\/u><\/p>\n
\r\n[\r\n  {\r\n    \"name\": \"Greece\",\r\n    \"population\": 11000000,\r\n    \"flagURL\": \"\/\/upload.wikimedia.org\/wikipedia\/commons\/5\/5c\/Flag_of_Greece.svg\"\r\n  },\r\n  {\r\n    \"name\": \"United Kingdom\",\r\n    \"population\": 62348447,\r\n    \"flagURL\": \"\/\/upload.wikimedia.org\/wikipedia\/en\/a\/ae\/Flag_of_the_United_Kingdom.svg\"\r\n  },\r\n  {\r\n    \"name\": \"United States of America\",\r\n    \"population\": 312247000,\r\n    \"flagURL\": \"\/\/upload.wikimedia.org\/wikipedia\/en\/a\/a4\/Flag_of_the_United_States.svg\"\r\n  }\r\n]\r\n<\/pre>\n
That is, it includes one additional key, compared to Angular.js JSON Fetching<\/a>‘s one: the flagURL<\/code>.<\/p>\n
3.2 Fetching the JSON file<\/h2>\n
We can load a JSON file to an Angular app into the $scope<\/code><\/a> variable, by calling the $http<\/code><\/a> service. a core Angular service that facilitates communication with the remote HTTP servers via browser’s XMLHttpRequest<\/code><\/a> or via JSONP<\/code><\/a>.<\/p>\n
Practically, this means that you have to deploy your app in a web server, rather than executing it in a browser. For further details about this fact, please consult this post<\/a><\/b><\/i>.<\/p>\n
To do so, we ‘ll reuse the following code snippet from the existing example (JSON fetching), assuming that:<\/p>\n
    \n
  1. The Angular app is named as contryApp<\/code>.<\/li>\n
  2. Our controller is named as CountryCtrl<\/code>.<\/li>\n
  3. Our JSON file is named as countries.json<\/code> and is placed in app’s root folder.<\/li>\n<\/ol>\n
    \r\n$http.get('countries.json').success(function(data) {\r\n    $scope.countries = data;\r\n});\r\n<\/pre>\n
    3.3 Displaying the JSON file<\/h3>\n
    Keeping a similar concept as in the Angular.js JSON Fetching Example<\/a> let’s see how to display the country’s flag, using the ngSrc<\/code> directive:<\/p>\n
    index.html<\/code><\/u><\/p>\n
    \r\n<html ng-app=\"countryApp\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>Angular.js Example<\/title>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.4\/css\/bootstrap.min.css\">\r\n    <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.4.0\/angular.min.js\"><\/script>\r\n    <script>\r\n      var countryApp = angular.module('countryApp', []);\r\n      countryApp.controller('CountryCtrl', function ($scope, $http){\r\n        $http.get('countries.json').success(function(data) {\r\n          $scope.countries = data;\r\n        });\r\n      });\r\n    <\/script>\r\n  <\/head>\r\n  <body ng-controller=\"CountryCtrl\">\r\n    <div class=\"container\">\r\n    <h2>Angular.js ng-src Example<\/h2>\r\n    <table class=\"table table-striped\">\r\n      <tr>\r\n        <th>Country<\/th>\r\n        <th>Population<\/th>\r\n        <th>Flag<\/th>\r\n      <\/tr>\r\n      <tr ng-repeat=\"country in countries\">\r\n        <td>{{country.name}}<\/td>\r\n        <td>{{country.population}}<\/td>\r\n        <td>\r\n          <img ng-src=\"{{country.flagURL}}\" width=\"100\">\r\n        <\/td>\r\n      <\/tr>\r\n    <\/table>\r\n    <\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
    Lines 1, 7-14 and 16, fulfill the assumptions made in JSON fetching<\/a> section. Let’s use an HTML table to group the JSON’s data properly. Lines 21-23 define the table’s headers for the country name, population and flag.<\/p>\n
    That is, we want to divide each country\u2019s data, into name, population and flag, in order to display each one in the corresponding table\u2019s column. For this purpose, we ‘ll use the ngRepeat<\/code><\/a> directive, which instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current location item, and $index<\/code> is set to the item index or key.<\/p>\n
    When it comes to our case, in order to repeatedly loop over each country, we have to assume that each country is a table row:<\/p>\n
    \r\n<tr ng-repeat=\"country in countries>\r\n\r\n<\/tr>\r\n<\/pre>\n
    So, now that the country processed each time can be accessed from the country<\/code> variable, it’s easier to understand that lines 26-30 parse each country’s name, population and flag to the corresponding table column.<\/p>\n
    In addition to what is mentioned in the Introduction<\/a> section of this example, the official documentation for the ngSrc<\/code><\/a>, states that the directive can accept any argument of type template<\/code>. That is, it accepts any string which can contain {{ }}<\/code> markup.<\/p>\n
    4. Demo<\/h2>\n
    Let’s run it in a local server<\/a>.  For this example, the app can be accessed from a browser in following url:<\/i> http:\/\/localhost:8080\/angularjs_ngsrc\/<\/code><\/p>\n
    \"sad\"<\/a>
    Figure 1. App screenshot<\/figcaption><\/figure>\n
    5. Download<\/h2>\n
    This was an example of Angular.js ng-src.<\/p>\n
    Download<\/strong>
    You can download the full source code of this example here :     angularjs_ngsrc.zip<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
    Hi there! Today we ‘re gonna see how to include images in our Angular applications. 1. Introduction In plain HTML, we use the <img> tag to insert an image to our site. For example, this could be a sample image insertion:       [ulp id=’LXJcMJZXSsqGXYW8′] <img src=”image.png” alt=”A sample image” height=”64″ width=”64″> Now, in …<\/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":[40],"class_list":["post-5022","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js","tag-json"],"yoast_head":"\nAngular.js ng-src Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Hi there! Today we 're gonna see how to include images in our Angular applications. 1. Introduction In plain HTML, we use the <img> tag to insert an\" \/>\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-ng-src-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular.js ng-src Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Hi there! Today we 're gonna see how to include images in our Angular applications. 1. Introduction In plain HTML, we use the <img> tag to insert an\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-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=\"2015-06-26T09:15:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T14:44:19+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-ng-src-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/\"},\"author\":{\"name\":\"Thodoris Bais\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/f622d6017801d9aa8131e1ae69bbdd0d\"},\"headline\":\"Angular.js ng-src Example\",\"datePublished\":\"2015-06-26T09:15:39+00:00\",\"dateModified\":\"2017-12-19T14:44:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/\"},\"wordCount\":714,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"keywords\":[\"JSON\"],\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/\",\"name\":\"Angular.js ng-src Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2015-06-26T09:15:39+00:00\",\"dateModified\":\"2017-12-19T14:44:19+00:00\",\"description\":\"Hi there! Today we 're gonna see how to include images in our Angular applications. 1. Introduction In plain HTML, we use the <img> tag to insert an\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-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-ng-src-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 ng-src 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 & 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 ng-src Example - Web Code Geeks - 2026","description":"Hi there! Today we 're gonna see how to include images in our Angular applications. 1. Introduction In plain HTML, we use the <img> tag to insert an","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-ng-src-example\/","og_locale":"en_US","og_type":"article","og_title":"Angular.js ng-src Example - Web Code Geeks - 2026","og_description":"Hi there! Today we 're gonna see how to include images in our Angular applications. 1. Introduction In plain HTML, we use the <img> tag to insert an","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-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":"2015-06-26T09:15:39+00:00","article_modified_time":"2017-12-19T14:44:19+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-ng-src-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/"},"author":{"name":"Thodoris Bais","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/f622d6017801d9aa8131e1ae69bbdd0d"},"headline":"Angular.js ng-src Example","datePublished":"2015-06-26T09:15:39+00:00","dateModified":"2017-12-19T14:44:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/"},"wordCount":714,"commentCount":3,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","keywords":["JSON"],"articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/","name":"Angular.js ng-src Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2015-06-26T09:15:39+00:00","dateModified":"2017-12-19T14:44:19+00:00","description":"Hi there! Today we 're gonna see how to include images in our Angular applications. 1. Introduction In plain HTML, we use the <img> tag to insert an","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-ng-src-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-ng-src-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 ng-src 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 & 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\/5022","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=5022"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5022\/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=5022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=5022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=5022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}