实战之AngularJS 的Scope和Service的深入应用心得

Posted 2022-08-12 黎燃黎燃

AngularJS 的Scope

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

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

carname

</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">
    greeting
    <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">

lastname 家族成员:

<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>