什么是 $scope和$ rootScope

$scope是一个JavaScript对象，指的是应用程序的数据。它有属性和方法，对视图和控制器都可用。因此，我们可以说 $scope是HTML视图和JavaScript控制器之间的绑定部分。$ scope拥有所有需要在视图中显示的模型数据。

AngularJS是一个基于MVC的框架。MVC是指模型视图控制器。MVC被用来将应用逻辑与用户界面层隔离。模型负责维护应用程序的数据，视图负责向用户显示数据，控制器是软件代码，负责模型和视图之间的交互。范围是模型。

步骤:

在制作控制器时，将$scope对象作为一个参数传递。

     app.controller("myCrtl",function($scope){});

在控制器内为$scope对象添加属性。

     app.controller("myCrtl",function(scope){scope.name="GeeksforGeeks";
    });

使用绑定表达式复制你想显示的属性值。

         <p> Name: {{name}}</p>

例子1：了解范围的工作。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="myApp" ng-controller="myCtrl">
    <h1>{{title}}</h1>
    <label>Enter a number:</label>
    <input type="number" min=0 ng-model="a">
    <br><br>
    <label>Enter a number:</label>
    <input type="number" min=0 ng-model="b">
    <br><br>
    <button type="button" ng-click="add()">
        Add
    </button>
    <p>Answer: {{answer}}</p>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function (scope) {
            scope.a = 0;
            scope.b = 0;
            scope.answer = 0;
            scope.title = "GeeksforGeeks";
            scope.add = function () {
                scope.answer =scope.a + $scope.b;
            };
        });
    </script>
</body>
  
</html>

输出:

什么是$scope和$rootScope ?

示例 1

解释：在这个例子中，在控制器 “myCtrl “的范围中添加了各种属性。当你在作用域中添加一个属性时，视图就可以访问这些属性。在作用域中创建的 “title “属性在视图中使用{{}}被访问。同样地，当你从视图中改变一个属性的值时，它也反映在作用域中。变量’a’、’b’和’answer’的值最初是0。当用户输入两个数字并点击 “添加 “按钮时，’a’、’b’和’answer’的值发生变化，并再次反映在视图中。

实例2：用字符串、对象、函数进行范围工作

在这个例子中，在脚本中，我们做了一个名为 “myApp “的模块。我们在模块中添加了一个名为 “myCtrl “的控制器。在控制器中，我们在$scope中加入了字符串、函数、对象等属性。这些属性的值会显示在视图中。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="myApp" ng-controller="myCtrl">
    <h1>{{title}}</h1>
    <form>
        <label>Enter first name: </label>
        <input type="text" ng-model="firstname">
        <br><br>
        <label>Enter last name: </label>
        <input type="text" ng-model="lastname">
    </form>
    <p>Name: {{name()}}</p>
  
    <p>Courses:</p>
  
    <ul ng-repeat="x in subjects.courses">
        <li>{{x}}</li>
    </ul>
    <p>Tutorials:</p>
  
    <ul ng-repeat="y in subjects.tutorials">
        <li>{{y}}</li>
    </ul>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function (scope) {
            scope.title = "GeeksforGeeks";
            scope.firstname = "";
            scope.lastname = "";
            scope.name = function () {
                returnscope.firstname +
                  " " +
                  scope.lastname;
            };
            scope.subjects = {
                courses: ["Live Courses",
                    "Self-Paced Courses",
                    "School Courses"],
                tutorials: ["Practice DS and Algo.",
                    "Algorithms",
                    "Data Structure",
                    "Software Designs",
                    "CS Subjects"],
            };
        })
    </script>
</body>
  
</html>

输出:

什么是$scope和$rootScope ?

示例 2

AngularJS中的作用域在本质上是分层的：$rootScope作为一个全局变量。AngularJS应用程序的所有 $scopes都是$ rootscope的子女。一个应用程序只能有一个$rootScope。它是在包含ng-app指令的HTML元素上创建的作用域，在整个应用中都是可用的。

例子3：了解 $scope和$ rootScope的工作。

在这个例子中，加载应用程序时，创建了一个名为message1的属性，属于rootScope。我们还创建了一个名为 “myCtrl “的控制器，并在该范围内添加了一个属性message2。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="myApp">
    <p>Message: {{message1}}</p>
  
    <div ng-controller="myCtrl">
        <p>Message: {{message1}}</p>
        <p>Message: {{message2}}</p>
        <p>Message: {{message4}}</p>
    </div>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.run(function (rootScope) {
            rootScope.message1 =
                "This is rootScope message 1.";
            rootScope.message2 =
                "This is rootScope message 2."
        });
        app.controller("myCtrl", function (scope) {
            scope.message2 = "This is scope message 2.";
            scope.message4 = "This is scope message 4."
        });
    </script>
</body>
  
</html>