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>

然后运行，如果不出意外的话，我相信是能够运行起来的，具体截图我就不上了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!