范围的重要性

由于 Angular 使用 HTML 扩展网页和普通 Javascript 来添加逻辑，因此可以使用 ng-app ， ng-controller 和一些内置指令（如 ng-if ， ng-repeat 等） 轻松创建网页。使用新的控制器语法，Angular 用户的新手可以将功能和数据附加到他们的控制器，而不是使用 $scope。

但是，迟早，重要的是要了解这个东西到底是什么。它将不断出现在示例中，因此了解一些内容非常重要。

好消息是它是一个简单而强大的概念。

创建以下内容时：

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>

哪里名住？

答案是 Angular 创建了一个 $rootScope 对象。这只是一个常规的 Javascript 对象，因此 name 是 $rootScope 对象上的一个属性：

angular.module("myApp", [])
  .run(function($rootScope) {
    $rootScope.name = "World!";
  });

就像 Javascript 中的全局范围一样，将项目添加到全局范围或 $rootScope 通常不是一个好主意。

当然，在大多数情况下，我们创建一个控制器并将我们所需的功能放入该控制器中。但是当我们创建一个控制器时，Angular 会发挥它的魔力并为该控制器创建一个 $scope 对象。这有时被称为本地范围。

所以，创建以下控制器：

<div ng-app="myApp">
  <div ng-controller="MyController">
    <h1>Hello {{ name }}</h1>
  </div>
</div>

允许通过 $scope 参数访问本地范围。

angular.module("myApp", [])
  .controller("MyController", function($scope) {
    $scope.name = "Mr Local!";
  });

没有 $scope 参数的控制器可能由于某种原因根本不需要它。但重要的是要意识到，即使使用 controllerAs 语法，也存在本地范围。

由于 $scope 是一个 JavaScript 对象，因此 Angular 神奇地将其设置为原型继承自 $rootScope。正如你可以想象的那样，可以有一系列范围。例如，你可以在父控制器中创建模型，并将其作为 $scope.model 附加到父控制器的作用域。

然后通过原型链，子控制器可以使用 $scope.model 在本地访问相同的模型。

这一切都不是最初明显的，因为它只是 Angular 在背景中发挥其魔力。但了解 $scope 是了解 Angular 如何工作的重要一步。