{"id":75,"date":"2016-12-12T13:06:39","date_gmt":"2016-12-12T13:06:39","guid":{"rendered":"http:\/\/localhost\/techuz-new\/?p=75"},"modified":"2024-03-26T10:17:42","modified_gmt":"2024-03-26T10:17:42","slug":"understanding-scope-rootscope-angular-relating-mvc-architecture","status":"publish","type":"post","link":"https:\/\/www.techuz.com\/blog\/understanding-scope-rootscope-angular-relating-mvc-architecture\/","title":{"rendered":"Understanding $scope and $rootscope in angular by relating with MVC architecture?"},"content":{"rendered":"<p>This is very basic concept of angular js and any newbie who starting on <a href=\"https:\/\/www.techuz.com\/angular-js-development\/\">Angularjs development<\/a> comes with this question. On the web, I found many articles on this but thought it will be easy if I will explain it by relating to MVC architecture, because of most of the developers worked on this model already so for them easy to understand.<\/p>\n<p>If you are new to MVC then please read this article <a href=\"https:\/\/www.tutorialspoint.com\/struts_2\/basic_mvc_architecture.htm\" target=\"_blank\" rel=\"nofollow\">https:\/\/www.tutorialspoint.com\/struts_2\/basic_mvc_architecture.htm<\/a><\/p>\n<p>Angularjs also follow MVC pattern. In AngularJs $rootScope works like component used in the controller in MVC and as you know component can be used in any controller. In the same way, $rootScope is available in all angular controllers. You can use $rootScope in any controller by injecting it.<\/p>\n<p>In AngularJs $scope works like individual controller in MVC and it\u2019s available per controller. You can not use $scope value in another controller and for that, you need to use $rootScope.<\/p>\n<p>$rootScope is created with ng-app whereas $scope is created with ng-controller.<\/p>\n<p>In angularJs, there may be multiple $scope exists, but exactly one $rootScope is available. We can say that $rootScope is global whereas $scope is local.<\/p>\n<div class=\"highlited-sec\">\n<h3><span>We answer all these <strong><i>questions and more<\/i><\/strong> in this blog:<\/span><\/h3>\n<ul>\n<li><a href=\"#section0\">If we want to use the $rootScope , How can we use it?<\/a><\/li>\n<li><a href=\"#section1\">If we want to use the $scope , How can we use it?<\/a><\/li>\n<\/ul>\n<\/div>\n<h2>If we want to use the $rootScope , How can we use it?<\/h2>\n<p>$rootScope is the first scope created in the application. It is available when angular run () method executed.<\/p>\n<h3><strong>Example:<\/strong><\/h3>\n<p><code>var app = angular.module('myApp',[ ]);<br \/>\napp.run(function($rootScope){<br \/>\n$rootScope.Math = Math;<br \/>\n});<\/code><\/p>\n<p>We have assigned the Math object into the $rootScope. These will give access to all the JavaScript Math functions like min () and max () in the whole application.<\/p>\n<h2>If we want to use the $scope , How can we use it?<\/h2>\n<p>The $scope is created in the application controller.<\/p>\n<h3><strong>Example:<\/strong><\/h3>\n<p><code>var app = angular.module('myApp',[ ]);<br \/>\napp.controller('mainController', [\u2018$scope\u2019, function($scope){<br \/>\n$scope.Math = Math;<br \/>\n}]);<\/code><\/p>\n<p>We have assigned Math object into the $scope. These will give access to all the JavaScript Math functions like min () and max () in the main view which implements &#8220;mainController&#8221;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is very basic concept of angular js and any newbie who starting on Angularjs development comes with this question. On the web, I found many articles on this but thought it will be easy if I will explain it by relating to MVC architecture, because of most of the developers worked on this model &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.techuz.com\/blog\/understanding-scope-rootscope-angular-relating-mvc-architecture\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Understanding $scope and $rootscope in angular by relating with MVC architecture?&#8221;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":1918,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[],"better_featured_image":{"id":1918,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":1000,"height":430,"file":"2016\/12\/Angularjs-services-1-1.jpg","sizes":{"thumbnail":{"file":"Angularjs-services-1-1-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2016\/12\/Angularjs-services-1-1-150x150.jpg"},"medium":{"file":"Angularjs-services-1-1-300x129.jpg","width":300,"height":129,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2016\/12\/Angularjs-services-1-1-300x129.jpg"},"medium_large":{"file":"Angularjs-services-1-1-768x330.jpg","width":768,"height":330,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2016\/12\/Angularjs-services-1-1-768x330.jpg"},"blog_list":{"file":"Angularjs-services-1-1-460x198.jpg","width":460,"height":198,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2016\/12\/Angularjs-services-1-1-460x198.jpg"},"alm-thumbnail":{"file":"Angularjs-services-1-1-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2016\/12\/Angularjs-services-1-1-150x150.jpg"},"twentyseventeen-thumbnail-avatar":{"file":"Angularjs-services-1-1-100x100.jpg","width":100,"height":100,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2016\/12\/Angularjs-services-1-1-100x100.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":75,"source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2016\/12\/Angularjs-services-1-1.jpg"},"_links":{"self":[{"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/posts\/75"}],"collection":[{"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":4,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/posts\/75\/revisions"}],"predecessor-version":[{"id":7438,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/posts\/75\/revisions\/7438"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/media\/1918"}],"wp:attachment":[{"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/media?parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/categories?post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/tags?post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}