Hello folks! welcome back to a new edition of our tutorial on AngularJS. In this tutorial, we're going to be studying about AngularJS Scopes.
What is a Scope?
Scope is a distinctive JavaScript object that connects controller and views. Scope holds model data. Within controllers, model data is accessed via $scope object.
<script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $scope.type = "Shape"; }); </script>
Following vital points are considered in the above example -
- $scope is passed as first argument to the controller during the definition of its constructor.
- $scope.message and $scope.type are the models used in the HTML page.
- We assign values to models that are reflected in the application module, whose controller is shapeController.
- We can define functions in $scope.
Scope Inheritance
Scope is controller-specific. If we define nested controllers, then the child controller inherits the scope of its parent controller.
<script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $scope.type = "Shape"; }); mainApp.controller("circleController", function($scope) { $scope.message = "In circle controller"; }); </script>
READ: AngularJS | Views
Following vital points are considered in the above example -
- We assign values to the models in shapeController.
- We override message in the child controller named circleController. When message is used within the module of controller that's named circleController, then the message that was overridden is used.
Example
Following example below illustrates the use of the above mentioned directives -
Create a file testAngularJS.html.
Create a file testAngularJS.html.
<html> <head> <title>Angular JS Forms</title> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp" ng-controller = "shapeController"> <p>{{message}} <br/> {{type}} </p> <div ng-controller = "circleController"> <p>{{message}} <br/> {{type}} </p> </div> <div ng-controller = "squareController"> <p>{{message}} <br/> {{type}} </p> </div> </div> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> <script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $scope.type = "Shape"; }); mainApp.controller("circleController", function($scope) { $scope.message = "In circle controller"; }); mainApp.controller("squareController", function($scope) { $scope.message = "In square controller"; $scope.type = "Square"; }); </script> </body> </html>
Output
Open the file testAngularJS.html in any web browser to see the result -
AngularJS Sample Application
In shape controller
ShapeIn circle controller
ShapeIn square controller
Square
READ: AngularJS | Ajax
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about AngularJS Services.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
