Angular JS Controller error Argument is not a function

Jul 23

AngularJS weblient javascript framework breaks api.

Broken Control error in Angular

Today I got an error of several hello world todo examples in AngularJS when I tryed new 1.3 version.

Error like:

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

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

Prevent bad habits

It seems that they have broken the api. See my working example:
http://jsfiddle.net/patriklindstrom/XGeJb/
See the broken example:
http://jsfiddle.net/patriklindstrom/LGhEJ/
See my fix of the broken example:
http://jsfiddle.net/patriklindstrom/5cFy8/
Only difference is the version of AngularJS
If you change the external resource in jsfiddle from beta 1.3.0-beta.16 to previous version like //ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js it starts to work.
So lots of AngularJS democode on the net will stop working.
See: Angular Changelog and reason given

With the exception of simple demos, it is not helpful to use globals
for controller constructors. This adds a new method to `$controllerProvider`
to re-enable the old behavior, but disables this feature by default.

BREAKING CHANGE:
`$controller` will no longer look for controllers on `window`.
The old behavior of looking on `window` for controllers was originally intended
for use in examples, demos, and toy apps. We found that allowing global controller
functions encouraged poor practices, so we resolved to disable this behavior by
default

To make it work: Before:

function MyController() { // ... }

function MyController() { // ... }

After:

angular.module('myApp', []).controller('MyController', [function() { // ... }]);

angular.module('myApp', []).controller('MyController', [function() { // ... }]);

or you could set the settings back to allow global controllers.

angular.module('myModule').config(['$controllerProvider', function($controllerProvider) { // this option might be handy for migrating old apps, but please don't use it // in new ones! $controllerProvider.allowGlobals(); }]);

angular.module('myModule').config(['$controllerProvider', function($controllerProvider) { // this option might be handy for migrating old apps, but please don't use it // in new ones! $controllerProvider.allowGlobals(); }]);

15 comments

1. 

   Rodolfo Jorge Nemer Nogueira / 2014/08/12

   Some cases you´ll need to add function directly in the app scope:

   
_app = $('[ng-app]').scope();
_app.lazy = function($scope) {
$scope.lazy = 'Lazy Controller';
};

   {{lazy}}

   Reply
   • 

     ds / 2016/02/04

     Comment

     Reply
2. 

   Frederico / 2014/10/22

   Congratulations on the article!

   Reply
3. 

   JV / 2014/12/17

   This article really helped me, thanks!

   Reply
4. 

   Nada / 2015/02/16

   Really helpful. thx.

   Reply
   • 

     Valerio / 2015/02/25

     I’m really thankful for this :)

     Reply
     • 

       Anonymous / 2015/10/23

       Comment

       Reply
   • 

     Anonymous / 2015/11/19

     Comment

     Reply
5. 

   Anton / 2015/04/16

   Thank you!

   Reply
6. 

   arik / 2015/07/02

   great post, thank you! :)
   could also use:
   function controllerFunction)($scope){
   //…
   };

   angular.module(‘myModule’).
   controller(‘controllerName’,controllerFunction)
   controllerFunction.$inject = [‘$scope’];

   Reply
7. 

   Tweeds / 2015/10/21

   Thank you!

   Reply
8. 

   Ronaldo / 2016/01/11

   Thanks for the post help a great deal.

   Reply
9. 

   Wellington Torrejais da Silva / 2016/01/18

   Thanks

   Reply
10. 

    Anonymous / 2016/02/04

    Comment

    Reply
11. 

    Surveying Tool / 2016/05/11

    I’ve recently started a site, the information you offer on this website has helped me greatly. Thanks for all of your time & work.

    Reply