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 Beniwal

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

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.

Controller function not getting recognized in js file

1 Answers