La $ubicación en AngularJS básicamente usa el servicio window.location. La ubicación $se usa para leer o cambiar la URL en el navegador y se usa para reflejar esa URL en nuestra página. Cualquier cambio realizado en la URL se almacena en el servicio de $ubicación en AngularJS. Hay varios métodos en el servicio de $ubicación como absUrl(), url([URL]), protocol(), host(), port(), path([path]), search(search, [paramValue]), hash([hash]), replace() y estado([estado]). Además, hay dos eventos disponibles, es decir, $LocationChangeStart y $LocationChangeSuccess.
Ahora veamos algunos métodos uno por uno del servicio de $ubicación.
1. Método absUrl(): Devuelve la ruta completa de su página y es un método de solo lectura.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$location service</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="locationService">
<h4>Click on the button to see the current URL</h4>
<div ng-controller="locationServiceController">
<button ng-click="seeURL()">See URL</button>
<p>Current URL is :: {{currentURL}}</p>
</div>
<script>
var app = angular.module('locationService', []);
app.controller('locationServiceController',
['$scope', '$location', function ($scope, $location) {
$scope.seeURL = function () {
$scope.currentURL = $location.absUrl();
}
}]);
</script>
</body>
</html>
Producción:
2. Método port(): También es un método de solo lectura que devuelve el número de puerto en el que está trabajando actualmente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$location service</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="locationService">
<h4>
Click on the button to see
the current PORT number
</h4>
<div ng-controller="locationServiceController">
<button ng-click="seePort()">See Port Number</button>
<p>Current Port number is :: {{currentPort}}</p>
</div>
<script>
var app = angular.module('locationService', []);
app.controller('locationServiceController',
['$scope', '$location',
function ($scope, $location) {
$scope.seePort = function () {
$scope.currentPort = $location.port();
}
}]);
</script>
</body>
</html>
Producción:
3. Método protocol(): Devuelve el protocolo actual de la URL actual y también es un método de solo lectura.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$location service</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="locationService">
<h4>Click on the button to see the current Protocol</h4>
<div ng-controller="locationServiceController">
<button ng-click="seeProtocol()">See Protocol</button>
<p>Current Protocol is :: {{currentProtocol}}</p>
</div>
<script>
var app = angular.module('locationService', []);
app.controller('locationServiceController',
['$scope', '$location',
function ($scope, $location) {
$scope.seeProtocol = function () {
$scope.currentProtocol
= $location.protocol();
}
}]);
</script>
</body>
</html>
Producción:
4. Método host(): Devuelve el host actual de la URL actual y también es un método de solo lectura.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$location service</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="locationService">
<h4>Click on the button to see the current Host</h4>
<div ng-controller="locationServiceController">
<button ng-click="seeHost()">See Host</button>
<p>Current Host is :: {{currentHost}}</p>
</div>
<script>
var app = angular.module('locationService', []);
app.controller('locationServiceController',
['$scope', '$location', function ($scope, $location) {
$scope.seeHost = function () {
$scope.currentHost = $location.host();
}
}]);
</script>
</body>
</html>
Producción:
5. Método search(): Es un método de lectura y escritura de $ubicación. Devuelve los parámetros de búsqueda actuales de la URL cuando se pasan sin parámetros y cuando se pasan con parámetros devuelve el objeto $ubicación.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$location service</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="locationService">
<h4>Click on the button to see the current Search</h4>
<div ng-controller="locationServiceController">
<button ng-click="seeSearch()">See Search</button>
<p>Current Search is :: {{currentSearch}}</p>
</div>
<script>
var app = angular.module('locationService', []);
app.controller('locationServiceController',
['$scope', '$location', function ($scope, $location) {
$scope.seeSearch = function () {
$location.search("website", "GeeksForGeeks");
$scope.currentSearch = $location.search();
}
}]);
</script>
</body>
</html>
Producción:
6. Método hash(): Es un método de lectura y escritura del servicio de $ubicación. Devuelve el valor hash actual de la URL actual cuando se llama sin parámetros y cuando se llama con parámetros devuelve el objeto $ubicación.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$location service</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="locationService">
<h4>Click on the button to see the current Hash Value</h4>
<div ng-controller="locationServiceController">
<button ng-click="seeHash()">See Hash</button>
<p>Current Hash Value is :: {{currentHash}}</p>
</div>
<script>
var app = angular.module('locationService', []);
app.controller('locationServiceController',
['$scope', '$location', function ($scope, $location) {
$scope.seeHash = function () {
$location.hash("geeks");
$scope.currentHash = $location.hash();
}
}]);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por jimishravat2802 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA