In the 12th day of AngularJS article series, we are going to learn the next key players/concept of AngularJS, understanding the concept of $scope in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:
- Introduction to AngularJS – Day 1
- Introduction to AngularJS – Day 2
- Introduction to AngularJS – Day 3
- Introduction to AngularJS – Day 4
- Introduction to AngularJS – Day 5
- Introduction to AngularJS – Day 6
- Introduction to AngularJS – Day 7
- Introduction to AngularJS – Day 8
- Introduction to AngularJS – Day 9
- Introduction to AngularJS – Day 10
- Introduction to AngularJS – Day 11
$scope
It is nothing but ‘glue’ between the view and controller. It binds view and controller with the help of $scope object. Treat scope as read-only in view and write-only inside the controller as possible.
![scope object]()
The $scope is ‘injected’ into a controller, without injected we cannot use $scope object. Views bind to scope properties and functions/methods. The following are some important points about using the $scope:
- Avoid making changes to the scope directly from the view
This means that though it is easy, we should avoid making changes to the scope by creating or modifying its properties directly inside the view. At the same time, we need to take care about reading the scope directly everywhere inside the controller.
- Avoid reading the scope inside the controller
Reading the $scope object inside the controller instead of passing data through parameters should be avoided. This increases the couple between them and makes the controller much harder to test.
- Do not let the scope cross the boundary of its controller
We should also take care about not allowing the $scope object to be used far away from the controller's boundary.
- Use a '.' inside the ng-model directive
The framework has the ability to create an object automatically when we introduce a period in the middle of the ng-model directive. Without that, we would need to create the object every time by writing much more code.
- Avoid using scope unnecessarily
The framework keeps the view and the controller synchronized using the two-way data binding mechanism. Because of this, we are able to increase the performance of our application by reducing the number of things attached to $scope. With this in mind, we should use $scope only when there are things to be shared with the view; otherwise, we can use a local variable to do the job.
To inject ‘$scope’ dynamically in controller see the following image:
![scope]()
Controller.js
-
- var app = angular.module("myApp", []);
- app.controller("LaptopController", function ($scope)
- {
- $scope.laptop = 'Your laptop model is Samsung!';
- $scope.dell = function ()
- {
- $scope.laptop = 'Your laptop model is Dell!';
- };
- $scope.sony = function ()
- {
- $scope.laptop = 'Your laptop model is Sony!';
- };
- });
![code]()
$scope.html - <!DOCTYPE html>
- <html ng-app="myApp">
-
- <head>
- <title>$scope in AngularJS</title>
- <script src="Scripts/angular.min.js"></script>
- <script src="Scripts/controller.js"></script>
- </head>
-
- <body>
- <div ng-controller="LaptopController">
- <h1>Learn $scope in AngularJS at C# Corner!</h1>
- <input type="button" ng-click="dell()" value="Dell" />
- <input type="button" ng-click="sony()" value="Sony" /> <span><h2>{{laptop}}</h2></span> </div>
- </body>
-
- </html>
The following is the output of above code, we used same code as controller example in previous article:
![bharatwaj vanamamalai "Sms.docx" Some Content Copy From: http://everything.explained.today/Clickatell/ , http://13bitzos.blogspot.in/2015/10/salim-rollno30.html and http://www.codeproject.com/script/Articles/ArticleVersion.aspx?aid=91640&av=154366]()
Great, we learned $scope in AngularJS with example successfully.
Summary
I hope that beginners as well as students understood the concept of $scope in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon.
Thanks for reading. Learn it! Share it!