angular showing TypeError: Cannot read property 'state' of undefined

Question

I am trying to learn routing by adding routing to a specific page in my rails app using angular which will replace ajax. Below is the console error am getting.

Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to: TypeError: Cannot read property 'state' of undefined

This is how I defined.

app.js

app = angular.module("testApp", ['ui.router']);

app.config([
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('mylistings', {
                url: '/mylistings',
                templateUrl: '/views/mylistings.html',
                controller: 'dashboardCtrl'
            });
    }
]);

app.controller('dashboardCtrl', function ($scope, $http, $stateParams) {
$scope.testing="testdata"
});

mylistings.html

{{testing}}

In this case http://localhost:3000/dashboard is the url I want routing. Could someone tell me what am doing wrong here.

@charlietfl I want it to be something like localhost:3000/dashboard#mylistings... — Abhilash
localhost:3000/dashboard is from my rails app and not by angular. I want routing here because I want a different section localhost:3000/dashboard#mybookings and some others — Abhilash
should have a default set using $urlRouterProvider.otherwise('/'); and a state that matches that url. Right now if you go to http://localhost:3000/dashboard then router doesn't know what to do — charlietfl

Buli Buli · Accepted Answer · 2016-01-30T03:42:44

Problem is with definition of config function. If you use array app.config([]) that means that you write safe code for the dependencies prepared for minification. Syntax is:

app.config(['$arg1', '$arg2', function ($arg1, $arg2) {
   }]);

So when code is minified you will get something like:

app.config(['$arg1', '$arg2',function(a,b) {}]);

In your example in app.js change config to following code if you want to write code safe for minification (if you are not using ng-annotate):

app = angular.module("testApp", ['ui.router']);

app.config(['$stateProvider','$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('mylistings', {
                url: '/mylistings',
                templateUrl: '/views/mylistings.html',
                controller: 'dashboardCtrl'
            });
    }
]);

app.controller('dashboardCtrl', function ($scope, $http, $stateParams) {
  $scope.testing="testdata"
});

or you can remove [] from config function :

app.config(function ($stateProvider, $urlRouterProvider) {
 ...
}):

angular showing TypeError: Cannot read property 'state' of undefined

1 Answers