角与ui.bootstrap呈现空白页 [英] Angular with ui.bootstrap rendering blank page
本文介绍了角与ui.bootstrap呈现空白页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用约曼创建一个包含引导角的应用程序。然后，我用鲍尔安装ui.bootstrap使用上的自述中的说明 https://github.com/angular-ui/bootstrap 。
我现在想在 http://angular-ui.github.io/bootstrap/
当我有ui.bootstrap，我只是得到一个空白页。我试过页面Chrome和Firefox，但没有得到在控制台中的任何错误或输出。
下面是我的JS（cat.js）：
使用严格的;
angular.module（'yoApp'，['ui.bootstrap']）
.controller（'CatCtrl'，函数（$范围，$ HTTP）{ VAR的猫= $ http.get（'/ RT / cats.json'）
。成功（
功能（数据，状态，头，配置）{
$ scope.slides =数据;
}）; $ scope.myInterval = 5000;
VAR幻灯片= $ scope.slides;
$ scope.addSlide =功能（）{
VAR newWidth = 200 +（（slides.length +（25 * slides.length））％150）;
slides.push（{
图片：http://placekitten.com/'+ newWidth +'/ 200'，
文本：['更多'，'特'，'大量的'，'剩余'] [slides.length％4] +''+
['猫'，'Kittys'，'猫科动物'，'Cutes'] [slides.length％4]
}）;
};
为（变量I = 0; I＆下; 4;我++）{
$ scope.addSlide（）;
}
}）;
我想这有和没有http.get。
HTML页：
＆LT;传送带间隔=myInterval＆GT;
＆LT;滑动NG重复=，在幻灯片幻灯片主动=slide.active＆GT;
＆LT; IMG NG-SRC ={{slide.image}}的风格=保证金：汽车;＆GT;
＆LT; DIV CLASS =旋转木马字幕＆GT;
＆LT; H4＆GT;幻灯{{$指数}}＆LT; / H4＆GT;
＆所述p为H.; {{slide.text}}＆下; / P＆GT;
＆LT; / DIV＆GT;
＆LT; /幻灯片＆GT;
＆LT; /转盘＆GT;
＆LT; DIV CLASS =排液＆GT;
＆LT; DIV CLASS =span6＆GT;
＆LT; UL＆GT;
＆LT;李NG重复=，在幻灯片幻灯片＆GT;
＆LT;按钮类=BTN BTN-迷你NG-CLASS ={'BTN-信息：slide.active，BTN-成功：slide.active！}NG残疾=slide.activeNG-点击=slide.active =真正的＆GT;选择＆LT; /按钮＆GT;
{{$指数}} {{slide.text}}
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT;一类=BTNNG点击=addSlide（）＆gt;添加幻灯片＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =span6＆GT;
间隔时间（毫秒）：其中，INPUT TYPE =数字NG-模式=myInterval＆GT;
＆LT; BR /＆GT;输入负数停止的时间间隔。
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
我有我的路线设置：
使用严格的;angular.module（'yoApp'，[
ngCookies'，
ngResource'，
ngSanitize'，
ui.bootstrap
]）
的.config（函数（$ routeProvider）{
$ routeProvider
。当（'/猫'，{
templateUrl：意见/ cat.html'，
控制器：'CatCtrl
}）
。什么时候（'/'， {
templateUrl：意见/ main.html中，
控制器：'MainCtrl
}）
。除此以外（{
redirectTo：'/'
}）;
}）;
奇怪的是，当我拿出 ['ui.bootstrap'] 在cat.js，页面的部分实际上呈现，但我得到这些错误铬：
＆GT;类型错误：无法读取的未定义的属性长度
在对象$ scope.addSlide。（HTTP：//本地主机：9000 /脚本/控制器/ cat.js：14：34）
在新的＆LT;＆匿名GT; （HTTP：//本地主机：9000 /脚本/控制器/ cat.js：22：12）
在调用（HTTP：//本地主机：9000 / bower_components /角/ angular.js：3000：28）
在Object.instantiate（HTTP：//本地主机：9000 / bower_components /角/ angular.js：3012：23）
在http：//本地主机：9000 / bower_components /角/ angular.js：4981：24
在更新（HTTP：//本地主机：9000 / bower_components /角/ angular.js：14509：26）
在Object.Scope $播出。（HTTP：//本地主机：9000 / bower_components /角/ angular.js：8468：28）
在http：//本地主机：9000 / bower_components /角/ angular.js：7614：26
在wrappedCallback（HTTP：//本地主机：9000 / bower_components /角/ angular.js：6995：59）
在wrappedCallback（HTTP：//本地主机：9000 / bower_components /角/ angular.js：6995：59）angular.js：5930
无法加载资源：//本地主机：9000 /模板/旋转木马/ slide.html服务器用404（未找到）HTTP状态回应
错误：无法加载模板：模板/旋转木马/ slide.html
在错误（小于匿名＆GT;）
在http：//本地主机：9000 / bower_components /角/ angular.js：4725：17
在http：//本地主机：9000 / bower_components /角/ angular.js：9144：11
在wrappedErrback（HTTP：//本地主机：9000 / bower_components /角/ angular.js：7004：57）
在http：//本地主机：9000 / bower_components /角/ angular.js：7080：53
在Object.Scope $的eval（HTTP：//本地主机：9000 / bower_components /角/ angular.js：8218：28）
在Object.Scope $摘要。（HTTP：//本地主机：9000 / bower_components /角/ angular.js：8077：25）
。在Object.Scope $应用（HTTP：//本地主机：9000 / bower_components /角/ angular.js：8304：24）
在完成（HTTP：//本地主机：9000 / bower_components /角/ angular.js：9357：20）
在completeRequest（HTTP：//本地主机：9000 / bower_components /角/ angular.js：9520：7）
这是我可以做错了任何想法？我已经能够让其他的功能，在其他控制器的工作，并能得到纯文本渲染引导主题里面，但由于某些原因，我没能获得传送带工作。
下面是我的index.html具有以下pkozlowski-开源的建议后，我的包含。我只能够得到传送带页面留出 ['ui.bootstrap'] 在模块声明，所以我仍然必须做一些错误的。
＆LT;！DOCTYPE HTML＆GT;
＆LT;！ - [如果LT IE 7＆GT; ＆LT; HTML类=无JS LT-IE9 LT-IE8 LT-IE7＆GT;百分比抑制率ENDIF] - GT！;
＆LT;！ - [如果IE 7＆GT; ＆LT; HTML类=无JS LT-IE9 LT-IE8＆GT;百分比抑制率ENDIF] - GT！;
＆LT;！ - [如果IE 8]＆GT; ＆LT; HTML类=无JS LT-IE9＆GT;百分比抑制率ENDIF] - GT！;
＆LT;！ - [如果GT IE 8] GT;＆LT;！ - ＆GT; ＆LT; HTML类=无JS＆GT; ＆LT;！ - ＆LT;！[ENDIF] - ＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT; META HTTP-EQUIV =X-UA-Compatible的内容=IE =边缘＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT; META NAME =说明内容=＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度＆GT;
＆LT;！ - 广场的favicon.ico和苹果触摸的icon.png在根目录下 - ＆GT; ＆LT; - 编译：CSS（.TMP）样式/的main.css - ＆GT;
＆LT;链接rel =stylesheet属性HREF =风格/ bootstrap.css＆GT;
＆LT;链接rel =stylesheet属性HREF =风格/的main.css＆GT;
＆所述;！ - endbuild - ＆GT;
＆LT; /头＆GT;
＆LT;机身NG-应用=yoApp＆GT;
＆LT;！ - [如果LT IE 7＆GT;
＆LT; p =类browsehappy＆gt;您使用的是＆LT;强＆GT;＆过时LT; / STRONG＆GT;浏览器。请＆lt; A HREF =http://browsehappy.com/＆GT;升级浏览器＆LT; / A＆GT;改善您的体验与LT; / P＆GT;
百分比抑制率ENDIF] - GT！; ＆LT;！ - [如果LT IE 9] GT;
＆LT;脚本SRC =bower_components / ES5-垫片/ ES5-shim.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =bower_components / json3 / lib目录/ json3.min.js＆GT;＆LT; / SCRIPT＆GT;
百分比抑制率ENDIF] - GT！; ＆LT;！ - 加入你的网站或应用程序的内容在这里 - ＆GT;
＆LT; DIV CLASS =容器NG-视图=＆GT;＆LT; / DIV＆GT; ＆LT; - 谷歌Analytics（分析）：改变UA-XXXXX-X是你的网站的ID - ＆GT;
＆LT;脚本＆GT;
（函数（I，S，O，G，R，A，M）{I ['GoogleAnalyticsObject'] = R;我[R] = I [R] ||功能（）{
（我[R] .Q = I [R] .Q || []）推（参数）}，我[R] .L = 1 *新的Date（）; A = s.createElement（O），
M = s.getElementsByTagName（O）[0]; a.async = 1; a.src =克; m.parentNode.insertBefore（A，M）
}）（窗，文件，'脚本'，'// www.google-analytics.com/analytics.js','ga'）; GA（'创造'，'UA-XXXXX-X'）;
GA（发送，浏览量）;
＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =bower_components / jQuery的/ jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =bower_components /角度/ angular.js＆GT;＆下; /脚本＆GT; ＆LT; - 编译：JS脚本/ plugins.js - ＆GT;
＆LT;！ - //＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-affix.js＆GT;＆LT; / SCRIPT＆GT;
//＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-alert.js＆GT;＆LT; / SCRIPT＆GT;
//＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-dropdown.js＆GT;＆LT; / SCRIPT＆GT;
//＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-tooltip.js＆GT;＆LT; / SCRIPT＆GT;
//＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-modal.js＆GT;＆LT; / SCRIPT＆GT;
//＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-transition.js＆GT;＆LT; / SCRIPT＆GT;
//＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-button.js＆GT;＆LT; / SCRIPT＆GT;
//＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-popover.js＆GT;＆LT; / SCRIPT＆GT;
//＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-typeahead.js＆GT;＆LT; / SCRIPT＆GT;
//＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-carousel.js＆GT;＆LT; / SCRIPT＆GT;
//＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-scrollspy.js＆GT;＆LT; / SCRIPT＆GT;
//＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-collapse.js＆GT;＆LT; / SCRIPT＆GT; - ＆GT;
＆LT;！ - //＆LT;脚本SRC =bower_components /引导-萨斯/ JS /引导-tab.js＆GT;＆LT; / SCRIPT＆GT; - ＆GT;
＆所述;！ - endbuild - ＆GT; ＆LT;脚本SRC =bower_components /角引导/ UI的引导-tpls.js＆GT;＆LT; / SCRIPT＆GT; ＆LT; - 编译：JS脚本/ modules.js - ＆GT; ＆LT;脚本SRC =bower_components /角资源/角resource.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =bower_components /角饼干/角cookies.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =bower_components /角的sanitize /角sanitize.js＆GT;＆下; /脚本＆GT; ＆所述;！ - endbuild - ＆GT; ＆LT; - 编译：JS（{TMP，应用}）脚本/ scripts.js中 - ＆GT;
＆LT;脚本的src =//本地主机：35729 / livereload.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =脚本/ app.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =脚本/控制器/ cat.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;！ - endbuild - ＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
由于@Elise咏在上面的评论中指出 - 包括：
＆LT;脚本SRC =bower_components /角引导/ UI的引导-tpls.js＆GT;＆LT; / SCRIPT＆GT;
固定的404错误引用/template/X.html文件给我。
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 <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>
解决方案
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.
这篇关于角与ui.bootstrap呈现空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
