Home > javascript > angular showing TypeError: Cannot read property 'state' of undefined

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

January 30Hits:8
Advertisement

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.

Answers

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

Related Articles

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.371 s.