我已经浏览了网页以整合Angular和Bootstrap,并发现我应该使用https://angular-ui.github.io/bootstrap/。我已经遵循了很多说明,这就是我对index.html文件的所有内容:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://code.angularjs.org/1.5.3/angular-route.min.js"></script>
<script src="https://raw.githubusercontent.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-1.3.2-csp.css">
<script src="static/js/app.js"></script>
<script src="static/js/home.js"></script>
<script src="static/js/about.js"></script>
<script src="static/js/bootstraptest.js"></script>
</head>
<body ng-app="app">
<div ng-view></div>
</body>
然后,在我的app.js文件中,我有以下内容:
var app = angular.module('app', [
'ngRoute',
'px_app.home',
'px_app.about',
'px_app.bootstraptest',
'ui.bootstrap'
]);
然而,当我启动应用程序时,我只是得到一个空白页面。我在这里错过了什么吗?
由于
答案 0 :(得分:-1)
当您需要从头开始时,通常很难启动和运行。 从一个工作示例开始,然后从那里开始。
选择http://angular-ui.github.io/bootstrap/上的其中一个plunker链接并从那里开始工作。 (请注意,他们不会在safari中工作!我必须使用Chrome才能让他们工作。)您的页面不会完全为空。
请参阅示例http://plnkr.co/edit/M4r8nohnrmgMOhUfGwm4?p=options,我是通过关注&#34;编辑plunker&#34;创建的。简单警报案例的链接。
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AlertDemoCtrl">
<script type="text/ng-template" id="alert.html">
<div class="alert" style="background-color:#fa39c3;color:white" role="alert">
<div ng-transclude></div>
</div>
</script>
<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
<uib-alert template-url="alert.html">A happy alert!</uib-alert>
<button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>
</body>
</html>
使用example.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').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);
};
});