ui.bootstrapで角度を付けて空白ページをレンダリングする

Question

私はYeomanを使ってブートストラップを含む角型アプリケーションを作成しました。次に、私はBOWを使ってreadmeの指示に従ってにui.bootstrapをインストールしました。

私は現在、カルーセルの例をhttp://angular-ui.github.io/bootstrap/に適応しようとしています。

ui.bootstrapを含めると、空白のページが表示されます。私はChromeとFirefoxでこのページを試しましたが、コンソールにエラーや出力はありません。

は、ここに私の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(); 
    } 
}); 

私はとhttp.getせずにこれを試してみました。

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> 

私は私のルートが設定している：

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

に奇妙なことは、私は実際に、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) 

任意のアイデア？私は他のコントローラで動作する他の機能を手に入れることができ、Bootstrapテーマの中でレンダリングするプレーンテキストを得ることができますが、何らかの理由でカルーセルを動作させることができません。

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> 

Answer 1

@Eliseチャントは、上記のコメントで指摘したように - を含む：

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

は私のために/template/X.htmlファイルを参照する404エラーを修正しました。