0

This seems to be yet another variation on a very common theme with Angular. I have a controller that isn't being picked up and I can't pinpoint what's missing.

Here are the key areas:

My Layout.cshtml page has the following:

        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="http://cdn.date-fns.org/v1.3.0/date_fns.min.js"></script>

        <script src="~/js/utility/utility.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>

        <script src="~/js/app.js"></script>

        <script src="~/js/utility/config.js"></script>

        <!-- models -->
        <script src="~/js/models/game.js"></script>

        <!-- services -->
        <script src="~/js/services/game.js"></script>

        <!-- controllers -->
        <script src="~/js/controllers/home-controller.js"></script>

App.ts looks like this:

/// <reference path="utility/utility.ts" />

var app;
(function () {
    'use strict';

    app = angular.module(Utility.Resources.appName, ['ngRoute'])

})();

My config.ts is set up like this (a few deliberate redundancies in the routes to begin with):

(function () {
    'use strict';

    app.config(function ($routeProvider, $locationProvider) {
        console.info('routes');
        $routeProvider.when(Utility.Urls.game, {
            templateUrl: Utility.Templates.game
        }).when(Utility.Urls.home, {
            templateUrl: Utility.Templates.home
        }).when(Utility.Urls.team, {
            templateUrl: Utility.Templates.team
        }).otherwise({
            redirectTo: Utility.Urls.home
            //templateUrl: Utility.Templates.home
        });

        $locationProvider.html5Mode(true);
    });


    app.run(function ($rootScope, $location) {

        console.info('running'); 

        $rootScope.$on('$routeChangeStart', function (event, nextRoute, currentRoute) {
            console.info("Started");
        });
    });
})();

And the controller in question looks like this:

var Controllers;
(function (Controllers) {
    'use strict';
    var Home = (function () {
        function Home($scope, gameService) {
            $scope.vm = this;
            console.info("In Home Controller");

            $scope.games = [];
            $scope.categories = [];
            $scope.selectedGame = {};

            gameService = gameService;
            $scope.get = function () {
                console.info("Getting");
            };

        }
        Home.$inject = [
            Utility.Angular.$scope, Utility.Services.gameService
        ];
        return Home;
    }());
    Controllers.Home = Home;
})(Controllers || (Controllers = {}));

So far I can't see anything that's obviously missing but when opening the home template...

<div class="row" ng-controller="Controllers.Home">
    <div class="col-md-3">
        <h3>Games</h3>
        <ul class="list-group">
            <li class="list-group-item list-group-item-info" ng-repeat="game in games" id="{{game.Id}}" ng-click="get(game.Id)">
                <div>
                    <p><span class="meta">{{game.Date}}</span> <span class="pull-right"><i class="glyphicon glyphicon-calendar"></i> {{game.Season}}</span></p>
                    <p>{{game.Team.Name}} vs {{game.Opposition}}</p>
                </div>
            </li>
        </ul>
    </div>

... the debugger returns the following error: Argument 'Controllers.Home' is not aNaNunction, got undefined.

So I'm sure I've overlooked something. Perhaps a dependency in my controller or maybe one of the models? Except I'm not seeing any other errors in the debugger that would indicate a problem.

Any ideas?

UPDATE: georgeawg is basically right. The missing part is in my config:

app.config(function ($routeProvider, $locationProvider) {
    console.info('routes');
    $routeProvider.when(Utility.Urls.game, {
        templateUrl: Utility.Templates.game
    }).when(Utility.Urls.home, {
        templateUrl: Utility.Templates.home,
        controller: Controllers.Home // <- here
        ...
2
  • ng-controller expects controller name, is your controller name "Controllers.Home" or you expect that name to be resolved from Controllers object? But then $scope is inside controller, is it? Btw are you adding these controllers into your module like, angular.module("app").controller("Home", Controllers.Home); ? Commented Aug 28, 2016 at 4:12
  • If I'm not mistaken, the Controllers function has a "Home" function added to it. Effectively a Home controller in a "Controllers" namespace, right? Check my code above and confirm, if you want. Commented Aug 28, 2016 at 9:56

1 Answer 1

1

Be sure to declare the controller function to the module as a controller type.

app.controller("Controllers.Home", Controllers.Home);

From the Docs:

Error: ng:areq

Bad Argument

Argument 'Controllers.Home' is not a function, got undefined

Description

AngularJS often asserts that certain values will be present and truthy using a helper function. If the assertion fails, this error is thrown. To fix this problem, make sure that the value the assertion expects is defined and matches the type mentioned in the error.

-- AngularJS Error Reference -- $compile -- ng:areq

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.