{"id":14716,"date":"2016-09-22T16:15:37","date_gmt":"2016-09-22T13:15:37","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=14716"},"modified":"2017-12-19T16:19:43","modified_gmt":"2017-12-19T14:19:43","slug":"angular-js-architecture-tutorial","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/","title":{"rendered":"Angular.js Architecture Tutorial"},"content":{"rendered":"<p>Angular is one of the most used frameworks in web developing and more, and this is for a good reason. If you already know its benefits then I&#8217;m sure that the next step for you would be to get ready to use it in your projects as soon as possible.<\/p>\n<p>One of the most important step in learning how to develop using AngularJS is by learning \u00a0its architecture model, which is largely MVC. But what does MVC stand for and how can I implement it in my app? Let&#8217;s find out!<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;LXJcMJZXSsqGXYW8&#8242;]<\/p>\n<h2>1. Intro to MVC<\/h2>\n<p>In Angular we organize things differently than regular JavaScript. One of the popular ways of organizing applications is MVC Architecture. MVC is an acronym for <strong>M<\/strong>odel <strong>V<\/strong>iew <strong>C<\/strong>ontroller and is a very popular design pattern in the web world. It helps you to organize your application in three different layers and isolates the business logic from its presentation. Let&#8217;s see what each of these components stands for and what is their role in the MVC architecture.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/attachment\/capture-9\/\" rel=\"attachment wp-att-14717\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-14717\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/09\/Capture.jpeg\" alt=\"capture\" width=\"604\" height=\"333\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/09\/Capture.jpeg 604w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/09\/Capture-300x165.jpeg 300w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/a><\/p>\n<p>The picture above represents the gist of the MVC architecture perfectly: Basically you have a view, which is how the data is represented to the user, and a controller which is used to modify this data. The scope, or the model, is what you use to bind these two together, so the changes to one can reflect to the other.<\/p>\n<p>Now, much of the time when you\u2019re building application you will need:<\/p>\n<ul>\n<li>Model to represent current state of your application<\/li>\n<li>View to display the data<\/li>\n<li>Controller that controls the relation between Models and Views.<\/li>\n<\/ul>\n<p>Let&#8217;s analyze each of them more closely.<\/p>\n<h2>2. The Model and its creation<\/h2>\n<p>What exactly are models in AngularJS? A model in Angular can be a primitive type such as string, number, boolean or a complex type such as objects. There\u2019s no special class, no special <code>getter<\/code> or <code>setter<\/code> method, in short a model is just a plain Javascript object. This can be advantageous for you if you\u2019re familiar with Javascript, because I\u2019m sure you\u2019re also familiar with this type of model.<\/p>\n<p>Models put in use another very important element of AngularJS, which would be the <code>$scope<\/code>. The scope is like the glue between the controller and the view, and each controller has its own scope. While it&#8217;s true that a model is a plain Javascript object living within the controller, that does not mean that it can be created the same way as one. To make a model available to the view we need the scope.<\/p>\n<p>We create models as in the code snippet below:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>app.js<\/em><\/span><\/p>\n<pre class=\"brush:js\"> \r\n$scope.greeting = \u201cHello, Angular is awesome!\u201d; \r\n    var users = [ \r\n        {\r\n            name: \u201cJohn Doe\u201d, \r\n            point: 45 \r\n        }, \r\n        {\r\n            name: \u201cJohn Nash\u201d, \r\n            point: 85\r\n        }, \r\n        {\r\n            name: \u201cJohny\u201d, \r\n            point: 55\r\n        }];\r\n    \r\n $scope.users = users; \r\n<\/pre>\n<p>In the code snippets above we have created two models, <code>greeting<\/code> and <code>users<\/code>, the first of which is a string and the second an array of Javascript objects. As you can see, both models are bound to <code>$scope<\/code> as if they were it&#8217;s properties, which is the element that will bound these values to the controller, on the other side of things.<\/p>\n<h2>3. The controller<\/h2>\n<p>Now on to the matter of the controller under the MVC pattern: The controller is the place where we put all our application logic and is created using Javascript classes. In this controller we can also call other components to work with. And the most important to explain is, in this controller our model, which we created above, lives.<\/p>\n<p>As we said, the logic behind all the data visible to the user is modified by the controller, which is very easily created. Take a look at the code snippet below:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>app.js<\/em><\/span><\/p>\n<pre class=\"brush:js\"> \r\nvar app=angular.module('app', []);\r\n\r\napp.controller('MyCtrl',function MyCtrl($scope) {\r\n $scope.greeting = \u201cHello, Angular is awesome!\u201d;\r\n    var users = [\r\n        {\r\n            name: \u201cJohn Doe\u201d,\r\n            point: 45\r\n        },\r\n        {\r\n            name: \u201cJohn Nash\u201d,\r\n            point: 85\r\n        },\r\n        {\r\n            name: \u201cJohny\u201d,\r\n            point: 55\r\n        }];\r\n\r\n $scope.users = users;\r\n\r\n});\r\n<\/pre>\n<p>Undoubtedly, you will find it extremely familiar. Basically, the thing differentiating this code snippet from the one above it that we used to create the model is the wrapper function. That&#8217;s because all that code would go inside the function that creates the controller, in our case named <code>MyCtrl<\/code>. Another thing that you should keep in mind is the argument that the controller as a function takes: the <code>$scope<\/code>. Now it&#8217;s definitely clear that the binder between the controller and it&#8217;s logic is the <code>$scope<\/code>.<\/p>\n<p>Also, what&#8217;s different in the code above from the one we posted previously is that in this case we have also created an Angular module, using just one line of Javascript code, but which is very important for the functionality of our app in it&#8217;s entirety.<\/p>\n<h2>4. The view and how we link it all together<\/h2>\n<p>In Angular, the View is what the users see, or else the DOM (Document Object Model). To display the data from controller, you can put Angular expressions in your view. This expression binds data from the model inside your controller. Moreover, since Angular is two-way data binding, the view will update itself automatically whenever there&#8217;s a change in the model from the controller, without you needing to write code specifically for achieving this.<\/p>\n<p>But let&#8217;s see how can we put all this into play in the main HTML file. Take a look at the code snippet below:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>index.html<\/em><\/span><\/p>\n<pre class=\"brush:xml\"> \r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n    &lt;title&gt;MVC Architecture&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body ng-app&gt;\r\n&lt;div ng-controller=\u201dMyCtrl\u201d&gt;\r\n    &lt;h1&gt;{{greeting}}&lt;\/h1&gt;\r\n    &lt;h2&gt;{{users.name, ' + ', users.point}}&lt;\/h2&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script src=\u201dhttps:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.0.7\/angular.min.js\u201d&gt;&lt;\/script&gt;\r\n&lt;script src=\"app.js\" &lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>As you see, what we have done here is so easy that it can be considered just the wrapper of our function, however, it is just as important since it is the structure keeping all our architecture together. This is how we link together the model and the controller with the view.<\/p>\n<p>In the code snippet above, you will see a regular main HTML file with it&#8217;s <code>&lt;head&gt;<\/code> and <code>&lt;body&gt;<\/code> sections. Note that just before we close the <code>&lt;body&gt;<\/code> section we script in the custom <code>app.js<\/code> file where we&#8217;ve placed the angular module and controller we just created, and also the default <code>angular.min.js<\/code> file, which we&#8217;ve taken directly from where it&#8217;s hosted online, but you can simply download it by yourself.<\/p>\n<p>Besides that, we have placed the <code>ng-app<\/code> property inside the <code>&lt;body&gt;<\/code> tag, which serves to turn it all into an Angular app. While we could place it wherever else in the main file, in our case, this is also very benefiting.<\/p>\n<p>As we mentioned, a View in Angular is how we present the data to our user. In our case, the view would consist of the two expressions inside the headings, which both contain two expressions that just display the value of the variable in them. You will remember the both of them being the models of our MVC architecture. However, this will not work at all if we didn&#8217;t somehow connect it all with the controller responsible for them, <code>MyCtrl<\/code>. To do that, we place the property <code>ng-controller=\u201dMyCtrl\u201d&gt;<\/code> inside the <code>&lt;div&gt;<\/code> tag that encapsulates them, as shown above. This way we have bound the <strong>Model<\/strong>, to the <strong>View<\/strong>, while using the <strong>Controller<\/strong> to do it (it&#8217;s <code>$scope<\/code>, more specifically).<\/p>\n<p>This is the gist of the MVC architecture, which is a building foundation of Angular apps as a whole. Even if sometimes there are beginners who don&#8217;t exactly start their learning by it, it will certainly make concepts more clear in the long term.<\/p>\n<h2>5. Download the source code<\/h2>\n<p>This was an example of AngularJS Architecture.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here:\u00a0<strong><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/09\/mvcarchitecture.zip\">mvcarchitecture<\/a><\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Angular is one of the most used frameworks in web developing and more, and this is for a good reason. If you already know its benefits then I&#8217;m sure that the next step for you would be to get ready to use it in your projects as soon as possible. One of the most important &hellip;<\/p>\n","protected":false},"author":25,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-14716","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular.js Architecture Tutorial - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Angular is one of the most used frameworks in web developing and more, and this is for a good reason. If you already know its benefits then I&#039;m sure that\" \/>\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-architecture-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular.js Architecture Tutorial - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Angular is one of the most used frameworks in web developing and more, and this is for a good reason. If you already know its benefits then I&#039;m sure that\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/\" \/>\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\/era.balliu.7\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-22T13:15:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T14:19:43+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=\"Era Balliu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BalliuEra\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Era Balliu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 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-architecture-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/\"},\"author\":{\"name\":\"Era Balliu\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\"},\"headline\":\"Angular.js Architecture Tutorial\",\"datePublished\":\"2016-09-22T13:15:37+00:00\",\"dateModified\":\"2017-12-19T14:19:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/\"},\"wordCount\":1191,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/\",\"name\":\"Angular.js Architecture Tutorial - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2016-09-22T13:15:37+00:00\",\"dateModified\":\"2017-12-19T14:19:43+00:00\",\"description\":\"Angular is one of the most used frameworks in web developing and more, and this is for a good reason. If you already know its benefits then I'm sure that\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#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-architecture-tutorial\/#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 Architecture Tutorial\"}]},{\"@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\/c27ecf40c810e6396ba93ffb829c7b0e\",\"name\":\"Era Balliu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"caption\":\"Era Balliu\"},\"description\":\"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.\",\"sameAs\":[\"http:\/\/www.webcodegeeks.com\/\",\"https:\/\/www.facebook.com\/era.balliu.7\",\"https:\/\/www.instagram.com\/eraballiu\/\",\"https:\/\/www.linkedin.com\/in\/eraballiu\",\"https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/\",\"https:\/\/x.com\/BalliuEra\",\"https:\/\/www.youtube.com\/c\/eraballiu\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular.js Architecture Tutorial - Web Code Geeks - 2026","description":"Angular is one of the most used frameworks in web developing and more, and this is for a good reason. If you already know its benefits then I'm sure that","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-architecture-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Angular.js Architecture Tutorial - Web Code Geeks - 2026","og_description":"Angular is one of the most used frameworks in web developing and more, and this is for a good reason. If you already know its benefits then I'm sure that","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/era.balliu.7","article_published_time":"2016-09-22T13:15:37+00:00","article_modified_time":"2017-12-19T14:19:43+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":"Era Balliu","twitter_card":"summary_large_image","twitter_creator":"@BalliuEra","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Era Balliu","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/"},"author":{"name":"Era Balliu","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e"},"headline":"Angular.js Architecture Tutorial","datePublished":"2016-09-22T13:15:37+00:00","dateModified":"2017-12-19T14:19:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/"},"wordCount":1191,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/","name":"Angular.js Architecture Tutorial - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2016-09-22T13:15:37+00:00","dateModified":"2017-12-19T14:19:43+00:00","description":"Angular is one of the most used frameworks in web developing and more, and this is for a good reason. If you already know its benefits then I'm sure that","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-architecture-tutorial\/#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-architecture-tutorial\/#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 Architecture Tutorial"}]},{"@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\/c27ecf40c810e6396ba93ffb829c7b0e","name":"Era Balliu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","caption":"Era Balliu"},"description":"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.","sameAs":["http:\/\/www.webcodegeeks.com\/","https:\/\/www.facebook.com\/era.balliu.7","https:\/\/www.instagram.com\/eraballiu\/","https:\/\/www.linkedin.com\/in\/eraballiu","https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/","https:\/\/x.com\/BalliuEra","https:\/\/www.youtube.com\/c\/eraballiu"],"url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/14716","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\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=14716"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/14716\/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=14716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=14716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=14716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}