Angular与ui.bootstrap呈现空白页面

I used Yeoman to create an angular application that included bootstrap. Then, I used Bower to install ui.bootstrap using the instructions on the readme at https://github.com/angular-ui/bootstrap.

我使用Yeoman创建了一个包含bootstrap的角度应用程序。然后,我使用Bower安装ui.bootstrap,使用自述文件中的说明https://github.com/angular-ui/bootstrap。

I am now trying to adapt the carousel example at http://angular-ui.github.io/bootstrap/.

我现在正尝试在http://angular-ui.github.io/bootstrap/上调整轮播示例。

When I include ui.bootstrap, I just get a blank page. I tried the page in Chrome and Firefox and don't get any errors or output in the console.

当我包含ui.bootstrap时,我只是得到一个空白页面。我在Chrome和Firefox中尝试了该页面,并且在控制台中没有出现任何错误或输出。

Here's my js (cat.js):

这是我的js(cat.js):

 'use strict';
angular.module('yoApp', ['ui.bootstrap'])
.controller('CatCtrl', function ($scope, $http) {

  var cats = $http.get('/rt/cats.json')
  .success(
    function (data, status, headers, config) { 
      $scope.slides = data;
    });

  $scope.myInterval = 5000;
  var slides = $scope.slides;
  $scope.addSlide = function() {
    var newWidth = 200 + ((slides.length + (25 * slides.length)) % 150);
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/200',
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
      ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i=0; i<4; i++) {
    $scope.addSlide();
  }
});

I tried this with and without the http.get.

我和http.get一起尝试了这个。

The html page:

html页面:

<carousel interval="myInterval">
    <slide ng-repeat="slide in slides" active="slide.active">
      <img ng-src="{{slide.image}}" style="margin:auto;">
      <div class="carousel-caption">
        <h4>Slide {{$index}}</h4>
        <p>{{slide.text}}</p>
      </div>
    </slide>
  </carousel>
  <div class="row-fluid">
    <div class="span6">
      <ul>
        <li ng-repeat="slide in slides">
          <button class="btn btn-mini" ng-class="{'btn-info': !slide.active, 'btn-success': slide.active}" ng-disabled="slide.active" ng-click="slide.active = true">select</button>
          {{$index}}: {{slide.text}}
        </li>
      </ul>
      <a class="btn" ng-click="addSlide()">Add Slide</a>
    </div>
    <div class="span6">
      Interval, in milliseconds: <input type="number" ng-model="myInterval">
      <br />Enter a negative number to stop the interval.
    </div>
  </div>

I have my route set up:

我的路线设置如下:

'use strict';

angular.module('yoApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.bootstrap'
])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/cat', {
        templateUrl: 'views/cat.html',
        controller: 'CatCtrl'
      })
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

The weird thing is that when I take out the ['ui.bootstrap'] in cat.js, part of the page actually renders but I get these errors in Chrome:

奇怪的是,当我在cat.js中取出['ui.bootstrap']时,页面的一部分实际渲染但我在Chrome中遇到了这些错误:

> TypeError: Cannot read property 'length' of undefined
    at Object.$scope.addSlide (http://localhost:9000/scripts/controllers/cat.js:14:34)
    at new <anonymous> (http://localhost:9000/scripts/controllers/cat.js:22:12)
    at invoke (http://localhost:9000/bower_components/angular/angular.js:3000:28)
    at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3012:23)
    at http://localhost:9000/bower_components/angular/angular.js:4981:24
    at update (http://localhost:9000/bower_components/angular/angular.js:14509:26)
    at Object.Scope.$broadcast (http://localhost:9000/bower_components/angular/angular.js:8468:28)
    at http://localhost:9000/bower_components/angular/angular.js:7614:26
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59)
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59) angular.js:5930
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/template/carousel/slide.html
Error: Failed to load template: template/carousel/slide.html
    at Error (<anonymous>)
    at http://localhost:9000/bower_components/angular/angular.js:4725:17
    at http://localhost:9000/bower_components/angular/angular.js:9144:11
    at wrappedErrback (http://localhost:9000/bower_components/angular/angular.js:7004:57)
    at http://localhost:9000/bower_components/angular/angular.js:7080:53
    at Object.Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:8218:28)
    at Object.Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:8077:25)
    at Object.Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:8304:24)
    at done (http://localhost:9000/bower_components/angular/angular.js:9357:20)
    at completeRequest (http://localhost:9000/bower_components/angular/angular.js:9520:7) 

Any ideas on what I could be doing wrong? I've been able to get other features to work in other controllers and can get plain text to render inside the Bootstrap theme, but for some reason I am not able to get the carousel to work.

关于我可能做错的任何想法?我已经能够在其他控制器中使用其他功能,并且可以在Bootstrap主题中获取纯文本,但由于某种原因,我无法让旋转木马工作。

Here's my index.html with my includes after following pkozlowski-opensource's suggestion. I am only able to get the carousel page to render by leaving out the ['ui.bootstrap'] in the module declaration so I must still be doing something wrong.

按照pkozlowski-opensource的建议,这是我的index.html和我的包含。我只能通过在模块声明中省略['ui.bootstrap']来获取旋转木马页面,所以我仍然必须做错事。

    <!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <!-- build:css(.tmp) styles/main.css -->
        <link rel="stylesheet" href="styles/bootstrap.css">
        <link rel="stylesheet" href="styles/main.css">
        <!-- endbuild -->
</head>
  <body ng-app="yoApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!--[if lt IE 9]>
      <script src="bower_components/es5-shim/es5-shim.js"></script>
      <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container" ng-view=""></div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>

        <!-- build:js scripts/plugins.js -->
<!--         // <script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
        // <script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script> -->
<!--         // <script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script> -->
        <!-- endbuild -->

        <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

        <!-- build:js scripts/modules.js -->

        <script src="bower_components/angular-resource/angular-resource.js"></script>
        <script src="bower_components/angular-cookies/angular-cookies.js"></script>
        <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

        <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="//localhost:35729/livereload.js"></script>
        <script src="scripts/app.js"></script>

         <script src="scripts/controllers/cat.js"></script>
        <!-- endbuild -->
</body>
</html>

1 个解决方案

#1

As @Elise Chant pointed out in the comments above - including:

正如@Elise Chant在上述评论中指出的那样 - 包括:

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

fixed the 404 errors referencing the /template/X.html files for me.

修复了引用/template/X.html文件的404错误。