0

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?

enter image description here

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
Ramesh
  • 2,295
  • 5
  • 35
  • 64
  • 2
    Whenever you have such errors, do yourself a favor and look at the browser developer console log (F12), most probably there you would see some errors that can help you and add that to the question too. – Chandermani Jun 29 '14 at 15:05
  • @Chandermani i agree there was a error but i was not able to find anything in that. – Ramesh Jun 29 '14 at 15:09
  • I have updated the question with the error @Chandermani – Ramesh Jun 29 '14 at 15:11
  • Verify the ui-bootstrap-tpls.js file is getting sent to the browser, you should NOT be loading the bootstrap.js library. – Rob J Jun 29 '14 at 16:04
  • Could you provide the _bower commands_ you used to install the dependencies? I cannot reproduce your issue at the moment, but many people have had problems setting up the ui-bootstrap through bower. – Heikki Jun 30 '14 at 08:50

3 Answers3

2

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
Community
  • 1
  • 1
b0nyb0y
  • 1,436
  • 1
  • 14
  • 14
0
The component `angular-bootstrap` should have two javascript files: bower_components/angular-bootstrap/ui-bootstrap.js bower_components/angular-bootstrap/ui-bootstrap-tpls.js You only include the templates.

Edit: Corrected in the comments.

Use Chrome Canary for easier debugging, you will see the full error message instead of Uncaught object.

Zsolt Gyöngyösi
  • 704
  • 6
  • 13
  • Sorry no luck still i have same issue. – Ramesh Jun 29 '14 at 15:34
  • Can you update the question with the full error message, please? (Use Firefox or Chrome Canary.) – Zsolt Gyöngyösi Jun 29 '14 at 15:36
  • 2
    You do not want to load both of those files, use one or the other. One version contains the html templates (tpls) and one does not, both contain the directives. – Rob J Jun 29 '14 at 16:07
  • But still i am getting the issue" [$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. "But i have the module in the bower_component folder. – Ramesh Jun 29 '14 at 16:42
0

add ['ui.bootstrap'] on the main app.js

MillaresRoo
  • 3,808
  • 1
  • 31
  • 37
Em as
  • 1
  • 2