Angolare con la pagina vuota di rendering di ui.bootstrap

Question

Ho usato Yeoman per creare un'applicazione angolare che includeva il bootstrap. Quindi, ho usato Bower per installare ui.bootstrap usando le istruzioni sul readme al https://github.com/angular-ui/bootstrap.

Attualmente sto provando ad adattare l'esempio di carosello allo http://angular-ui.github.io/bootstrap/.

Quando includo ui.bootstrap, ottengo solo una pagina vuota. Ho provato la pagina in Chrome e Firefox e non ho ricevuto errori o output nella console.

Ecco il mio 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(); 
    } 
}); 

Ho provato questo con e senza l'http.get.

la pagina 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> 

ho il mio percorso impostato:

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

La cosa strana è che quando prendo il ['ui.bootstrap'] in cat.js, parte della pagina in realtà esegue il rendering ma visualizzo questi errori in 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) 

Qualche idea su cosa potrei fare di sbagliato? Sono stato in grado di ottenere altre funzionalità per funzionare in altri controller e ottenere testo semplice per il rendering all'interno del tema Bootstrap, ma per qualche motivo non riesco a far funzionare il carosello.

Ecco il mio index.html con my include dopo aver seguito il suggerimento di pkozlowski-opensource. Sono in grado di visualizzare la pagina del carousel solo lasciando fuori ['ui.bootstrap'] nella dichiarazione del modulo, quindi devo ancora fare qualcosa di sbagliato.

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

Come @Elise Chant sottolineato nei commenti di cui sopra - tra cui:

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

fissato i 404 errori fanno riferimento i file /template/X.html per me.