CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-ui-bootstrap
Markus
Markus

Reputation: 1563

Adding Bootstrap UI Module to angularjs project

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:

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)

Upvotes: 0

Views: 797

Answers (1)

Pramod Sharma
Pramod Sharma

Reputation: 376

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

Upvotes: 1

Related Questions