Controller function not getting recognized in js file

Question

I have a Controller defined in my js file as below. It all works perfect until i change the placement of the "Test2Controller" controller in my javascript file. When i place the Test2Controller below the SampleController function / function declaration it gives me the below error :

Error in Chrome Dev tools :

Uncaught TypeError: Property 'controller' of object # is not a function mycontroller1.js:26 Error: Argument 'Test2Controller' is not a function, got undefined at assertArg (file:///D:/Dev/olite/workspace/olite/olite/WebContent/AngularJSDemos/mylearnings/angular.js:1039:11) at assertArgFn (file:///D:/Dev/olite/workspace/olite/olite/WebContent/AngularJSDemos/mylearnings/angular.js:1049:3) at file:///D:/Dev/olite/workspace/olite/olite/WebContent/AngularJSDemos/mylearnings/angular.js:4802:9 at file:///D:/Dev/olite/workspace/olite/olite/WebContent/AngularJSDemos/mylearnings/angular.js:4384:17 at forEach (file:///D:/Dev/olite/workspace/olite/olite/WebContent/AngularJSDemos/mylearnings/angular.js:137:20) at nodeLinkFn (file:///D:/Dev/olite/workspace/olite/olite/WebContent/AngularJSDemos/mylearnings/angular.js:4369:11) at compositeLinkFn (file:///D:/Dev/olite/workspace/olite/olite/WebContent/AngularJSDemos/mylearnings/angular.js:4015:15) at compositeLinkFn (file:///D:/Dev/olite/workspace/olite/olite/WebContent/AngularJSDemos/mylearnings/angular.js:4018:13) at compositeLinkFn (file:///D:/Dev/olite/workspace/olite/olite/WebContent/AngularJSDemos/mylearnings/angular.js:4018:13) at publicLinkFn (file:///D:/Dev/olite/workspace/olite/olite/WebContent/AngularJSDemos/mylearnings/angular.js:3920:30) ...

Working ::

var myModule = angular.module ('mymodule',[]) ;

myModule.controller('TestController', function($scope) {
    $scope.message = 'Message from TestController';
});

myModule.controller('Test2Controller',function ($scope){
    $scope.message = "Message from Test2Controller" ; 
}) ;

myModule.controller = 'SampleController' ;

function SampleController( $scope ) {
    $scope.customers = [
                        {name:'AAA',city:'Plano'},
                        {name:'BBB',city:'Plano'},
                        {name:'CCC',city:'Bangalore'},
                        {name:'DDD',city:'SanJose'},
                        {name:'EEE',city:'SanFO'},
                        {name:'FFF',city:'SanJose'}
                        ] ;

    $scope.addCustomer = addCust ;

    function addCust( ) {
        $scope.customers.push ( {name:$scope.customerName , city:$scope.customerCity} ) ;
    } ;
}

Not working ::

var myModule = angular.module ('mymodule',[]) ;

myModule.controller('TestController', function($scope) {
    $scope.message = 'Message from TestController';
});

myModule.controller = 'SampleController' ;

myModule.controller('Test2Controller',function ($scope){
    $scope.message = "Message from Test2Controller" ; 
}) ;

function SampleController( $scope ) {
    $scope.customers = [
                        {name:'AAA',city:'Plano'},
                        {name:'BBB',city:'Plano'},
                        {name:'CCC',city:'Bangalore'},
                        {name:'DDD',city:'SanJose'},
                        {name:'EEE',city:'SanFO'},
                        {name:'FFF',city:'SanJose'}
                        ] ;

    $scope.addCustomer = addCust ;

    function addCust( ) {
        $scope.customers.push ( {name:$scope.customerName , city:$scope.customerCity} ) ;
    } ;
}

I am currently learning angular js and kinda struck here. What could be the issue here ??

why dont u use the same controller syntax for SampleController — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Dec 11, 2013 at 12:14

JB Nizet · Accepted Answer · 2013-12-11 12:15:17Z

1

controller is an attribute, or type function, of myModule. That's why you can use

myModule.controller(...);

But in your code, you replace this attribute by a value of type string:

myModule.controller = 'SampleController' ;

So obviously, you can't call the function myModule.controller() after, since myModule.controller is not a function anymore.

Remove the line myModule.controller = 'SampleController';: it doesn't make any sense.

answered Dec 11, 2013 at 12:15

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

2 Comments

J2G Over a year ago

Hi JB Nizet, As mentioned in the question "SampleController" does not have any issue. The issue is only with the "Test2Controller". First code snippet where "Test2Controller" is placed before "myModule.controller = 'SampleController' ;" works perfectly without any issues. When this moved after "myModule.controller = 'SampleController' ;" , this code breaks. any suggestions ???

JB Nizet Over a year ago

Suggestion: re-read my answer. You're replacing the function controller() in myModule by a String. Obviously, you can't call myModule.controller() anymore after this replacement, because calling a String doesn't make any sense.

Collectives™ on Stack Overflow

Controller function not getting recognized in js file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related