如何使用Angular UI Bootstrap制作警报

在这篇文章中，我们将看到如何使用Angular UI Bootstrap制作警报。Angular UI Bootstrap是一个Angular JS框架，由Angular UI开发者创建，用于提供更好的UI，可以很容易地使用。

警报指令用于从静态和动态模型数据生成警报。

语法:

<div uib-alert>alert</div>

从链接中下载AngularUI：。

https://angular-ui.github.io/bootstrap

步骤:

首先，添加你的项目所需的Angular UI bootstrap脚本。

<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>

用Alert的UIBootStrap类制作div，这将使UI寻找警报。
现在使用这些类制作不同类型的Alert并运行代码。

示例:

<!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>

输出:

如何使用Angular UI Bootstrap制作警报？