當我在控制器中使用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 / angular-bootstrap / ui-bootstrap.js bower_components / angular-bootstrap / ui-bootstrap-tpls.js僅包含模板。

編輯：在注釋中更正。

使用Chrome Canary簡化調試，您會看到完整的錯誤消息，而不是Uncaught object 。

Answer 3

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