angular-ui-bootstrap (1)

###初探

####入門， 建立項目，新建一個頁面，命名爲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>

而後運行，若是不出意外的話，我相信是可以運行起來的，具體截圖我就不上了。