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

Question

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

当我尝试在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

Answer 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

Answer 2

<德尔> 组件`angular-bootstrap`应该有两个javascript文件：     bower_components /角度的自举/ UI-bootstrap.js     bower_components /角度的自举/ UI的自举-tpls.js 您只包含模板。

编辑：已在评论中进行了更正。

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

Answer 3

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