Angular JS Controller error Argument is not a function

Jul 23

AngularJS logo

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

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() {
  // ...
}

After:

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();
}]);

15 comments

  1. Rodolfo Jorge Nemer Nogueira /

    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}}

  2. Frederico /

    Congratulations on the article!

  3. JV /

    This article really helped me, thanks!

  4. Nada /

    Really helpful. thx.

  5. Anton /

    Thank you!

  6. arik /

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

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

  7. Tweeds /

    Thank you!

  8. Ronaldo /

    Thanks for the post help a great deal.

  9. Wellington Torrejais da Silva /

    Thanks

  10. Anonymous /

    Comment

  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.

Leave a Reply

Your email address will not be published.