Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I'm trying to add the bootstrap-ui module to my angular.js project. The documentation states that I simply have to add

angular.module('myModule', ['ui.bootstrap']);

to get this working. But I can't find out how I would add this in any way. I've read the whole chapter of https://docs.angularjs.org/guide/module and read lots of threads about it, but everything I tested didn't work so far.

my app.js:

angular.module('MyApp', ['ngCookies', 'ngResource', 'ngMessages', 'ngRoute', 'mgcrea.ngStrap'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
// followed by my routing

myCtrl

angular.module('MyApp')
    .controller('MyCtrl', ['$scope', '$location', '$rootScope', '$routeParams', '$resource', '$alert', 'MyService',
        function ($scope, $location, $rootScope, $routeParams, $resource, $alert, MyService) {

what I tried:

  • adding 'ui.bootstrap' after 'mgcrea.ngStrap' in app.js
  • adding 'ui.bootstrap' after *'MyService' in myCtrl
  • many more similar variations

The error messages I get depend on what I did. Since I'm probably completely on the wrong path at the moment I was hoping someone could tell me how I can add a module in angular.js correctly?

edit some error messages I encountered:

When I start my Crtl code with:

angular.module('MyApp', ['ui.bootstrap'])

I get

[ng:areq] Argument 'NavbarCtrl' is not a function, got undefined

(navbarctrl is a completely different ctrl)

when I start my app.js with

angular.module('MyApp', ['ngCookies', 'ngResource', 'ngMessages', 'ngRoute', 'mgcrea.ngStrap', 'ui.bootstrap'])

I get

TypeError: object is not a function

In my AuthService I try to use $alert (this works without bootstrap-ui) like

$alert({
    title: 'Success!', //...
share|improve this question
    
Can you copy errors from console here? –  strelok2010 19 hours ago
    
I added some error messages, but I'm afraid I don't think that they have anything to do with my problem. Since I don't know how to add the module the errors I posted are probably just followup errors –  Markus 19 hours ago
    
Sorry for stupid question, but you connect ui-bootstrap js file in html? –  strelok2010 19 hours ago
    
yeah I did that: <script src="vendor/ui-bootstrap-tpls-0.11.0.min.js"></script> (and bootstrap.css as well) it's working to some extend (I get the errors and can't for example submit a form), but I see that my tabs which I implemented are correctly displayed –  Markus 18 hours ago
    
And in myctrl - ['$scope', '$location', '$rootScope', '$routeParams', '$resource', '$alert', 'MyService' - you don't close an array, maybe problem here? –  strelok2010 18 hours ago

1 Answer 1

Are you ensuring that Angular UI specific JS Files are sent from server to client through bundling or direct reference?

You have to inject dependency of module in your app: something like this angular.module('MyApp', ['ui.bootstrap']);

share|improve this answer
    
I dont really know what I mean by that. At the moment I'm not sure how I can add bootstrap-ui (or any other module for that matter) to my project –  Markus 19 hours ago
    
You have to inject dependency of module in your app: something like this angular.module('MyApp', ['ui.bootstrap']); –  Pramod Sharma 18 hours ago
    
that's exactly what I did - I tried it in my app.js and in my ctrl –  Markus 18 hours ago
1  
In your app.js you have not mentioned this dependency 'ui.bootstrap' ..other dependencies are mentioned there –  Pramod Sharma 18 hours ago
    
One of my many attempts was adding it at the end, but then I get the last error (from my post –  Markus 18 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.