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