En este artículo, veremos cómo generar alertas utilizando el arranque de la interfaz de usuario angular. Angular UI Bootstrap es un marco Angular JS creado por desarrolladores de Angular UI para proporcionar una mejor interfaz de usuario que se puede usar fácilmente.
La directiva de alertas se utiliza para generar alertas.
<div uib-alert>alert</div>
Descarga AngularUI desde el enlace:
https://angular-ui.github.io/bootstrap
Acercarse:
- Primero, agregue los scripts de arranque de la interfaz de usuario angular necesarios para su proyecto.
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js”></script>
<script src=”https://ajax.googleapis.com/ajax /libs/angularjs/1.6.1/angular-animate.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js ”></script>
<script src=”https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js”></script>
- Cree div con las clases UIBootStrap de Alert que harán que la interfaz de usuario busque la alerta.
- Ahora haga diferentes tipos de Alerta usando esas clases y ejecute el código.
Ejemplo:
HTML
<!DOCTYPE html>
<html ng-app="gfg">
<head>
<!-- Adding CDN scripts required for our page -->
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js">
</script>
<script src=
"https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js">
</script>
<link href=
"https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<script>
// Adding Modules
angular.module('gfg', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('gfg').controller('Alert', function ($scope) {
});
</script>
</head>
<body>
<div ng-controller="Alert">
<!-- Making a simple class using uib-alert -->
<div uib-alert style="background-color:green;color:white">
A Simple Alert
</div>
<!-- Making a Warning Alert -->
<div uib-alert ng-class="'alert-warning'">Warning Alert</div>
<!-- Making a Danger Alert -->
<div uib-alert ng-class="'alert-danger'">Danger Alert</div>
<!-- Making a Success Alert -->
<div uib-alert ng-class="'alert-success'">Success Alert</div>
</div>
</body>
</html>
Producción:
Referencia: https://angular-ui.github.io/bootstrap/#!#alert