当我在控制器中使用 ui.bootstrap 时，Angular 给出空白页 [英] Angular gives blank page when i use ui.bootstrap in my controller

问题描述

当我尝试在我的控制器中添加依赖项并使用 grunt serve 启动服务器时，我正在尝试使用 angular bootstrap 我得到一个空白页面.请查看屏幕截图中的 bower 组件.

当我尝试在 angular.module('kbv1App', ['ui.bootstrap']).controller 中使用它时，如果我删除 [ui.bootstrap] 它工作正常.

知道会出现什么问题吗?

更新.控制台错误

[$injector:modulerr] 无法实例化模块 ui.bootstrap 由于:[$injector:nomod] 模块 'ui.bootstrap' 不可用！您拼错了模块名称或忘记加载它.如果注册模块，请确保将依赖项指定为第二个参数.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 完成@http://localhost:9000/bower_components/jquery/dist/jquery.js:3474:3

解决方案

人们使用 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

I am trying to use the the angular bootstrap when i try to add the dependency in my controller and start the server with grunt serve i get a blank page.Please have a look at the bower components in the screen shot.

When i try to use it in angular.module('kbv1App', ['ui.bootstrap']).controller it fails if i remove the [ui.bootstrap] it works fine.

Any idea wha will be the issue?

Update. Console error

[$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

解决方案

The reason people are using angular-ui-bootstrap is to avoid using jquery and bootstrap.js (which relies on jquery) and opt for an Angular solution. So my first attempt at getting this app working is to

• Remove jquery.js, jquery-ui.js, and bootstrap.js out of the page.
• Start from just plain Angular + Angular UI Bootstrap first. Try some examples from http://angular-ui.github.io/bootstrap/ if you want to get familiar with the directive usage.
• Then, if you really need to, just add jquery back in later. But from my experience, you won't really need to if you stick to Angular way of coding. If you come from a strong jquery background and just start coding on Angular, I recommend you read this: https://stackoverflow.com/a/15012542/3788115

这篇关于当我在控制器中使用 ui.bootstrap 时，Angular 给出空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！