I used Yeoman to create an angular application that included loading. I then used Bower to install ui.bootstrap using the readme instructions at https://github.com/angular-ui/bootstrap .
Now I'm trying to adapt the carousel example to http://angular-ui.imtqy.com/bootstrap/ .
When I turn on ui.bootstrap, I just get a blank page. I tried the page in Chrome and Firefox and did not get any errors or results on the console.
Here is my 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 http.get.
Html page:
<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:
'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 strange thing is that when I output ['ui.bootstrap'] in cat.js, part of the page is actually displayed, but I get these errors 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)
Any ideas on what I might be doing wrong? I was able to get other functions to work in other controllers and get plain text for visualization inside the Bootstrap theme, but for some reason I cannot get the carousel to work.
Here is my index.html with my inclusion after the subsequent pkozlowski-opensource suggestion. I can only get the carousel page rendering, leaving ['ui.bootstrap'] in the module declaration, so I still have to do something wrong.
<!doctype html> <html class="no-js"> <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"> <link rel="stylesheet" href="styles/bootstrap.css"> <link rel="stylesheet" href="styles/main.css"> </head> <body ng-app="yoApp"> <div class="container" ng-view=""></div> <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> <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> <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> <script src="//localhost:35729/livereload.js"></script> <script src="scripts/app.js"></script> <script src="scripts/controllers/cat.js"></script> </body> </html>