AngularJS Scope - what is the $scope in angularjs

Published August 13, 2022

A Scope is an object designated as a connecting component between JavaScript and the HTML, which are controller and view. It functions as the link between the controller and the views. Both the controller and the view can use it. An object having all of the potential properties and methods is the scope. For both the view and the controller, the scope is accessible.

Syntax

The following syntax shows the scope of the AngularJS. There are few qestions about scope like angularjs rootscope, angular directive scope...

<div ng-app="conApp">

{{ first()}}

</div>

<script>

angular.module("conapp", [])

.controller("idController", function($scope) {

$scope.first = "RRtutor";

} );

</script>

 

Examples

The examples show module functions examples in detail.

Example #1:

Basic scope: the following example shows the AngularJS "scope" features in web application.

<!DOCTYPE html>

<html lang="en">

<head>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

</head>

<body ng-app = "conapp">

<h3> AngularJS scope Function </h3>

<div ng-controller = "idController" >

<p> Welcome: <b>{{first}}</b> !</p>

</div>

<script>

angular.module("conapp", [])

.controller("idController", function($scope) {

$scope.first = "RRtutor";

} );

</script>

</body>

</html>

 

Output

Angularjs scope example

 

 

Example #2:

Scope function: the following example shows the AngularJS "scope" features in web application.

<!DOCTYPE html>

<html lang="en">

<head>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

</head>

<body ng-app = "conapp">

<h3> AngularJS Scope Function </h3>

<div ng-controller = "idController" >

<p> Welcome: <b>{{first.title}} </b>!</p>

</div>

<script>

angular.module("conapp", [])

.controller("idController", function($scope) {

$scope.first = {};

$scope.first.title = "Akash";

} );

</script>

</body>

</html>

 

Output

Angularjs scope example 2

 

Summary

The model of the web application refers to the scope. The view and the controller have access to the scope, a JavaScript object with attributes and functions