Angular 1.3 and Breaking Change for Controllers


angularjsIf 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.



Shawn
Shawn Wildermuth
Author, Teacher, and Coach




My Courses

Wilder Minds Training
Vue.js by Example (New Lower Price)
Bootstrap 4 by Example (New Lower Price)
Intro to Font Awesome 5 (Free Course)
Pluralsight
Building an API with ASP.NET Core (New Course)
Building a Web App with ASP.NET Core, MVC6, EF Core, Bootstrap and Angular (updated for 2.2)
Less: Getting Started (New)
Using Visual Studio Code for ASP.NET Core Projects
Implementing ASP.NET Web API

Application Name WilderBlog Environment Name Production
Application Ver v4.0.30319 Runtime Framework x86
App Path D:\home\site\wwwroot\ Runtime Version .NET Core 4.6.27817.01
Operating System Microsoft Windows 10.0.14393 Runtime Arch X86