CODEWITHSUNDEEP
angularjsangular-ui-router
gerl
gerl

Reputation: 1181

Controller is undefined in ui router

I dont understand why TestCntrl is undefined when I run this. I already have an existing controller (MainCntrl) in the parent and now I want the child to have its own controller (TestCntrl). 

(function() {
  'use strict';
  angular
    .module('app')
      .config(function ($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {

        $urlMatcherFactoryProvider.strictMode(false);
        $urlRouterProvider.when('/', '/search'); 
        $urlRouterProvider.when('/search/name', '/search');

        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('index', {
              url: '/',
              abstract: true,

              templateUrl: 'app/layout/layout.html',
              controller: 'MainController',
              controllerAs: 'main'

            })

            .state('index.layout', {

                initFactory2: ['initFactory', function(initFactory) {

                    return initFactory.getClasses().then(function(data) {
                        return data.data;
                    });
                }]

              },
              url: 'search',
              views: {

                'form@index': {
                  templateUrl: 'app/partials/form.html',
                  controller: 'TestController as test'
},
                'results@index':{}
              }
            })
})();

TestController

(function () {
    'use strict';

    angular
        .module('app')
        .controller('TestController', TestController);

    /** @ngInject */
    function TestController($scope, $stateParams, $state, model,
                             initFactory2) {
        var vm = this;

        vm.$scope = $scope;
    }
 });

Main Controller

(function () {
    'use strict';

    angular
        .module('app')
        .controller('MainController', MainController);

    /** @ngInject */
    function MainController($scope, $stateParams, $state, $timeout, model,
                            SearchFactory) {
        var vm = this;
    }
})();

This is the error I'm getting: 

Error: [ng:areq] Argument 'TestController' is not a function, got undefined
http://errors.angularjs.org/1.3.17/ng/areq?p0=TestController&p1=not%20a%20function%2C%20got%20undefined

Upvotes: 1

Views: 735

Answers (2)

Matthew Green
Matthew Green

Reputation: 10391

You are missing your parenthesis at the end of your IIFE on your TestController. That is needed to properly declare it as function to be executed. Without it, your code for the TestController is never called and therefore never instantiated.

Upvotes: 1

manish
manish

Reputation: 1458

the problem is with your TestController

(function () {
'use strict';

   angular
    .module('app')
    .controller('TestController', TestController);

  /** @ngInject */
  function TestController($scope, $stateParams, $state, model, initFactory2) {
    var vm = this;
    vm.$scope = $scope;
   }
});

just, try reversing the order 

(function () {
 'use strict';
  /** @ngInject */
  var TestController = function TestController($scope, $stateParams, $state, model, initFactory2){
    var vm = this;
    vm.$scope = $scope;
  };
  angular
    .module('app')
    .controller('TestController', TestController);
});

Upvotes: 0

Related Questions