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)

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