angularjs Failed to instantiate module ui.bootstrap.demo

Question

I am learning angularjs and i am stuck at one point. I keep getting error

 ncaught Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap.demo due to:
 Error: [$injector:nomod] Module 'ui.bootstrap.demo' is not available!

Below is my html file

<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<script src="resources/js/main.js"/>
<script src="resources/js/gsenv.js"/>
<script src="resources/js/CarouselController.js"/>
</head>

However if i dont write the javascripts in separate file it works as exected

<script type="text/javascript">
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $http, dataShare) {
    $scope.myInterval = 5000;
    $scope.noWrapSlides = false;
    $scope.active = 0;
    var slides = $scope.slides = [];
    var currIndex = 0;

    $scope.sendEnvName = function(data) {
        dataShare.sendEnvNameDetails(data);
    }

    $scope.addSlide = function (envName) {
        slides.push({
            text: envName,
            id: currIndex++
        });
    };

    $http.get("http://localhost:8080/getEnvList")
            .success(function (data) {
                for (var i in data) {
                    $scope.addSlide(data[i].envName);
                }
            });

});

It works fine this way, not able to understand what could be the issue

main.js

var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ngTable']);

jsenv.js

app.factory('dataShare',function($rootScope){
var service = {};
service.envName = 'no-env'
service.sendEnvNameDetails = function(data){
    console.log(data)
    this.envName = data;
    $rootScope.$broadcast('data_shared');
};
service.getData = function(){
    return this.envName;
};
return service;
});

carousel

app.controller('CarouselDemoCtrl', function ($scope, $http, dataShare) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;

$scope.sendEnvName = function(data) {
    dataShare.sendEnvNameDetails(data);
}

$scope.addSlide = function (envName) {
    slides.push({
        text: envName,
        id: currIndex++
    });
};

$http.get("http://localhost:8080/getEnvList")
    .success(function (data) {
        for (var i in data) {
            $scope.addSlide(data[i].envName);
        }
    });

});

How are you writing the code inside the other .js file? main.js Could you please put the code in your question? — Gabriel Hobold
– Gabriel Hobold, Commented Jun 13, 2016 at 19:29
Try changing your scripts tags from <script src="resources/js/main.js"/> to <script src="resources/js/main.js"></script> (do it to the another files too) and tell me if it works. — Gabriel Hobold
– Gabriel Hobold, Commented Jun 13, 2016 at 20:04
And if you change from app.controller to angular.module('ui.bootstrap.demo').controller ? This plunker does exactly what you are trying to do, the only problem was the script tags. — Gabriel Hobold
– Gabriel Hobold, Commented Jun 13, 2016 at 20:14
@GabrielHobold...aah this works, using angular.module('ui.bootstrap.demo').controller but with <script></script> not with <script/> — Ambuj Jauhari
– Ambuj Jauhari, Commented Jun 13, 2016 at 20:19

Gabriel Hobold · Accepted Answer · 2016-06-13 20:37:08Z

1

Change your controllers and factories:
From:

app.controller('CarouselDemoCtrl', function ($scope, $http, dataShare) { });

To:

angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $http, dataShare) { });

From:

app.factory('dataShare',function($rootScope){});

To:

angular.module.factory('dataShare',function($rootScope){});

answered Jun 13, 2016 at 20:37

Gabriel Hobold

6936 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

angularjs Failed to instantiate module ui.bootstrap.demo

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