Adding Bootstrap UI Module to angularjs project

Question

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!', //...

**edit 2: ** the problem seems to be that I can only use ngStrp OR ui.bootstrap (both use bootstrap underneath)

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
– Markus, Commented Sep 12, 2014 at 3:31
Sorry for stupid question, but you connect ui-bootstrap js file in html? — strelok2010
– strelok2010, Commented Sep 12, 2014 at 3:34
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
– Markus, Commented Sep 12, 2014 at 3:36
And in myctrl - ['$scope', '$location', '$rootScope', '$routeParams', '$resource', '$alert', 'MyService' - you don't close an array, maybe problem here? — strelok2010
– strelok2010, Commented Sep 12, 2014 at 3:37

Pramod Sharma · Accepted Answer · 2014-09-12 03:37:41Z

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']);

edited Sep 12, 2014 at 3:37

answered Sep 12, 2014 at 3:27

Pramod Sharma

3865 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Markus Over a year ago

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

Pramod Sharma Over a year ago

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

Markus Over a year ago

that's exactly what I did - I tried it in my app.js and in my ctrl

Pramod Sharma Over a year ago

In your app.js you have not mentioned this dependency 'ui.bootstrap' ..other dependencies are mentioned there

Markus Over a year ago

One of my many attempts was adding it at the end, but then I get the last error (from my post

|

Collectives™ on Stack Overflow

Adding Bootstrap UI Module to angularjs project

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related