El servicio $window se refiere al objeto de la ventana del navegador. Está disponible globalmente en JavaScript, por lo que causa problemas de comprobabilidad. En AngularJS, no está disponible globalmente. Incluye varios métodos como cuadro de alerta, cuadro de aviso, cuadro de confirmación, etc.
Ahora veamos la implementación real del servicio $window en Angular JS:
1. Método $window.alert(): Este método se utiliza para mostrar el mensaje de alerta en la pantalla de la ventana.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$window service</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="windowService">
<h2>Click on button to see the alert box</h2>
<div ng-controller="windowServiceController">
<button ng-click="alertBox()">
Show Alert Box
</button>
</div>
<script>
var app = angular.module('windowService', []);
app.controller('windowServiceController',
['$scope', '$window',
function ($scope, $window) {
$scope.message = "This is Alert Box";
$scope.alertBox = function () {
$window.alert($scope.message);
}
}]);
</script>
</body>
</html>
Producción:
2. Método $window.prompt(): Este método se utiliza para mostrar el mensaje de aviso en la pantalla.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$window service</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="windowService">
<h2>Click on button to see the Prompt box</h2>
<div ng-controller="windowServiceController">
<button ng-click="promptBox()">
Show Prompt Box
</button>
<p>{{fullname}}</p>
</div>
<script>
var app = angular.module('windowService', []);
app.controller('windowServiceController',
['$scope', '$window',
function ($scope, $window) {
$scope.promptBox = function () {
var name = $window.prompt('Enter Your Name');
$scope.fullname = 'Hello ' + name;
}
}]);
</script>
</body>
</html>
Producción:
3. Método $window.confirm(): Este método se utiliza para mostrar un cuadro de confirmación en la pantalla.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$window service</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="windowService">
<h2>Click on button to see the Confirm box</h2>
<div ng-controller="windowServiceController">
<button ng-click="confirmBox()">
Show Confirm Box
</button>
<p>{{confirmMessage}}</p>
</div>
<script>
var app = angular.module('windowService', []);
app.controller('windowServiceController',
['$scope', '$window',
function ($scope, $window) {
$scope.confirmBox = function () {
var choice = $window.confirm("Are you sure ?")
if (choice == true)
$scope.confirmMessage = 'Welcome';
else
$scope.confirmMessage = 'Sorry';
}
}]);
</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