Uncaught Error - Injector modulerr in my angularjs web application - angularjs

Question

I try to do a demo of charts. I get uncaught modulerr. I am not able to solve this issue. Please let me know where I am wrong.
Note :
I have run bower install and I have the libraries injected to the module under /public/lib folder.
My index.jade
doctype html
html(lang='en', xmlns='http://www.w3.org/1999/xhtml', xmlns:fb='https://www.facebook.com/2008/fbml', itemscope='itemscope', itemtype='http://schema.org/Product')
head
block header
block stylesheet
link(rel='stylesheet', href='/semantic/semantic.min.css')
link(rel='stylesheet', href='/css/vendor.min.css')
block headerscript
script(type='text/javascript', src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js")
script(type='text/javascript', src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js')
script(type='text/javascript', src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js')
body(ng-init="compare='hellovar'")
.ui.grid
.ui.computer.tablet.only.fitted.row
.column
.ui.menu
.item
a.ui.green.button(href="/")
| Chart Demo
.ui.mobile.only.three.column.inverted.black.fitted.row
.column.floated.left.inverted
.ui.menu.fluid.two.item.inverted
header.item
a.ui.green.icon.button(href="/")
i.content.icon
.column
| Alasql Demo
.column.right.aligned
.fitted.row
.column
block content
div(ui-view)
block footer
script(type='text/javascript').
angular.element(document).ready(function() {
angular.bootstrap(document, ['home.core']);
});
My controller part
'use strict';
angular.module('home.core',['ngRoute']);
angular.module('home.core')
.controller('home.core.controller', ['$rootScope', '$scope', '$window',
function($rootScope, $scope, $window) {
console.log("inside home core controller");
function _init() {
console.log("Inside Home Controller");
}
_init();
}
]);
angular.module('home.core')
.config(
["$stateProvider", "$urlRouterProvider",
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state("home-core", {
url: '/',
templateUrl: 'partials/home/core/index.html',
controller : 'home.core.controller'
});
}
]);
angular.module('home.core')
.factory('home.core.service', ['Restangular',
function(Restangular) {
var restAngular = Restangular.withConfig(function(Configurer) {
Configurer.setBaseUrl('/api/ecommerce');
});
return {
create: restAngular.all('')
.post
}
}
]);
I get the below error when I run the web app
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=home.core&p1=Error…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A17%3A381

Answer 1

Firstly, I don't see where you are running the restangular script:
<script src="js/lib/restangular.min.js"></script>
Second, is all of your Angular code in one file? You first have to inject restangular into your main module. Can you try changing your code to this:
'use strict';
angular.module('home.core',['ngRoute','restangular'])
.controller('home.core.controller', ['$rootScope', '$scope', '$window',
function($rootScope, $scope, $window) {
console.log("inside home core controller");
function _init() {
console.log("Inside Home Controller");
}
_init();
}
])
.config(
['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state("home-core", {
url: '/',
templateUrl: 'partials/home/core/index.html',
controller : 'home.core.controller'
});
}
])
.factory('home.core.service', ['Restangular',
function(Restangular) {
var restAngular = Restangular.withConfig(function(Configurer) {
Configurer.setBaseUrl('/api/ecommerce');
});
return {
create: restAngular.all('')
.post
}
}
])