Bootstrap UI is not loading with Angular

Question

I'm trying to use a datepicker with Bootstrap UI. I've registered the bootstrap javascript, and the bootstrap CSS (using gulp) but i'm getting the following error:

Error: [$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

index.html

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>

//Bootstrap JS here
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>

//Other JS here
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.0/angular-strap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.0/angular-strap.tpl.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-messages.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-resource.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-cookies.js"></script>

injection :

angular.module('formApp', ['ngAnimate', 'ui.router', 'ui-bootstrap'])

// configuring our routes 
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

        // route to show our basic form (/form)
        .state('form', {
            url: '/',
            templateUrl: 'views/home.html',
            controller: 'formController'
        })
        // nested states 
        // each of these sections will have their own view
        // url will be nested (/form/profile)
       .state('form.profile', {
            url: '/',
            templateUrl: 'views/form-date.html'
        })

        // url will be /form/interests
        .state('form.interests', {
            url: '/',
            templateUrl: 'views/form-interests.html'
        })

        // url will be /form/payment
        .state('form.payment', {
            url: '/',
            templateUrl: 'views/form-payment.html'
        });

    // catch all route
    // send users to the form page 
    $urlRouterProvider.otherwise('/');
})

I know ui-bootstrap is not supporting angular 1.3.14 only 1.3< I had to downgrade my ui-bootstrap to 0.11.2 could that possibly be it? plus, do you really need the two booltstrap js? I think the tpls is enough... and I think you're missing a semicolon in the end of the app.js — Jony-Y
– Jony-Y, Commented Mar 11, 2015 at 21:48

Dylan · Accepted Answer · 2015-03-11 21:54:02Z

1

You only need the tmpl version as it contains the full js, but your issue is that you need

'ui.bootstrap' not 'ui-bootstrap'

answered Mar 11, 2015 at 21:54

Dylan

4,7831 gold badge22 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Bootstrap UI is not loading with Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related