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

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

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>
相关文章
|
Java C#
angularJS学习小结——service
angularJS学习小结——service
95 0
|
前端开发 数据库 容器
AngularJS自定义服务(factory、service、provider)
AngularJS自定义服务(factory、service、provider)
|
监控 JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
|
监控 JavaScript 前端开发
|
JavaScript 容器 前端开发