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
– Abhilash, Commented Jan 30, 2016 at 3:36
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
– Abhilash, Commented Jan 30, 2016 at 3:38
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
– charlietfl, Commented Jan 30, 2016 at 3:47

Buli · Accepted Answer · 2016-01-30 03:42:44Z

1

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) {
 ...
}):

answered Jan 30, 2016 at 3:42

Buli

1071 silver badge4 bronze badges

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

1 Comment

Buli Over a year ago

Based on the error that he gets 'Cannot read property 'state' of undefined', that's the problem. Just remove [] from config function definition. Regarding url problem, that's second problem based on configuration, but that is not the question asked about.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related