Question

我已经浏览了网页以整合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'
]);

然而，当我启动应用程序时，我只是得到一个空白页面。我在这里错过了什么吗？

由于

Answer 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);
  };
});

AngularJS和BootstrapJS无法一起工作

1 个答案: