2019独角兽企业重金招聘Python工程师标准>>> 
###初探
####入门， 创建项目，新建一个页面，命名为demo1.html,然后引入bootstrap，引入angular，再引入angular-ui-bootstrap。具体引入内容如下所示：
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular-ui-bootstrap/2.3.1/ui-bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.min.js"></script>
这边我使用的是cdn引入，当然你也可以直接下载到本地，引入。
接着就是创建页面中的内容，ng-app不能少，我们将ng-app写在html上，这样尽量避免出问题。我们写入ng-app="myApp"。接着我们写页面中的内容。入下所示：
<div ng-controller="AlertDemoCtrl">
<script type="text/ng-template" id="alert.html">
<div ng-transclude></div>
</script>
<div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($index)">{{alert.msg}}</div>
<div uib-alert template-url="alert.html" style="background-color:#fa39c3;color:white">A happy alert!</div>
<button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>
紧接着就是我们的js代码，具体内容如下所示：
<script type="text/javascript">
var app =angular.module('myApp', ['ui.bootstrap']);
app.controller('AlertDemoCtrl', function ($scope) {
$scope.alerts = [
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});
</script>
然后运行，如果不出意外的话，我相信是能够运行起来的，具体截图我就不上了。