Góc với ui.bootstrap hiển thị trang trống

Question

Tôi đã sử dụng Yeoman để tạo ứng dụng góc bao gồm bootstrap. Sau đó, tôi đã sử dụng Bower để cài đặt ui.bootstrap bằng cách sử dụng hướng dẫn trên readme tại https://github.com/angular-ui/bootstrap.

Tôi hiện đang cố gắng điều chỉnh ví dụ băng chuyền tại http://angular-ui.github.io/bootstrap/.

Khi tôi bao gồm ui.bootstrap, tôi chỉ nhận được một trang trống. Tôi đã thử trang trong Chrome và Firefox và không nhận được bất kỳ lỗi hoặc đầu ra nào trong bảng điều khiển.

Dưới đây là js của tôi (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(); 
    } 
}); 

tôi đã cố gắng với điều này và không có http.get.

Các trang 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> 

Tôi đã đường tôi thiết lập:

'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: '/' 
     }); 
    }); 

Điều kỳ lạ là khi tôi đưa ra các ['ui.bootstrap'] trong cat.js, một phần của trang thực sự hiển thị nhưng tôi gặp phải các lỗi này trong 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) 

Bất kỳ ý tưởng nào về những gì tôi có thể làm sai? Tôi đã có thể để có được các tính năng khác để làm việc trong các bộ điều khiển khác và có thể nhận được văn bản đơn giản để render bên trong chủ đề Bootstrap, nhưng vì một lý do nào đó tôi không thể có được băng chuyền để làm việc.

Đây là index.html của tôi kèm theo sau khi làm theo đề xuất của pkozlowski-opensource. Tôi chỉ có thể lấy trang băng chuyền để hiển thị bằng cách bỏ qua ['ui.bootstrap'] trong khai báo mô-đun vì vậy tôi vẫn phải làm điều gì đó sai.

<!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> 

Answer 1

Như @Elise Chant chỉ ra trong các ý kiến ​​ở trên - bao gồm:

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

cố định 404 lỗi tham khảo các tập tin /template/X.html cho tôi.