当我在控制器中使用 ui.bootstrap 时，Angular 给出了空白页答案

【问题标题】：Angular gives blank page when i use ui.bootstrap in my controller当我在控制器中使用 ui.bootstrap 时，Angular 给出了空白页
【发布时间】：2014-06-29 14:56:42
【问题描述】：

当我尝试在我的控制器中添加依赖项并使用 grunt serve 启动服务器时，我尝试使用角度引导程序，我得到一个空白页面。请查看屏幕截图中的凉亭组件。

当我尝试在angular.module('kbv1App', ['ui.bootstrap']).controller 中使用它时，如果我删除[ui.bootstrap] 它会失败。

知道会是什么问题吗？

更新。控制台错误

[$injector:modulerr] Failed to instantiate module ui.bootstrap due to: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.2.18/$injector/nomod?p0=ui.bootstrap minErr/<@http://localhost:9000/bower_components/angular/angular.js:78:5 setupModuleLoader/</module/<@http://localhost:9000/bower_components/angular/angular.js:1645:1 ensure@http://localhost:9000/bower_components/angular/angular.js:1567:5 module@http://localhost:9000/bower_components/angular/angular.js:1641:7 createInjector/loadModules/<@http://localhost:9000/bower_components/angular/angular.js:3817:11 forEach@http://localhost:9000/bower_components/angular/angular.js:320:7 loadModules@http://localhost:9000/bower_components/angular/angular.js:3811:5 createInjector/loadModules/<@http://localhost:9000/bower_components/angular/angular.js:3818:11 forEach@http://localhost:9000/bower_components/angular/angular.js:320:7 loadModules@http://localhost:9000/bower_components/angular/angular.js:3811:5 createInjector@http://localhost:9000/bower_components/angular/angular.js:3751:3 bootstrap/doBootstrap@http://localhost:9000/bower_components/angular/angular.js:1410:1 bootstrap@http://localhost:9000/bower_components/angular/angular.js:1425:5 angularInit@http://localhost:9000/bower_components/angular/angular.js:1338:5 @http://localhost:9000/bower_components/angular/angular.js:21713:5 jQuery.Callbacks/fire@http://localhost:9000/bower_components/jquery/dist/jquery.js:3119:1 jQuery.Callbacks/self.fireWith@http://localhost:9000/bower_components/jquery/dist/jquery.js:3231:7 .ready@http://localhost:9000/bower_components/jquery/dist/jquery.js:3443:3 completed@http://localhost:9000/bower_components/jquery/dist/jquery.js:3474:3

【问题讨论】：

每当您遇到此类错误时，请帮自己一个忙并查看浏览器开发人员控制台日志 (F12)，您很可能会看到一些可以帮助您的错误并将其添加到问题中。
@Chandermani 我同意有一个错误，但我无法找到任何内容。
我已经用错误@Chandermani 更新了问题
验证 ui-bootstrap-tpls.js 文件是否已发送到浏览器，您不应加载 bootstrap.js 库。
你能提供你用来安装依赖的bower命令吗？我目前无法重现您的问题，但很多人在通过 bower 设置 ui-bootstrap 时遇到问题。

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

人们使用angular-ui-bootstrap 的原因是避免使用jquery 和bootstrap.js（依赖于jquery）并选择Angular 解决方案。所以我第一次尝试让这个应用程序工作是

删除页面外的jquery.js、jquery-ui.js和bootstrap.js。
首先从简单的 Angular + Angular UI Bootstrap 开始。如果您想熟悉指令的用法，请尝试 http://angular-ui.github.io/bootstrap/ 中的一些示例。
然后，如果您确实需要，请稍后再添加jquery。但根据我的经验，如果你坚持使用 Angular 的编码方式，你就真的不需要了。如果您来自强大的jquery 背景并刚开始使用 Angular 进行编码，我建议您阅读以下内容：https://stackoverflow.com/a/15012542/3788115

【讨论】：

【解决方案2】：

组件 `angular-bootstrap` 应该有两个 javascript 文件： bower_components/angular-bootstrap/ui-bootstrap.js bower_components/angular-bootstrap/ui-bootstrap-tpls.js 您只包括模板。

编辑：在 cmets 中更正。

使用Chrome Canary 更容易调试，您将看到完整的错误消息而不是Uncaught object。

【讨论】：

很抱歉，我仍然有同样的问题。
你能用完整的错误信息更新问题吗？（使用 Firefox 或 Chrome Canary。）
您不想同时加载这两个文件，请使用其中一个。一个版本包含 html 模板 (tpls)，一个不包含指令。
但我仍然遇到问题" [$injector:nomod] 模块 'ui.bootstrap' 不可用！您拼错了模块名称或忘记加载它。如果注册模块，请确保您将依赖项指定为第二个参数。“但我在 bower_component 文件夹中有模块。

【解决方案3】：

在主 app.js 上添加 ['ui.bootstrap']

【讨论】：