Angularjs controller not working, throws error (newbie)

Question

i'm working with angular-seed project. I'm trying to retreive data from mysql database. I need to know how to define different controller for each view. For example, I have this structure:

js
|_modules
  |_companies
     |_controller.js
     |_data.js
|_app.js
|_base.js

I have added this route to app.js

.state('app.companies', {
    url: '/companies',
    title: 'Companies',
    templateUrl: helper.basepath('companies.html'),
    controller: 'companiesCtrl' //THIS THROWS THE ERROR BELOW
})

companies.html has scripts added to botom of the page

<script src="app/js/modules/companies/data.js"></script>
<script src="app/js/modules/companies/controller.js"></script>

and this is the code for controller.js (also tested the commented part)

(function() {
    'use strict';

    angular
        .module('appname')
        .controller('companiesCtrl', companiesCtrl);

    companiesCtrl.$inject = ['$scope','companiesData','$log'];
    function companiesCtrl($scope, companiesData, $log) {
        console.log('asd'); //NEVER REACH THIS LOG
    };
});

/*var app = angular
.module('appname')
.controller('companiesCtrl', ['$scope','companiesData','$log', function($scope, companiesData, $log){
console.log('asd'); //NEVER REACH THIS LOG
$scope.companies = {};
Data.get('companies').then(function(data){
    $scope.companies = data.data;
    console.log('($scope.companies)');
});
}]);
*/

But I keep getting

Error: [ng:areq] Argument 'companiesCtrl' is not a function, got undefined

Same if I script ng-controller="companiesCtrl" on my view.

can you post the content of your app.js and possibly your view? — Aᴍɪʀ
– Aᴍɪʀ, Commented Dec 21, 2015 at 5:30
i think you have to execute your function (function(){ 'use strict' ..... })(); — Keval Bhatt
– Keval Bhatt, Commented Dec 21, 2015 at 5:31
@Amir, it is a compiled code of several js files. At least 1800+ lines. Is there anything specific that you want to know? I will post it. — leandronn
– leandronn, Commented Dec 21, 2015 at 5:35
I thought the problem might be somewhere else, but someone already posted an answer and I guess that might be it. You have to call that anonymous function :) — Aᴍɪʀ
– Aᴍɪʀ, Commented Dec 21, 2015 at 5:36

Keval Bhatt · Accepted Answer · 2015-12-21 06:10:01Z

3

change your function to:

(function() {    
 'use strict';

    angular
        .module('appname')
        .controller('companiesCtrl', companiesCtrl);

    companiesCtrl.$inject = ['$scope','companiesData','$log'];
    function companiesCtrl($scope, companiesData, $log) {
        console.log('asd'); //NEVER REACH THIS LOG
    };
})();// execute this function then it will work

See this example if you remove () breaket then it will give you the error.

If possible then create controller like this:

angular.module('appname') .controller('companiesCtrl', ['$scope', function($scope) { console.log('asd'); //NEVER REACH THIS LOG }]);

edited Dec 21, 2015 at 6:10

answered Dec 21, 2015 at 5:34

Keval Bhatt

6,3623 gold badges26 silver badges40 bronze badges

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

5 Comments

leandronn Over a year ago

Ok, this is working but only if I declare scripts in my index.html page. It does not work if I declare scripts in the view companies.html. There is the real problem, I cannot make different controllers for different views.

Keval Bhatt Over a year ago

are you talking about fiddle ?

leandronn Over a year ago

No, about my code. If i declare the scripts controller.js and data.js in my view, I keep getting the same error.

Keval Bhatt Over a year ago

@leandronn see my updated answer i think at this line companiesCtrl.$inject = ['$scope','companiesData','$log']; it will give you error

leandronn Over a year ago

Tried it but same error. I found the solution and posted it. Thanks for everything.

Sundar Singh · Accepted Answer · 2015-12-21 05:34:50Z

0

Please change your controller as :

(function() {
'use strict';
   function companiesCtrl($scope, companiesData, $log) {
    console.log('asd'); //NEVER REACH THIS LOG
    };

   angular
    .module('appname')
    .controller('companiesCtrl', companiesCtrl);

     companiesCtrl.$inject = ['$scope','companiesData','$log'];

})();

edited Dec 21, 2015 at 5:34

answered Dec 21, 2015 at 5:29

Sundar Singh

6865 silver badges17 bronze badges

2 Comments

Aᴍɪʀ Over a year ago

it does not matter if you define the function first or later. If you use function fn() {} syntax, it will be defined in preprocess.

leandronn Over a year ago

Agree with Amir. Same happens. Thanks.

leandronn · Accepted Answer · 2015-12-21 13:12:20Z

The problem was on script loading. I had to use lazy loading of the files within my app.js Here's the code:

app.js companies route

.state('app.companies', {
          url: '/companies',
          title: 'Companies',
          templateUrl: helper.basepath('companies.html'),
          resolve: helper.resolveFor('companiesCtrl'),
          controller: 'companiesCtrl'
      })

lazy load code

.constant('APP_REQUIRES', {
      scripts: {
        'modernizr':          ['vendor/modernizr/modernizr.custom.js'],
        'icons':              ['vendor/fontawesome/css/font-awesome.min.css',
                               'vendor/simple-line-icons/css/simple-line-icons.css'],
        'companiesCtrl':      ['app/js/modules/companies/data.js','app/js/modules/companies/controller.js']
      },
      modules: []
    });

Collectives™ on Stack Overflow

Angularjs controller not working, throws error (newbie)

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related