###初探javascript
####入门, 建立项目,新建一个页面,命名为demo1.html,而后引入bootstrap,引入angular,再引入angular-ui-bootstrap。具体引入内容以下所示:css
<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引入,固然你也能够直接下载到本地,引入。html
接着就是建立页面中的内容,ng-app不能少,咱们将ng-app写在html上,这样尽可能避免出问题。咱们写入ng-app="myApp"。接着咱们写页面中的内容。入下所示:java
<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代码,具体内容以下所示:bootstrap
<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>
而后运行,若是不出意外的话,我相信是可以运行起来的,具体截图我就不上了。app