{"id":6304,"date":"2015-08-05T12:15:38","date_gmt":"2015-08-05T09:15:38","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6304"},"modified":"2015-08-03T17:35:24","modified_gmt":"2015-08-03T14:35:24","slug":"magic-parse-service-angularjs","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/","title":{"rendered":"Magic $parse service in AngularJS"},"content":{"rendered":"

AngularJS has a useful, but less documented\u00a0$parse service<\/a> which is shortly described in the Angular’s docu as “converts Angular expression into a function”. In this post, I will explain what this description means and show explicit and implicit usages of\u00a0$parse<\/strong>. Furthermore, we will see the differences to the Angular’s\u00a0$interpolate<\/strong> service and\u00a0$eval<\/strong> method.<\/p>\n

Implicitly used $parse<\/b><\/p>\n

The\u00a0$parse<\/strong> compiles an expression to a function which can be then invoked with a\u00a0context<\/strong> and\u00a0locals<\/strong> in order to retrieve the expression’s value. We can imagine this function as a pre-compiled expression. The first parameter is\u00a0context<\/strong> – this is an object any expressions embedded in the strings are evaluated against (typically a scope object). The second parameter is\u00a0locals<\/strong> – this is an JavaScript object with local variables, useful for overriding values in context. I’ve created a simple\u00a0plunker<\/a> to demonstrate the simple usage.<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\" \/>\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\r\n  <\/head>\r\n  <body ng-app=\"app\">\r\n    <h1>Magical $parse service<\/h1>\r\n    \r\n    <div ng-controller=\"ParseController as vm\">{{vm.parsedMsg}}<\/div>\r\n    \r\n    <script src=\"https:\/\/code.angularjs.org\/1.4.3\/angular.js\"><\/script>\r\n    <script src=\"app.js\"><\/script>\r\n  <\/body>\r\n<\/html><\/pre>\n
In the HTML we output the controller’s variable\u00a0parsedMsg<\/strong> which is created in the\u00a0app.js<\/strong> as follows:<\/p>\n
(function() {\r\n  angular.module('app', []).controller('ParseController', ParseController);\r\n\r\n  function ParseController($scope, $parse) {\r\n    this.libs = {};\r\n    this.libs.angular = {\r\n      version: '1.4.3'\r\n    };\r\n\r\n    var template = $parse(\"'This example uses AngularJS ' + libs.angular.version\");\r\n    this.parsedMsg = template(this);\r\n  }\r\n})();<\/pre>\n
As you can see, the expression\u00a0‘This example uses AngularJS ‘ + libs.angular.version<\/strong> gets parsed and assigned to the variable template. The template is a function which is invoked with
\nthis<\/strong> object as context. The\u00a0this<\/strong> object containes the value of\u00a0libs.angular.version<\/strong> (nested objects). This value is used when evaluating the pre-compiled expression. The result is saved in
\nthis.parsedMsg<\/strong> and shown in the HTML.<\/p>\n
\"Plunker1\"<\/a>
\nIt is important to understand that\u00a0$parse<\/strong> can be invoked once and its result (pre-compiled expression) can be used multiple times with different\u00a0context<\/strong> (and\u00a0locals<\/strong>). The next\u00a0plunker<\/a> demonstrates the usage of just one pre-compiled expression with different\u00a0locales<\/strong>. The HTML part:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\" \/>\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\r\n  <\/head>\r\n  <body ng-app=\"app\">\r\n    <h1>Magical $parse service<\/h1>\r\n    \r\n    <div ng-controller=\"ParseController as vm\" ng-bind-html=\"vm.parsedMsg\"><\/div>\r\n    \r\n    <script src=\"https:\/\/code.angularjs.org\/1.4.3\/angular.js\"><\/script>\r\n    <script src=\"https:\/\/code.angularjs.org\/1.4.3\/angular-sanitize.js\"><\/script>\r\n    <script src=\"app.js\"><\/script>\r\n  <\/body>\r\n<\/html><\/pre>\n
The JavaScript part:<\/p>\n
(function() {\r\n  angular.module('app', [\"ngSanitize\"]).controller('ParseController', ParseController);\r\n\r\n  function ParseController($scope, $parse) {\r\n    this.libs = ['angular.js', 'angular-sanitize.js', 'bootstrap.css'];\r\n\r\n    var template = $parse(\"libs[i]\")\r\n\r\n    var output = '';\r\n    for (var i = 0; i < this.libs.length; i++) {\r\n      output = output + '<li>' + template(this, {i: i}) + '<\/li>';\r\n    }\r\n\r\n    this.parsedMsg = 'The project uses <ul>' + output + '<\/ul>';\r\n  }\r\n})();<\/pre>\n
As you can see we pass\u00a0{i: i}<\/strong> repeatedly as the second parameter, so that the expression\u00a0libs[i]<\/strong> is always evaluated with the current value
\ni<\/strong>. That means\u00a0libs[0]<\/strong>,\u00a0libs[1]<\/strong>, etc. The result looks like as follows:<\/p>\n
\"Plunker2\"<\/a>
\nThere are some cool things you can do with\u00a0$parse<\/strong>. I would like to only list three of them.<\/p>\n
1) If the expression is assignable, the returned function (pre-compiled expression) will have an assign property. The assign property is a function that can be used to change the expression value on the given context, e.g.\u00a0$scope<\/strong>. Example:<\/p>\n
\u00a0\r\n$parse('name').assign($scope, 'name2');\r\n<\/pre>\n
In the example, the value name on the\u00a0$scope<\/strong> has been changed to\u00a0name2<\/strong>.<\/p>\n
2) If we have an object with properties that might be null, no JS errors will be thrown when using\u00a0$parse<\/strong>. Instead of that, the result is set to\u00a0undefined<\/strong>. In the example above, we had the property\u00a0libs.angular.version<\/strong>. The result of<\/p>\n
\u00a0\r\nvar version = $parse('libs.angular.version')(this);\r\n<\/pre>\n
is\u00a0version = 1.4.3<\/strong>. If we would use a non exisiting property in the expression, e.g.<\/p>\n
\u00a0\r\nvar version = $parse('libs.ember.version')(this);\r\n<\/pre>\n
the result would be\u00a0version = undefined<\/strong>. AngularJS doesn’t throw an exception.<\/p>\n
3) Theoretically you can send any logic from backend to the client as string and evaluate the parsed string on the client. Example:<\/p>\n
var backendString = 'sub(add(a, 1), b)';\r\n\r\nvar math = {\r\n  add: function(a, b) {return a + b;},\r\n  sub: function(a, b) {return a - b;}\r\n};\r\n\r\nvar data = {\r\n  a: 5,\r\n  b: 2\r\n};\r\n\r\nvar result = $parse(backendString)(math, data); \/\/ 4<\/pre>\n
Explicitly used $parse<\/b><\/p>\n
AngularJS also uses\u00a0$parse<\/strong> internally. The next example was taken from a book and slightly modified by me. It demonstrates a color picker with four sliders (three for colors and one for opacity).<\/p>\n
\"Plunker3\"<\/a>
\nThe whole code: the HTML page, the color-picker directive and\u00a0app.js<\/strong> are demonstrated in my last\u00a0plunker<\/a>. The page uses the color-picker directive:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\" \/>\r\n    <meta content=\"IE=edge\" http-equiv=\"X-UA-Compatible\" \/>\r\n  <\/head>\r\n  <body ng-app=\"app\">\r\n    <h1>Magical $parse service<\/h1>\r\n    \r\n    <div ng-controller=\"MainController as vm\">\r\n      <color-picker init-r=\"255\"\r\n                    init-g=\"0\"\r\n                    init-b=\"0\"\r\n                    init-a=\"1.0\"\r\n                    on-change=\"vm.onColorChange(r,g,b,a)\">\r\n      <\/color-picker>\r\n    <\/div>\r\n    \r\n    <script src=\"https:\/\/code.angularjs.org\/1.4.3\/angular.js\"><\/script>\r\n    <script src=\"app.js\"><\/script>\r\n  <\/body>\r\n<\/html><\/pre>\n
The directive’s template\u00a0colorPickerTemplate.html<\/strong> renders four input sliders, a live preview and current colors and opacity.<\/p>\n
R:<input type=\"range\"\r\n         min=\"0\" max=\"255\" step=\"1\"\r\n         ng-model=\"r\">\r\n         <br>\r\nG:<input type=\"range\"\r\n         min=\"0\" max=\"255\" step=\"1\"\r\n         ng-model=\"g\">\r\n         <br>\r\nB:<input type=\"range\"\r\n         min=\"0\" max=\"255\" step=\"1\"\r\n         ng-model=\"b\">\r\n         <br>\r\nA:<input type=\"range\"\r\n         min=\"0\" max=\"1\" step=\"0.01\"\r\n         ng-model=\"a\">\r\n\r\n<div style=\"width: 300px; height: 100px; margin-top:10px;\r\n            background-color: rgba({{ r }}, {{ g }}, {{ b }}, {{ a }});\">\r\n<\/div>\r\n{{ r }}, {{ g }}, {{ b }}, {{ a }}<\/pre>\n
The JavaScript part links all together. Whenever a color or opacity is changed, the Angular’s\u00a0$log<\/strong> service logs current colors and opacity in the browser dev. console. The current colors and opacity are also shown permanently as mentioned above.<\/p>\n
(function() {\r\n  angular.module('app', [])\r\n    .controller('MainController', MainController)\r\n    .directive('colorPicker', colorPickerDirective);\r\n\r\n  function MainController($log) {\r\n    this.onColorChange = function(r, g, b, a) {\r\n      $log.log('onColorChange', r, g, b, a);\r\n    };\r\n  }\r\n\r\n  function colorPickerDirective() {\r\n    return {\r\n        scope: {\r\n          r:        '@initR',\r\n          g:        '@initG',\r\n          b:        '@initB',\r\n          a:        '@initA',\r\n          onChange: '&'\r\n        },\r\n        restrict: 'E',\r\n        templateUrl: 'colorPickerTemplate.html',\r\n        link: function(scope) {\r\n          ['r', 'g', 'b', 'a'].forEach(function(value) {\r\n              scope.$watch(value, function(newValue, oldValue) {\r\n                  if (newValue !== oldValue) {\r\n                      if (angular.isFunction(scope.onChange)) {\r\n                          scope.onChange({\r\n                            'r': scope.r,\r\n                            'g': scope.g,\r\n                            'b': scope.b,\r\n                            'a': scope.a\r\n                          });\r\n                      }\r\n                  }\r\n              });\r\n          });\r\n        }\r\n    };\r\n  }\r\n})();<\/pre>\n
But stop, where is the magic\u00a0$parse<\/strong> here? The directive defines a parameter for an\u00a0onchange<\/strong> callback via\u00a0onChange<\/strong>: ‘&’<\/strong>. Behind the scenes, AngularJS parses the passed onchange string, in this case\u00a0vm.onColorChange(r,g,b,a)<\/strong>, and creates a function (discussed pre-compiled expression) which can be invoked with the desired\u00a0context<\/strong> and\u00a0locales<\/strong>. In the directive, we invoke this function with current values for colors\u00a0r, g, b<\/strong> and opacity\u00a0a<\/strong>.<\/p>\n
scope.onChange({\r\n    'r': scope.r,\r\n    'g': scope.g,\r\n    'b': scope.b,\r\n    'a': scope.a\r\n});<\/pre>\n
Relation to $interpolate and $eval<\/b><\/p>\n
$eval<\/strong> is a method on a scope. It executes an expression on the current scope and returns the result. Example:<\/p>\n
scope.a = 1;\r\nscope.b = 2;\r\n \r\nscope.$eval('a+b'); \/\/ result is 3<\/pre>\n
Internally, it uses\u00a0$parse<\/strong> for their part.<\/p>\n
$eval: function(expr, locals) {\r\n    return $parse(expr)(this, locals);\r\n}<\/pre>\n
Note, that the\u00a0$eva<\/strong>l method can not precompile expressions and be used repeatedly. The\u00a0$parse<\/strong>, in contrast, can be invoked once in one place and its result can then be used repeatedly elsewhere. We have seen that in the second plunker. Here is another simple example to emphasize the difference to\u00a0$eval<\/strong>:<\/p>\n
var parsedExpression = $parse(...);\r\n\r\nvar scope1 = $scope.$new();\r\nvar scope2 = $scope.$new();\r\n\r\n...\r\n\r\nvar result1 = parsedExpression(scope1);\r\nvar result2 = parsedExpression(scope2);<\/pre>\n
There is another high level service –\u00a0$interpolate<\/strong>. By means of\u00a0$interpolate<\/strong> you can do on-the-fly templating like well-known template engines\u00a0Handlebars<\/a> or\u00a0Hogan<\/a> do that. ES6 has similar\u00a0template strings<\/a> too. But take a look at one\u00a0$interpolate<\/strong> example.<\/p>\n
(function() {\r\n  angular.module('app', []).controller('InterpolateController', InterpolateController);\r\n\r\n  function InterpolateController($scope, $interpolate) {\r\n    var template = $interpolate('Book {{title}} is published by {{publisher | uppercase}}');\r\n\r\n    var bookData1 = {title: 'PrimeFaces Cookbook', publisher: 'Packt'};\r\n    var bookData2 = {title: 'Spring in Action', publisher: 'Manning'};\r\n\r\n    \/\/ execute the function \"template\" and pass it data objects to force interpolation\r\n    var bookInfo1 = template(bookData1);\r\n    var bookInfo2 = template(bookData2);\r\n\r\n    \/\/ the result:\r\n    \/\/ bookInfo1 = \"PrimeFaces Cookbook is published by PACKT\"\r\n    \/\/ bookInfo1 = \"Spring in Action is published by MANNING\"\r\n  }\r\n})();<\/pre>\n
As you can see, the\u00a0$interpolate<\/strong> service takes a string and returns a function which is a compiled template. Expressions in the passed string may have all allowable Angular’s expression syntax. E.g. a pipe with filter as in the example\u00a0{{publisher | uppercase}<\/strong>}. The function can be called again and again with different data objects. The\u00a0$interpolate<\/strong> service uses\u00a0$parse<\/strong> internally to evaluate individual expressions against the scope. In this regard, the\u00a0$interpolate<\/strong> service is normally used as a string-based template language for strings containing multiple expressions. In contrast to\u00a0$parse<\/strong>, the\u00a0$interpolate<\/strong> is read only.<\/p>\n
\n\n\n\n
Reference: <\/span><\/td>\nMagic parse service in AngularJS<\/a> from our WCG partner<\/a> Oleg Varaksin at the Thoughts on software development<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
AngularJS has a useful, but less documented\u00a0$parse service which is shortly described in the Angular’s docu as “converts Angular expression into a function”. In this post, I will explain what this description means and show explicit and implicit usages of\u00a0$parse. Furthermore, we will see the differences to the Angular’s\u00a0$interpolate service and\u00a0$eval method. Implicitly used $parse …<\/p>\n","protected":false},"author":15,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-6304","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"\nMagic $parse service in AngularJS - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"AngularJS has a useful, but less documented\u00a0$parse service which is shortly described in the Angular's docu as "converts Angular expression into a\" \/>\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\/magic-parse-service-angularjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magic $parse service in AngularJS - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"AngularJS has a useful, but less documented\u00a0$parse service which is shortly described in the Angular's docu as "converts Angular expression into a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/\" \/>\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=\"2015-08-05T09:15:38+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=\"Oleg Varaksin\" \/>\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=\"Oleg Varaksin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 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\/magic-parse-service-angularjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/\"},\"author\":{\"name\":\"Oleg Varaksin\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/907f82ccdf11dbd8f7b6af2c1024d712\"},\"headline\":\"Magic $parse service in AngularJS\",\"datePublished\":\"2015-08-05T09:15:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/\"},\"wordCount\":919,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/#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\/magic-parse-service-angularjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/\",\"name\":\"Magic $parse service in AngularJS - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2015-08-05T09:15:38+00:00\",\"description\":\"AngularJS has a useful, but less documented\u00a0$parse service which is shortly described in the Angular's docu as \\\"converts Angular expression into a\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/#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\/magic-parse-service-angularjs\/#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\":\"Magic $parse service in AngularJS\"}]},{\"@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\/907f82ccdf11dbd8f7b6af2c1024d712\",\"name\":\"Oleg Varaksin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fda1ce47105421f7a352a13dbefec14ab59d59ffae99c6c3002e5841578979d3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fda1ce47105421f7a352a13dbefec14ab59d59ffae99c6c3002e5841578979d3?s=96&d=mm&r=g\",\"caption\":\"Oleg Varaksin\"},\"sameAs\":[\"http:\/\/ovaraksin.blogspot.com\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/oleg-varaksin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Magic $parse service in AngularJS - Web Code Geeks - 2026","description":"AngularJS has a useful, but less documented\u00a0$parse service which is shortly described in the Angular's docu as \"converts Angular expression into a","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\/magic-parse-service-angularjs\/","og_locale":"en_US","og_type":"article","og_title":"Magic $parse service in AngularJS - Web Code Geeks - 2026","og_description":"AngularJS has a useful, but less documented\u00a0$parse service which is shortly described in the Angular's docu as \"converts Angular expression into a","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2015-08-05T09:15:38+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":"Oleg Varaksin","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Oleg Varaksin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/"},"author":{"name":"Oleg Varaksin","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/907f82ccdf11dbd8f7b6af2c1024d712"},"headline":"Magic $parse service in AngularJS","datePublished":"2015-08-05T09:15:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/"},"wordCount":919,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/#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\/magic-parse-service-angularjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/","name":"Magic $parse service in AngularJS - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2015-08-05T09:15:38+00:00","description":"AngularJS has a useful, but less documented\u00a0$parse service which is shortly described in the Angular's docu as \"converts Angular expression into a","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/magic-parse-service-angularjs\/#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\/magic-parse-service-angularjs\/#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":"Magic $parse service in AngularJS"}]},{"@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\/907f82ccdf11dbd8f7b6af2c1024d712","name":"Oleg Varaksin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fda1ce47105421f7a352a13dbefec14ab59d59ffae99c6c3002e5841578979d3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fda1ce47105421f7a352a13dbefec14ab59d59ffae99c6c3002e5841578979d3?s=96&d=mm&r=g","caption":"Oleg Varaksin"},"sameAs":["http:\/\/ovaraksin.blogspot.com\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/oleg-varaksin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6304","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\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=6304"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6304\/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=6304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=6304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=6304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}