<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>$location服务</title>
</head>
<!--
服务:服务是一个对象或函数,对外提供特定的功能.
内建服务:
1: $location是对原生Javascript中location对象属性和方法的封装。
2: $timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。
3: $filter在控制器中格式化数据。
4: $log打印调试信息
5: $http用于向服务端发起异步请求。
6: 同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。
-->
<body>
<dl ng-controller="DemoController">
<dt>{{title}}</dt>
<dd>absUrl: {{absUrl}}</dd>
<dd>url: {{url}}</dd>
<dd>host: {{host}}</dd>
<dd>search: {{search}}</dd>
<dd>hash: {{hash}}</dd>
<dd>protocol: {{protocol}}</dd>
<dd>port: {{port}}</dd>
</dl>
<script src="../libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
// $location内置服务是angularJS提前封装好的
// AngularJS 专门提供了一个帮你获URL地址一个服务
App.controller('DemoController', ['$scope', '$location', function($scope, $location) {
$scope.title = '学习$location服务';
$scope.absUrl = $location.absUrl();
$scope.url = $location.url();
$scope.host = $location.host();
$scope.search = $location.search();
$scope.hash = $location.hash();
$scope.protocol = $location.protocol();
$scope.port = $location.port();
}]);
for(var key in location) {
console.log(key + '=>' + location[key]);
}
</script>
</body>
</html>
$location服务解析地址栏中的URL(基于window.location),让你在应用代码中能获取到。改变地址栏中的URL会反应$location服务中,反之亦然。
$location服务:
- 暴露当前地址栏的URL,这样你就能
- 获取并监听URL。
- 改变URL。
- 当出现以下情况时同步URL
- 改变地址栏
- 点击了后退按钮(或者点击了历史链接)
- 点击了一个链接
- 一系列方法来获取URL对象的具体内容用(protocol, host, port, path, search, hash).formatDate