AngularJS 1.5.4 unable to use boostrap-ui module

2
votes

I was trying to use bootstrap-ui module but I have the following error:

angular.min.js:6Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=delyApp&p1=Error%3A…%20q%20(http%3A%2F%2Flocalhost%3A8080%2Fscripts%2Fangular.min.js%3A7%3A355)

I've this file:

index.html

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Delivery Online</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#/deliverys">Listado de deliverys</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

<div ng-view></div>

<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/ui-bootstrap-tpls-2.0.1.min.js"></script>
<script src="app/route.js"></script>
<script src="app/controller.js"></script>

and in the route.js I injected the ui.bootstrap module:

var app = angular.module("delyApp", ["ngRoute"], ['ui.bootstrap']);

app.config(function ($routeProvider) {
    $routeProvider
    .when("/agregar", {
        templateUrl: "agregar.html",
        controller: "controller"
    })
    .when("/deliverys", {
        templateUrl: "deliverys.html",
        controller: "controller"
    })
.otherwise({
    templateUrl: "deliverys.html",
    controller: "controller"
});

});

But it's currently not working.. giving the modulerr error... any idea? I guess that the js files are in the correct order. Thanks

1
javascriptangularjstwitter-bootstrap

1 Answers

1
votes

There is an issue with injection,

Change the code ,

From

var app = angular.module("delyApp", ["ngRoute"], ['ui.bootstrap']);

To

var app = angular.module("delyApp", ['ngRoute','ui.bootstrap']);