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

问题描述

我想使用的角度引导，当我尝试添加的依赖在我的控制器，并启动服务器咕噜服务得到了一个空白page.Please看看在屏幕截图的亭子组成部分。

当我尝试使用它在 angular.module（'kbv1App'，['ui.bootstrap']）。控制器如果我删除失败的 [ui.bootstrap] 它工作正常。

任何想法WHA将成为问题？

更新。控制台误差

  [$喷油器：modulerr]未能实例化模块ui.bootstrap由于：[$喷油器：NOMOD]模块'ui.bootstrap不可！你要么拼写错误的模块名称，或忘了加载它。如果注册一个模块，确保指定的依赖关系作为第二个参数。 http://errors.angularjs.org/1.2.18/$injector/nomod?p0=ui.bootstrap minErr /＆LT; @http：//本地主机：9000 / bower_components /角/ angular.js：78：5 setupModuleLoader / ＆LT; /模块/＆LT; @http：//本地主机：9000 / bower_components /角/ angular.js：1645：1确保@ HTTP：//本地主机：9000 / bower_components /角/ angular.js：1567：5模块@ HTTP：//本地主机：9000 / bower_components /角/ angular.js：1641：7 createInjector / loadModules /＆LT; @http：//本地主机：9000 / bower_components /角/ angular.js：3817：11的forEach @ HTTP：/ /localhost:9000/bower_components/angular/angular.js:320:7 loadModules @ HTTP：//本地主机：9000 / bower_components /角/ angular.js：3811：5 createInjector / loadModules /＆LT; @http：//本地主机： 9000 / bower_components /角/ angular.js：3818：11的forEach @ HTTP：//本地主机：9000 / bower_components /角/ angular.js：320：7 loadModules @ HTTP：//本地主机：9000 / bower_components /角/角。 JS：3811：5 createInjector @ HTTP：//本地主机：9000 / bower_components /角/ angular.js：3751：3引导/ doBootstrap @ HTTP：//本地主机：9000 / bower_components /角/ angular.js：1410：1的引导@http：//本地主机：9000 / bower_components /角/ angular.js：1425：5 angularInit @ HTTP：//本地主机：9000 / bower_components /角/ angular.js：1338：5 @http：//本地主机：9000 / bower_components /角/ angular.js：21713：5 jQuery.Callbacks/fire@http：//本地主机：9000 / bower_components / jQuery的/距离/的jquery.js：3119：1 jQuery.Callbacks/self.fireWith@http：//本地主机：9000 / bower_components / jQuery的/距离/的jquery.js：3231：7。就绪@ HTTP：//本地主机：9000 / bower_components / jQuery的/距离/的jquery.js：3443：3完成@ HTTP：//本地主机：9000 /bower_components/jquery/dist/jquery.js:3474:3
 

解决方案

人正在使用的原因角UI的引导为避免使用的jQuery 和 bootstrap.js （这依赖于jQuery的），并选择一个角度的解决方案。所以，我在得到这个应用程序的工作首次尝试

• 删除 的jquery.js ， jQuery的-ui.js 和 bootstrap.js 出页面。


• 从只是普通的角角+ UI引导首先启动。尝试从 http://angular-ui.github.io/bootstrap/ 的一些例子，如果你要熟悉指令的用法。


• 然后，如果你真的需要，只需添加的jQuery 背在后面。但是从我的经验，你不会真的需要，如果你坚持的编码方式角。如果你来自一个强大的的jQuery 背景和刚刚开始编码的角度，我建议你阅读本：<一href=\"http://stackoverflow.com/a/15012542/3788115\">http://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: http://stackoverflow.com/a/15012542/3788115

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