AngularJS学习之旅—AngularJS 服务(八)

发布时间：2020-12-17 10:38:50 所属栏目：安全来源：网络整理

导读：$location vs window.location table class="reference" style="height: 173px; width: 1043px" tr ? window.location $location.service /tr tr tdAPI/td td暴露一个能被读写的对象/td td暴露jquery风格的读写器/td /tr tr td是否在AngularJS应用生命周期中

<tr>

</tr>
<tr>
<td>API</td>
<td>暴露一个能被读写的对象</td>
<td>暴露jquery风格的读写器</td>

</tr>
<tr>
<td>是否在AngularJS应用生命周期中和应用整合</td>
<td>否</td>
<td>可获取到应用生命周期内的每一个阶段，并且和$watch整合</td>

</tr>
<tr>
<td>是否和HTML5 API的无缝整合</td>
<td>否</td>
<td>是（对低级浏览器优雅降级）</td>

</tr>
<tr>
<td>和应用的上下文是否相关</td>
<td>否，window.location.path返回"/docroot/actual/path"</td>
<td>是，$location.path()返回"/actual/path"</td>

</tr>

$http?是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

$timeout?服务对应了 JS?window.setTimeout?函数。

?

$interval?服务对应了 JS?window.setInterval?函数。

实例

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

<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>

<p>欢迎信息:</p>
<h3>{{myWelcome}}</h3>
<p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>

<p>两秒后显示信息:</p>
<h1>{{myHeader}}</h1>
<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>

<p>现在时间是:</p>
<h1>{{theTime}}</h1>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>

<p>255 的16进制是:</p>
<h1>{{hex}}</h1>
<p>自定义服务，用于转换16进制数：</p>

<p>在过滤器中使用服务:</p>
<h1>{{255 | myFormat}}</h1>

<p>在获取数组 [255,251,200] 值时使用过滤器:</p>
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
<p>过滤器使用服务将10进制转换为16进制。</p>
</div>
</body>

</html>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function ($scope,$location,$http,$timeout,$interval,hexafy) {
//$location服务
 $scope.myUrl = $location.absUrl();
//$http服务
 $http.get("welcome.json").then(function (response) {
$scope.myWelcome = response.data[0].name;
});
//$timeout服务
 $scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
},2000);
//$interval 服务
 $interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},1000);
//自定义服务
 $scope.hex = hexafy.myFunc(255);
//在对象数组中获取值时你可以使用过滤器
 $scope.counts = [255,251,200];

});
</span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;自定义服务</span>

app.service('hexafy',function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
//过滤器中，使用自定义服务
 app.filter('myFormat',['hexafy',function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

$location vs window.location <table class="reference" style="height: 173px; width: 1043px">
?	window.location	$location.service

　　$location vs window.location

window.location

$location.service