Angular 1.3 and Breaking Change for Controllers

If you are upgrading your projects to AngularJS 1.3 and you’re noticing a problem, there is a breaking change that might affect you. The error usually presents itself as “Controller error Argument is not a function”. If you’re seeing this, this post should help.

Unfortunately, my Pluralsight “Building a Site with Bootstrap, AngularJS, ASP.NET, EF and Azure” course repeats this problem (since it was built with a much earlier version of AngularJS. I am going to be rebuilding this course soon with updated versions of everything (Boostrap 4, AngularJS 1.3, ASP.NET vNext, EF7) but until then, you’ll want to see the fix.

The Breaking Change

It all comes down to how you create controllers. Luckily the fix is the way you should be writing your controllers (though you can opt into the old behavior). When I’ve taught AngularJS in the past, I’ve created controllers using global functions as that makes the story simple. Usually when I’ve taught it before, I’m trying to help people understand the concepts, not the best practices. Starting with AngularJS 1.3, this isn’t the default behavior.

If you’re controllers look like this:

// <div ng-controller="homeController"></div>

var app = angular.module("myapp", []);

function homeController($scope) {
  ...
}

You’ll need to do one of two things. The right thing to do is to re-create your controllers using the module.controllers function like so:

// <div ng-controller="homeController"></div>

var app = angular.module("myapp", []);

app.controller("homeController", function ($scope) {
  ...
});

It’s a minor change, but if you have a big project, this could be a lot of work. There is a way to fix this per module with a smaller change, but I don’t suggest it:

// <div ng-controller="homeController"></div>

var app = angular.module("myapp", []);

app.config($controllerProvider) {
  // Don't do this unless you *have* to
  $controllerProvider.allowGlobals();
});

function homeController($scope) {
  ...
}

Both fixes require you modify your source code, and the first solution is more work. But the first solution is more future proof so just bite the bullet on this one and do it right.