CODEWITHSUNDEEP
javascriptangularjs
danwellman
danwellman

Reputation: 9253

Angular controller returned undefined

I'm working with a legacy VB.Net app I inherited. The ng-app and ng-controller directives both appear on the HTML element in the root master page:

<html runat="server" id="html" ng-controller="MasterController">

The ng-app attribute is set in the code-behind for the page. It's present when I run the page and view the source. The app is scoped to the module ng-app="myModule"

The controller is defined in a function passed to add_load in the masterpage also, not quite at the end of the body, but not far from it:

Sys.Application.add_load(function () {

        var module = angular.module('myModule');
        var MasterController = function ($scope, $compile) {
            ... // stuffs
            }
        };

        module.controller('MasterController', ["$scope", "$compile", MasterController]);

    });

Locally, this works (or seems to work) fine, I see no errors in the console. However, the app has now been deployed to a staging environment, and in the browser console in that environment I see an Angular error:

[ng:areq] not a function got undefined

There are very few differences between the staging area and my local environment, these differences are largely that the .Net script bundler is used to concatenate and minify a bunch of JS files, including Angular, and the data used by the app. AFAIK there are no other differences.

I don't think the bundler is causing the issue as I enabled bundling locally and I don't see the error. I also can't see that the data passed to the app is causing the problem (it's customer data, account data, etc) as it's not even used in this particular controller.

Upvotes: 1

Views: 98

Answers (1)

David L
David L

Reputation: 33815

Don't use function expression syntax since the variable can be called before it is assigned. Use function declaration syntax instead per the best practices guide.

In addition, since you are passing a function reference, pull out the inject piece altogether to ensure that your code is minification safe.

var module = angular.module('myModule');
function masterController($scope, $compile) {
    ... // stuffs
}

masterController.$inject = ["$scope", "$compile"];

module.controller('MasterController', masterController);

Upvotes: 2

Related Questions