I have a small node project that I'm trying to integrate angularjs into. I have a partial view which uses ng-controller and ng-repeat.
Here is my angular.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css"/>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
<li>view3</li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="services.js"></script>
<script src="controllers.js"></script>
<script src="filters.js"></script>
<script src="directives.js"></script>
</body>
</html>
partial3.html (this is the partial):
<div ng-controller="PersonCtrl">
<div ng-repeat="person in persons">
{{person.last}} , {{person.first}}
</div>
I just get 5 commas without the five records in the person controller.
.controller('PersonCtrl', ['$scope', function($scope) {
$scope.persons = [
{ first: "Henry", middle: "Jacob", last: "Mendocino", gender: "M" },
{ first: "Ann", middle: "Cecilia", last: "Negro", gender: "F" },
{ first: "Berta", middle: "Ann", last: "Sallyfield", gender: "F" },
{ first: "Rudolf", middle: "John", last: "Waters", gender: "M" },
{ first: "Ken", middle: "Adam", last: "Aundry", gender: "M" },
]
}])
Here is my app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.when('/view3', {templateUrl: 'partials/partial3.html', controller: 'PersonCtrl'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Can someone please help me figure out why my data isn't being showed.
Thanks.
He/She needed to arrange his/her filesystem and express code to point to the right places...most importantly - he/she needed:
app.use(express.static(__dirname + '/views'));
so that the app knew where to serve the static content from (index.html).
Related
I am trying to access an element in an iframe and .find() is not able to select any element. If I access .contents[0] I do get the entire document but if I try .find( "*" ) or any other selector it returns an empty object. Both html file are in the same folder.
var iframe_all = $('#iframe_vote').contents().find( "*" )
var iframe_document = $('#iframe_vote').contents()[0]
console.log(iframe_all)
console.log(iframe_document)
Result:
Object { length: 0, prevObject: {…} }
HTMLDocument file:///c:/Users/piero/OneDrive/Documents/Visual%20Studio%202017/Projects/marketPredictions/marketPredictions/vote.html
URL: "file:///c:/Users/piero/OneDrive/Documents/Visual%20Studio%202017/Projects/marketPredictions/marketPredictions/vote.html"
activeElement: <body>
alinkColor: ""
all: HTMLAllCollection { 0: html.no-js, 1: head, 2: meta, … }
anchors: HTMLCollection []
applets: NodeList []
baseURI: "file:///c:/Users/piero/OneDrive/Documents/Visual%20Studio%202017/Projects/marketPredictions/marketPredictions/vote.html"
bgColor: ""
body: <body>
characterSet: "UTF-8"
charset: "UTF-8"
HTML:
<!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, initial-scale=1">
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css\vote.css">
</head>
<body>
<a id = 'btnPlus' href="#plus">
<span class="bg" id="plus"></span>
<span class="symbol"></span>
</a>
<a class="button minus" id = 'btnMinus'href="#minus">
<span class="bg" id="minus"></span>
<span class="symbol"></span>
</a>
<span class="cancel">
Clear
</span>
</body>
</html>
you will need to setup a server environment to work with iframes, file:/// isnt a valid domain and will cause issues with cross domain validation
remember that both pages need to be hosted on the same domain/server
this is a security measure, here is some more information: https://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html
I am trying to follow a tutorial from Dunebook.
https://www.dunebook.com/create-an-e-commerce-site-with-angularjs/4/
I've gotten stuck as the UI-view is not rendering (I am checking it is rendering as specified in the page I link to right above "Adding Animations to the view transitions"). I've looked this over a few times and i'm not sure what I am doing wrong...
The code.
Bower.Json
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "1.2.x",
"angular-ui-router": "",
"angular-animate": "1.2.x",
"angular-facebook": "",
"angular-loader": "1.2.x",
"angular-mocks": "~1.2.x",
"html5-boilerplate": "~4.3.0"
}
}
Index.HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AngularJS tutorial</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/simplex/bootstrap.min.css"/>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="container">
<a class="navbar-brand" href="/">Garage Commerce</a>
<ul class="nav navbar-nav">
<li>Toys</li>
<li>Books</li>
</ul>
</nav>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="container-fluid">
<div ui-view></div>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ui.router',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
])
config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('add', {
url:'/add',
templateUrl: 'partials/add-products.html',
controller: 'AddProductsCtrl'
});
$stateProvider.state('category', {
url:'/:category',
templateUrl: 'partials/products.html',
controller: 'ProductsCtrl'
});
$stateProvider.state('category.products', {
url:'/:id',
templateUrl: 'partials/products.details.html',
controller: 'ProductDetailsCtrl'
});
}
])
controllers.js
'use strict';
/* Controllers */
angular.module('myApp.controllers', []).controller('ProductsCtrl', ['$scope', '$stateParams',
function($scope, $stateParams) {
$scope.category = $stateParams.category
$scope.productsListing = [{
product_id: '123',
title: ' Baby Rattles',
price: 2,
userName: 'John Doe'
}, {
product_id: '456',
title: ' Kiddy Laptop',
price: 12,
userName: 'Sandy Peters'
}
]
}
])
.controller('ProductDetailsCtrl', ['$scope', '$stateParams',function($scope, $stateParams) {
$scope.id = $stateParams.id;
$scope.product = {
'title': 'Kiddy Laptop',
'description': 'lorem lipsum do re me.',
'price': 12,
'userName': 'Sandy Peters'
}
}
]);
products.html
<h1>{{category}}</h1>
<hr/>
<!-- 1st Column -->
<div class="col-md-5">
<div class="row-fluid listing sidebar" >
<div class="listing" ng-repeat="product in productsListing">
<h2><a ng-href="#/{{category%20+'/'+product.product_id}}">{{product.title}}</a> </h2>
<h5>{{product.price |currency}}</h5>
<p><i>-by:{{product.userName}}</i></p>
</div>
</div>
</div>
</div>
<!-- 2nd Column -->
<div class="col-md-7">
<div class="slide" ui-view></div>
</div>
products.details.html
<p class="title">{{id}}</p>
<h1>{{product.title}}</h1>
<p>{{product.description}}</p>
<h3>{{product.price|currency}}</h3>
It all appears fairly identical to the tutorial. I'm confused and feeling pretty dumb.
If this is your exact code, you are missing a . between your module definition and calling config.
angular.module('myApp', [...])
.config(['$stateProvider',
function($stateProvider) {
...
}
])
instead of
angular.module('myApp', [...])
config(['$stateProvider',
function($stateProvider) {
...
}
])
It actually makes sense that this is the issue, as your ui-view is not working would be caused by the lack of state definitions.
I am very new to angular Js, I am using it with MVC application in dot net.There is a simple page containing a textbox to enter value.But as I call this page,the page starts getting refreshed.I dont know where I have gone wrong.Please help me for the same.
My JS
appRoot.controller('CreateSubjectController', function ($scope, $location, $resource) {
usersubject = {};
$scope.addSubject = function (subject) {
$scope.subject.subjectname = subject.subjectname;
}
});
My app.js
// Main configuration file. Sets up AngularJS module and routes and any other config objects
var appRoot = angular.module('main', ['ngRoute', 'ngGrid', 'ngResource', 'angularStart.services', 'angularStart.directives']); //Define the main module
appRoot
.config(['$routeProvider', function ($routeProvider) {
//Setup routes to load partial templates from server. TemplateUrl is the location for the server view (Razor .cshtml view)
$routeProvider
.when('/home', { templateUrl: '/home/main', controller: 'MainController' })
.when('/contact', { templateUrl: '/home/contact', controller: 'ContactController' })
.when('/about', { templateUrl: '/home/about', controller: 'AboutController' })
.when('/demo', { templateUrl: '/home/demo', controller: 'DemoController' })
.when('/createSubject', { templateUrl: '/Subject/createSubject', controller: 'CreateSubjectController' })
.when('/angular', { templateUrl: '/home/angular' })
.otherwise({ redirectTo: '/home' });
}])
.controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
$scope.$on('$routeChangeSuccess', function (e, current, previous) {
$scope.activeViewPath = $location.path();
});
}]);
My view
#{
ViewBag.Title = "createSubject";
}
<h2>createSubject</h2>
<div>
<input type="text" data-ng-model="subject.subjectname" />
<input type="button" id="btnSubmit" class="btn" data-ng-click="addSubject(subject)" value="Save" />
</div>
my Master Page
<!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>
<title>AngularStart1</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/bootstrap")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body data-ng-app="main" data-ng-controller="RootController">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href='#/home'>AngularStart1</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li data-ng-class="{active : activeViewPath==='/home'}"><a href='#/home'>Home</a></li>
<li data-ng-class="{active : activeViewPath==='/demo'}">Demo</li>
<li data-ng-class="{active : activeViewPath==='/angular'}"><a href='#/angular'>Learn Angular</a></li>
<li data-ng-class="{active : activeViewPath==='/about'}"><a href='#/about'>About</a></li>
<li data-ng-class="{active : activeViewPath==='/contact'}"><a href='#/contact'>Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/angular")
#Scripts.Render("~/bundles/app")
#RenderSection("scripts", required: false)
</body>
</html>
I am starting out to learn angular and I want to make a one page app. I have mvc structure for angular installed via yo angular
I am trying to populate the main div with about and contact pages. However for some reason it just doesnt work for me and my browser just crashes (I guess I am putting it into infinite loop)
<div ng-controller="mainContent">
<div id="main">
<div ng-view></div>
</div>
</div>
so this is how my app is structured.
app
|
|------------scripts
| |
| ---------controllers
| | |
| | main.js
| app.js
|
|-------------views
| |
| about.html
| contact.html
| main.html
|
|
index.html
here are my files
file name : index.html
<!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">
<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 styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="myAngularApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![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>
<!--[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]-->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.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="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
filename: app.js
'use strict';
angular.module("myAngularApp", ["ui-bootstrap-tpls.js"]);
angular
.module('myAngularApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl : 'views/about.html',
controller : 'aboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
filenmae: main.js
'use strict';
angular.module('myAngularApp')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
angular.module("myAngularApp")
.controller('mainContent', function ($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
angular.module("myAngularApp")
.controller('aboutCtrl', function ($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
angular.module("myAngularApp")
.controller('contactCtrl', function ($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
What can I do to fix this routing issues and have about and contact pages open up at the right place in main.
Thanks
A typical cause of infitine loop in relation to angular routing, is that one of your partials includes the ng-view directive, which tells angular to look in the router for the view to load, which then loads the partial with the ng-view directive again, which then tells angular to look at the router and load the view again and .. yeah, you get it ;)
So, check that you only have the ng-view directive only in your index.html (main container).
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.
I am now trying to adapt the carousel example at 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.
Here's 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 the http.get.
The 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 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:
> 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.
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.
<!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 upgrade your browser 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>
As #Elise Chant pointed out in the comments above - including:
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
fixed the 404 errors referencing the /template/X.html files for me.