AngularJS 的Scope

作用域是HTML（视图）和JavaScript（控制器）之间的链接。
作用域是一个具有可用方法和属性的对象。
作用域可应用于视图和控制器。
如何使用范围，在angularjs中创建控制器时，可以将$scope对象作为参数传递：

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

将scope对象添加到控制器时，视图（HTML）可以获得这些属性。
在视图中，不需要添加$scope前缀，只需添加属性名称，例如：｛carname｝。
angularjs的应用程序组成如下：
视图，即HTML。
模型，当前视图中可用的数据。
控制器，即JavaScript函数，可以添加或修改属性。
范围是一个模型。
Scope是一个JavaScript对象，具有可在视图和控制器中使用的属性和方法。

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>点我</button>    
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";
    $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
});
</script>

Scope 作用范围

了解当前使用的范围非常重要。
在上述两个示例中，只有一个作用域，因此处理起来相对简单。然而，在大型项目中，HTML DOM中有多个作用域。此时，需要知道哪个范围对应于使用的范围。

<div ng-app="myApp" ng-controller="myCtrl">

<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

根范围

所有应用程序都有一个 $rootscope，它可以作用于ng应用程序指令中包含的所有HTML元素。$rootscope可以在整个应用程序中使用。它是每个控制器中作用域的桥梁。rootscope定义的值可以在每个控制器中使用。

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}} 家族成员:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

AngularJS 服务(Service)

什么是服务？
在angularjs中，服务是可以在angularjs应用程序中使用的函数或对象。
Angularjs拥有30多个内置服务。
有一个$location服务可以返回当前页面的URL地址。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

为什么要使用服务？
在许多服务中，例如 $location服务，它可以使用DOM中存在的对象，例如窗口位置对象，但是窗口位置对象在angularjs应用程序中有一定的限制。 Angularjs将始终监视应用程序并处理事件更改。Angularjs使用$location服务而不是窗口。location对象更好。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

Angularjs$interval服务对应于JS窗口Setinterval函数。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

要使用自定义服务，需要在定义控制器和设置依赖项时独立添加它：

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

从对象数组获取值时，可以使用过滤器：

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>