{"id":16051,"date":"2017-02-09T12:15:06","date_gmt":"2017-02-09T10:15:06","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=16051"},"modified":"2017-02-07T12:50:18","modified_gmt":"2017-02-07T10:50:18","slug":"angularjs-tutorial-angularjs-controller-syntax","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/","title":{"rendered":"AngularJS Tutorial: AngularJS Controller As Syntax"},"content":{"rendered":"

In the previous installment of this series<\/a> we discussed scopes and what problems nested scopes can cause. There are a couple of solutions to this problem: the so-called Controller As syntax introduced by AngularJS 1.2 and\u00a0.component() \u00a0<\/i>method introduced by AngularJS 1.5. The latter option is a recommended way to go if you are thinking about upgrading your application to newer Angular versions. In this post we\u2019ll talk about AngularJS Controller As syntax.<\/p>\n

As was mentioned previously, when we instruct Angular to use a controller with the\u00a0ng-controller \u00a0<\/i>directive, a new instance of a controller and a child scope is created. Alternatively, the same directive but with a different syntax can be used to create a controller and to attached it to a newly-created scope as the snippet below shows.<\/p>\n

<section ng-controller=\"HelloController as vm\">\r\n    <h4>AngularJS Greeting<\/h4>\r\n    <label for=\"name\">Type your name here:<\/label>\r\n    <input id=name type=\"text\" ng-model=\"vm.myModel\">\r\n    <p>Hello {{vm.myModel}}!<\/p>\r\n<\/section><\/pre>\n
The differences are that, first, in the ng-controller <\/i> directive we not only pass the name of the registered controller, but also, a variable name for an instance of the controller; vm<\/i> stands for ViewModel but a more meaningful name can be used and we\u2019ll talk about it later. Second, when we use double curly braces or the ng-model<\/i> directive, we use vm.myModel<\/i> to access to the variable defined in the controller. The following snippet shows how a controller using Controller As syntax looks like.<\/p>\n
(function () {\r\n\r\n  angular.module('app')\r\n    .controller('HelloController', HelloController);\r\n\r\n  function HelloController() {\r\n    var vm = this;\r\n\r\n    vm.myModel = 'World';\r\n  }\r\n\r\n})();<\/pre>\n
It differs from the version using $scope<\/i><\/a>; we don\u2019t pass the $scope<\/i> variable to our controller, so there is also no necessity to add code that copes with minification. Also, we create the vm <\/i>variable and store the value of this it it to prevent future problems when working with this. The most important point here that all the variables and methods are created inside the vm <\/i>object; this helps to clear scope from our data and methods. The visualization of AngularJS scopes obtained by Batarang is shown in the following picture.<\/p>\n
\"\"<\/a>\u00a0<\/b><\/p>\n
The fact that we don\u2019t pass\u00a0$scope\u00a0<\/i>to our controller doesn\u2019t mean that it is impossible. In fact,\u00a0$scope\u00a0<\/i>has useful methods and if we decide to use them we can pass\u00a0$scope\u00a0<\/i>to our controller. The idea is to store everything we create in a special\u00a0vm \u00a0<\/i>object. To stress once again how Controller As syntax is used by AngularJS I\u2019ll show you an example of a controller\u2019s test that relies on it.<\/p>\n
describe('HelloController scope tests', function () {\r\n    var scope;\r\n\r\n    beforeEach(function () {\r\n        module('app');\r\n\r\n        inject(function ($rootScope, $controller) {\r\n            scope = $rootScope.$new();\r\n            $controller('HelloController as vm', { $scope: scope });\r\n        });\r\n\r\n    });\r\n\r\n    it('should be World', function () {\r\n        expect(scope.vm.myModel).toEqual('World');\r\n    });\r\n});<\/pre>\n
Now we create a new $scope<\/i> using $rootScope<\/i> in order to rely on JavaScript prototypal inheritance and use scope methods. Also, we obtain the aforementioned root scope inside
\nbeforeEach <\/i> method and use Controller As syntax to obtain an instance of our HelloController <\/i> from the $controller()<\/i> function. Finally, inside the it()<\/i> method, we obtain our data using scope.<\/p>\n
A more succinct version of the controller\u2019s test that doesn\u2019t rely on AngularJS scope is shown below.<\/p>\n
describe('HelloController tests', function () {\r\n    var HelloController;\r\n\r\n    beforeEach(function () {\r\n        module('app');\r\n\r\n        inject(function ($controller) {\r\n            HelloController = $controller('HelloController');\r\n        });\r\n\r\n    });\r\n\r\n    it('should be World', function () {\r\n        expect(HelloController.myModel).toEqual('World');\r\n    });\r\n});<\/pre>\n
After we\u2019ve refactored our code, we could make sure that we haven\u2019t broken anything and this could be accomplished using Protractor. A single problem is that we extract some elements by their model but now it is vm.myModel<\/i>, not myModel<\/i> . After ironing out this wrinkle launching Protractor e2e tests should end up in success.<\/p>\n
AngularJS Nested Scopes<\/h2>\n
After we\u2019ve introduced AngularJS Controller As syntax, it\u2019s high time to see how it helps solve the nested scope problem. The HTML snippet below shows how to use the syntax in this case. While it\u2019s possible to name each controller as vm <\/i> because each of the controllers attached to a different scope, we use more clear names for controllers to prevent name collisions.<\/p>\n
<section ng-controller=\"ParentController as parent\">\r\n    <h4>Parent Scope<\/h4>\r\n    <p>{{parent.onlyParent}}<\/p>\r\n    <p>{{parent.myModel}}<\/p>\r\n    <article ng-controller=\"ChildController as child\">\r\n      <h5>Child Scope<\/h5>\r\n      <p>{{child.onlyChild}}<\/p>\r\n      <p>{{child.myModel}}<\/p>\r\n      <p>{{parent.onlyParent}}<\/p>\r\n      <p>{{parent.myModel}}<\/p>\r\n    <\/article>\r\n<\/section><\/pre>\n
The code for controllers is similar to the above one for HelloController <\/i> and can be found here<\/a>. The scopes look like in the pictures below. The first is for the parent scope.<\/p>\n
\"\"<\/a>\u00a0<\/b><\/p>\n
And the second one is for the child scope.<\/p>\n
\"\"<\/a>\u00a0<\/b><\/p>\n
Testing is done in the similar way to the\u00a0HelloController \u00a0<\/i>and test examples can be found here<\/a>. Also, is we talk about end-to-end testing using Protractor, it is easier to extract elements by their model because the latter contains the name of the controller, so we don\u2019t need to manipulate arrays of elements with the same model name.\u00a0<\/b><\/p>\n
Summary<\/h2>\n
\u00a0<\/b>In this tutorial we learned how to use AngularJS Controller As syntax. In the next post we\u2019ll talk about AngularJS components introduced by version 1.5.\u00a0<\/b><\/p>\n
Resources<\/p>\n
    \n
  1. What are scopes<\/a><\/li>\n
  2. Understanding Controllers<\/a><\/li>\n
  3. Digging into Angular\u2019s \u201cController as\u201d Syntax<\/a><\/li>\n
  4. AngularJS\u2019s Controller As and the vm Variable<\/a><\/li>\n<\/ol>\n
    \n\n\n\n
    Reference: <\/span><\/td>\nAngularJS Tutorial: AngularJS Controller As Syntax<\/a> from our WCG partner<\/a> Dmitry Noranovich at the Java and JavaEE blog<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    In the previous installment of this series we discussed scopes and what problems nested scopes can cause. There are a couple of solutions to this problem: the so-called Controller As syntax introduced by AngularJS 1.2 and\u00a0.component() \u00a0method introduced by AngularJS 1.5. The latter option is a recommended way to go if you are thinking about …<\/p>\n","protected":false},"author":212,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-16051","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"\nAngularJS Tutorial: AngularJS Controller As Syntax - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In the previous installment of this series we discussed scopes and what problems nested scopes can cause. There are a couple of solutions to this problem:\" \/>\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\/angularjs-tutorial-angularjs-controller-syntax\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS Tutorial: AngularJS Controller As Syntax - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In the previous installment of this series we discussed scopes and what problems nested scopes can cause. There are a couple of solutions to this problem:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/\" \/>\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=\"2017-02-09T10:15:06+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=\"Dmitry Noranovich\" \/>\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=\"Dmitry Noranovich\" \/>\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\/angularjs-tutorial-angularjs-controller-syntax\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/\"},\"author\":{\"name\":\"Dmitry Noranovich\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2c9fc2d311dae5c757013aa6d71485dc\"},\"headline\":\"AngularJS Tutorial: AngularJS Controller As Syntax\",\"datePublished\":\"2017-02-09T10:15:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/\"},\"wordCount\":762,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/#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\/angularjs-tutorial-angularjs-controller-syntax\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/\",\"name\":\"AngularJS Tutorial: AngularJS Controller As Syntax - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2017-02-09T10:15:06+00:00\",\"description\":\"In the previous installment of this series we discussed scopes and what problems nested scopes can cause. There are a couple of solutions to this problem:\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/#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\/angularjs-tutorial-angularjs-controller-syntax\/#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\":\"AngularJS Tutorial: AngularJS Controller As Syntax\"}]},{\"@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\/2c9fc2d311dae5c757013aa6d71485dc\",\"name\":\"Dmitry Noranovich\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/01db45dded4cbf4796ead05bd4892ed85be6e5287c11e78e5c48c9a2e7d08f52?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/01db45dded4cbf4796ead05bd4892ed85be6e5287c11e78e5c48c9a2e7d08f52?s=96&d=mm&r=g\",\"caption\":\"Dmitry Noranovich\"},\"description\":\"Dmitry teaches physics and moonlights as a Java developer. He is experienced in building Web applications using a full-profile application server as well as in Java SE. Also he is fond of teaching on-line programming courses\",\"sameAs\":[\"http:\/\/javaeeeee.blogspot.com\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/dmitry-noranovich\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJS Tutorial: AngularJS Controller As Syntax - Web Code Geeks - 2026","description":"In the previous installment of this series we discussed scopes and what problems nested scopes can cause. There are a couple of solutions to this problem:","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\/angularjs-tutorial-angularjs-controller-syntax\/","og_locale":"en_US","og_type":"article","og_title":"AngularJS Tutorial: AngularJS Controller As Syntax - Web Code Geeks - 2026","og_description":"In the previous installment of this series we discussed scopes and what problems nested scopes can cause. There are a couple of solutions to this problem:","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-02-09T10:15:06+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":"Dmitry Noranovich","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Dmitry Noranovich","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/"},"author":{"name":"Dmitry Noranovich","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2c9fc2d311dae5c757013aa6d71485dc"},"headline":"AngularJS Tutorial: AngularJS Controller As Syntax","datePublished":"2017-02-09T10:15:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/"},"wordCount":762,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/#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\/angularjs-tutorial-angularjs-controller-syntax\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/","name":"AngularJS Tutorial: AngularJS Controller As Syntax - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2017-02-09T10:15:06+00:00","description":"In the previous installment of this series we discussed scopes and what problems nested scopes can cause. There are a couple of solutions to this problem:","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-tutorial-angularjs-controller-syntax\/#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\/angularjs-tutorial-angularjs-controller-syntax\/#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":"AngularJS Tutorial: AngularJS Controller As Syntax"}]},{"@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\/2c9fc2d311dae5c757013aa6d71485dc","name":"Dmitry Noranovich","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/01db45dded4cbf4796ead05bd4892ed85be6e5287c11e78e5c48c9a2e7d08f52?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/01db45dded4cbf4796ead05bd4892ed85be6e5287c11e78e5c48c9a2e7d08f52?s=96&d=mm&r=g","caption":"Dmitry Noranovich"},"description":"Dmitry teaches physics and moonlights as a Java developer. He is experienced in building Web applications using a full-profile application server as well as in Java SE. Also he is fond of teaching on-line programming courses","sameAs":["http:\/\/javaeeeee.blogspot.com\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/dmitry-noranovich\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/16051","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\/212"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=16051"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/16051\/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=16051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=16051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=16051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}