CODEWITHSUNDEEP
javascripthtmlangularjsangular-ui-routerbower
jack d
jack d

Reputation: 9

Recieving a "injector:modulerr" error when trying to inject UI-Router

'use strict';
angular.module('confusionApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        // route for the home page
        .state('app', {
            url:'/',
            views: {
                'header': {
                    templateUrl : 'views/header.html'
                },
                'content': {
                    template : '<h1>To be Completed</h1>',
                    controller  : 'IndexController'
                },
                'footer': {
                    templateUrl : 'views/footer.html'
                }
            }
        })
        // route for the aboutus page
        .state('app.aboutus', {
            url:'aboutus',
            views: {
                'content@': {
                    template: '<h1>To be Completed</h1>'
               }
            }
        })
        // route for the contactus page
        .state('app.contactus', {
            url:'contactus',
            views: {
                'content@': {
                    templateUrl : 'views/contactus.html',
                    controller  : 'ContactController'
                 }
            }
        })

        // route for the menu page
        .state('app.menu', {
            url: 'menu',
            views: {
                'content@': {
                    templateUrl : 'views/menu.html',
                    controller  : 'MenuController'
                }
            }
        })

        // route for the dishdetail page
        .state('app.dishdetails', {
            url: 'menu/:id',
            views: {
                'content@': {
                    templateUrl : 'views/dishdetail.html',
                    controller  : 'DishDetailController'
               }
            }
         });
         $urlRouterProvider.otherwise('/');
    });

For the app.js file I am trying to use the UI-Router, I used bower to install the the angular dependencies for the UI-Router. They currently have the right path when I include them in the tags. I checked to make sure that the files were also there inside of the bower_components file. Yet when I run the program nothing shows up and the only error that I recieve is the "Uncaught Error: [$injector:modulerr]" error.

Upvotes: 0

Views: 553

Answers (3)

M K
M K

Reputation: 11

I had similar issue. What fixed it was to inject '$stateProvider' and '$urlRouterProvider' before using them in the config function such as: 

angular.module('confusionApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider
      // .. and so on 
}]);

Upvotes: 1

YuryDG
YuryDG

Reputation: 479

It's seem like angular can't find ui-route module, remember include it in your html. Use something like that

<script src="/bower_components/angular/angular.js"></script> <script src="/bower_components/angular-ui-router/angular-ui-router.js"></script>

if you are using bower.

Sorry by my english. I hope this will be useful for you.

Upvotes: 1

ambussh
ambussh

Reputation: 790

Try load ui.router before you load a script:

<!-- UI-Router -->
<script src="angular-ui-router.js"></script>
<script src="yourscript.js"></script>

Upvotes: 0

Related Questions