Uncaught Error - Injector modulerr in my angularjs web application

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
        }
    }
])