Post
Ask Question

Introduction To AngularJS - Day 12

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:

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5
  6. Introduction to AngularJS – Day 6
  7. Introduction to AngularJS – Day 7
  8. Introduction to AngularJS – Day 8
  9. Introduction to AngularJS – Day 9
  10. Introduction to AngularJS – Day 10
  11. 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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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

  1. /// <reference path="angular.min.js" />  
  2. var app = angular.module("myApp", []);  
  3. app.controller("LaptopController", function ($scope)  
  4. {  
  5.     $scope.laptop = 'Your laptop model is Samsung!';  
  6.     $scope.dell = function ()  
  7.     {  
  8.         $scope.laptop = 'Your laptop model is Dell!';  
  9.     };  
  10.     $scope.sony = function ()  
  11.     {  
  12.         $scope.laptop = 'Your laptop model is Sony!';  
  13.     };  
  14. });  
code

$scope.html
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3.   
  4. <head>  
  5.     <title>$scope in AngularJS</title>  
  6.     <script src="Scripts/angular.min.js"></script>  
  7.     <script src="Scripts/controller.js"></script>  
  8. </head>  
  9.   
  10. <body>  
  11.     <div ng-controller="LaptopController">  
  12.         <h1>Learn $scope in AngularJS at C# Corner!</h1>  
  13.         <input type="button" ng-click="dell()" value="Dell" />       
  14.         <input type="button" ng-click="sony()" value="Sony" /> <span><h2>{{laptop}}</h2></span> </div>  
  15. </body>  
  16.   
  17. </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! 


Similar Articles