{"id":46737,"date":"2019-01-06T10:30:57","date_gmt":"2019-01-06T05:00:57","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=46737"},"modified":"2020-01-31T10:45:01","modified_gmt":"2020-01-31T05:15:01","slug":"angularjs-mvc","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/","title":{"rendered":"AngularJS MVC Architecture &#8211; Learn How MVC Works in AngularJS?"},"content":{"rendered":"<p>Since we had studied, <a href=\"https:\/\/data-flair.training\/blogs\/angularjs-modules\/\"><strong>AngularJS Modules<\/strong><\/a>. Today, we will talk about AngularJS MVC. MVC stands for Model View Controller, it is a software design pattern for designing and developing a web application. Here, we will learn MVC architecture &amp; components and How MVC works in Angular JS.<\/p>\n<p>So, are you ready to explore the Angular Model View Controller (MVC)?<\/p>\n<div id=\"attachment_46744\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-46744\" class=\"size-full wp-image-46744\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01.jpg\" alt=\"AngularJS MVC Architecture - How MVC Works in AngularJS?\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><p id=\"caption-attachment-46744\" class=\"wp-caption-text\">AngularJS MVC Architecture &#8211; How MVC Works in AngularJS?<\/p><\/div>\n<h2>1. What is AngularJS MVC?<\/h2>\n<p>MVC is nothing but the software design pattern for designing and developing a web application. It is considered as the architectural pattern that has existed for a long time in software engineering. Many languages use MVC architecture with little variations in each one of them but conceptually it remains the same.<\/p>\n<p>In angular, we organize things in some different manner as compare to regular javascript. Therefore, Model View Controller architecture is the most popular and latest way of organizing an application.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-directives\/\">Do you know What are Directives in AngularJS?<\/a><\/strong><\/p>\n<h2>2. AngularJs MVC Architecture &amp;\u00a0Components<\/h2>\n<p>AngularJS MVC divides an application into three parts- Model part, View Part, Controller Part.\u00a0Let\u2019s see for what purpose each component of MVC serves:<\/p>\n<ul>\n<li><strong>MODEL PART<\/strong><\/li>\n<\/ul>\n<p>Model part consists of a\u00a0database (use to store data), application data (application data are variables that are specific to a user. Application and logic (Logic refers to code that is written to perform a certain task).<\/p>\n<ul>\n<li><strong>VIEW PART<\/strong><\/li>\n<\/ul>\n<p>View part is the user interface part of an application. The information that is being displayed to the user in an application is written in this part.<\/p>\n<ul>\n<li><strong>CONTROLLER PART<\/strong><\/li>\n<\/ul>\n<p>The interaction between the model part and view part is controlled by a controller. It is more like software code.<\/p>\n<div id=\"attachment_46745\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-Basic-01.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-46745\" class=\"size-full wp-image-46745\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-Basic-01.jpg\" alt=\"AngularJS MVC Architecture and Components\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-Basic-01.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-Basic-01-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-Basic-01-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-Basic-01-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-Basic-01-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-Basic-01-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><p id=\"caption-attachment-46745\" class=\"wp-caption-text\">AngularJS MVC &#8211; Architecture &amp; Components<\/p><\/div>\n<h2>3. How MVC Works in AngularJS?<\/h2>\n<p>We can implement MVC pattern through JavaScript and HTML. HTML helps to implement model part, while JavaScript is for model and controller part.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/data-binding-in-angularjs\/\">Recommended reading &#8211; Data Binding in AngularJS<\/a><\/strong><\/p>\n<p>When a user enters a URL in the browser, according to that specific URL control goes to the server and calls the controller. After that controller uses the appropriate model and appropriate view so that appropriate response can be made for user\u2019s request. It creates the response and that response is sent back to the user.<\/p>\n<div id=\"attachment_46746\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/Request-Response-in-MVC-Architecture-01.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-46746\" class=\"size-full wp-image-46746\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/Request-Response-in-MVC-Architecture-01.jpg\" alt=\"Working of AngularJS MVC\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/Request-Response-in-MVC-Architecture-01.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/Request-Response-in-MVC-Architecture-01-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/Request-Response-in-MVC-Architecture-01-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/Request-Response-in-MVC-Architecture-01-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/Request-Response-in-MVC-Architecture-01-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/Request-Response-in-MVC-Architecture-01-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><p id=\"caption-attachment-46746\" class=\"wp-caption-text\">How MVC Works in AngularJS?<\/p><\/div>\n<h2>4. MVC In AngularJS<\/h2>\n<p>Here, we will see how the components of MVC works in AngularJS:<\/p>\n<h4>i. Model Part In Angular Application<\/h4>\n<p>It responds to the request made from view part. It can obtain data dynamically means you can get data from database like from MySQL or you can get data from static JSON (JavaScript Object Notation) file.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script&gt;\u00a0\r\n\u00a0\u00a0\u00a0 $scope.person =\u00a0 {\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0 'Name'\u00a0\u00a0\u00a0\u00a0\u00a0 : \u00a0\u00a0'Ram Kumar ',\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'Address'\u00a0 :\u00a0\u00a0 'AB Road, Katni',\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0 }\u00a0\r\n&lt;\/script&gt;<\/pre>\n<div id=\"attachment_46747\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-01.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-46747\" class=\"size-full wp-image-46747\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-01.jpg\" alt=\" AngularJS MVC\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-01.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-01-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-01-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-01-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-01-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/MVC-Architecture-01-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><p id=\"caption-attachment-46747\" class=\"wp-caption-text\">AngularJS MVC &#8211; Working of Model, View &amp; Controller<\/p><\/div>\n<h4>ii. View Part In Angular Application<\/h4>\n<p>It is the presentation part of an application. Through the view part, a user can see the Model part. Therefore, the model and view part join together.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;h1&gt; {{person.name}} &lt;\/h1&gt;<\/pre>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/\">Also, read &#8211; ngmodel in AngularJS<\/a><\/strong><\/p>\n<h4>iii. Controller Part In Angular Application<\/h4>\n<p>It is the central part of the angular application. Everything starts with a controller in angular. The model part and the view part join with each other. It means whatever happen to the model part automatically effects to the view part and whatever happens to the view part automatically effects to the model part also. Controller joins the model and view part.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">function address($scope)\r\n{\u00a0\r\n\/\/ Model Part is written here\r\n}<\/pre>\n<p>Look at this final code with a model part, view part and controller part in the single code<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!doctype html&gt;\r\n&lt;html ng-app&gt;\r\n&lt;head&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;title&gt;Angular MVC &lt;\/title&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;script src=\u201dlib\/Angular\/angular.min.js\u201d&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div ng-controller = \u201caddress\u201d&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h1&gt;{ {Person.Name} }&lt;\/h1&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;script type=\u201dtext\/javascript\u201d&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 function address($scope){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 $scope.Person= {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0 'Name'\u00a0\u00a0\u00a0\u00a0\u00a0 : \u00a0\u00a0'Ram Kumar ',\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'Address'\u00a0 :\u00a0\u00a0 'AB Road, Katni',\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Ram Kumar<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/advanced-features-of-angularjs\/\">Have a look &#8211; Features of AngularJS<\/a><\/strong><\/p>\n<h2>5. Conclusion<\/h2>\n<p>This is how <strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Model%E2%80%93view%E2%80%93controller\">MVC architecture<\/a><\/strong> works in angular. The various aspects of an application divided into three components (Model, View and Controller) to separate responsibilities. A model contains application data, a view contains the visual layout and a controller connects the view part and model part. Furthermore, if you have any query, feel free to ask in the comment box.<span hidden class=\"__iawmlf-post-loop-links\" data-iawmlf-links=\"[{&quot;id&quot;:1691,&quot;href&quot;:&quot;https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Model%E2%80%93view%E2%80%93controller&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20251012021837\\\/https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Model%E2%80%93view%E2%80%93controller&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 17:27:08&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-12-09 17:27:08&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;}]\"><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since we had studied, AngularJS Modules. Today, we will talk about AngularJS MVC. MVC stands for Model View Controller, it is a software design pattern for designing and developing a web application. Here, we&#46;&#46;&#46;<\/p>\n","protected":false},"author":5,"featured_media":46744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18153],"tags":[18313,18311,18314,18315,2969,18317,18316,18318,15378,18312],"class_list":["post-46737","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-angularjs-model-view-controller","tag-angularjs-mvc","tag-angularjs-mvc-architecture","tag-angularjs-mvc-components","tag-controller","tag-how-mvc-works-in-angularjs","tag-model","tag-mvc-in-angularjs","tag-view","tag-what-is-angularjs-mvc"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>AngularJS MVC Architecture - Learn How MVC Works in AngularJS? - DataFlair<\/title>\n<meta name=\"description\" content=\"What is MVC - AngularJS MVC Architecture, Learn How Model view controller works in AngularJS with example, also compoenents of MVC pattern\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS MVC Architecture - Learn How MVC Works in AngularJS? - DataFlair\" \/>\n<meta property=\"og:description\" content=\"What is MVC - AngularJS MVC Architecture, Learn How Model view controller works in AngularJS with example, also compoenents of MVC pattern\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-06T05:00:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-31T05:15:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJS MVC Architecture - Learn How MVC Works in AngularJS? - DataFlair","description":"What is MVC - AngularJS MVC Architecture, Learn How Model view controller works in AngularJS with example, also compoenents of MVC pattern","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:\/\/data-flair.training\/blogs\/angularjs-mvc\/","og_locale":"en_US","og_type":"article","og_title":"AngularJS MVC Architecture - Learn How MVC Works in AngularJS? - DataFlair","og_description":"What is MVC - AngularJS MVC Architecture, Learn How Model view controller works in AngularJS with example, also compoenents of MVC pattern","og_url":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-01-06T05:00:57+00:00","article_modified_time":"2020-01-31T05:15:01+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"AngularJS MVC Architecture &#8211; Learn How MVC Works in AngularJS?","datePublished":"2019-01-06T05:00:57+00:00","dateModified":"2020-01-31T05:15:01+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/"},"wordCount":684,"commentCount":4,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01.jpg","keywords":["AngularJS Model View Controller","AngularJS MVC","AngularJs MVC Architecture","AngularJs MVC\u00a0Components","Controller","How MVC Works in AngularJS","Model","MVC In AngularJS","view","What is AngularJS MVC"],"articleSection":["AngularJS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/angularjs-mvc\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/","url":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/","name":"AngularJS MVC Architecture - Learn How MVC Works in AngularJS? - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01.jpg","datePublished":"2019-01-06T05:00:57+00:00","dateModified":"2020-01-31T05:15:01+00:00","description":"What is MVC - AngularJS MVC Architecture, Learn How Model view controller works in AngularJS with example, also compoenents of MVC pattern","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/angularjs-mvc\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Model-View-Controller-MVC-01.jpg","width":1200,"height":628,"caption":"AngularJS MVC Architecture - How MVC Works in AngularJS?"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"AngularJS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/angularjs\/"},{"@type":"ListItem","position":3,"name":"AngularJS MVC Architecture &#8211; Learn How MVC Works in AngularJS?"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=46737"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46737\/revisions"}],"predecessor-version":[{"id":47097,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46737\/revisions\/47097"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/46744"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=46737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=46737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=46737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}