AngularJS Error with multiple controllers and Grunt

Question

Unable to get the multiple controllers to work with Grunt. Grunt is not the issue though, as simply combining the files manually does not work either. I am trying to build the application with Grunt and single controllers with one per file to build out the application over time.

The controllers are in individual files that are combined and minified with Grunt. This works, and the module looks correct before it is minified. The unminified example is in the script.js.

I am getting the error below: Error: error:unpr Unknown Provider

'use strict';
angular.module('OntarioDarts', []);

// Source: app/Modules/Events/EventController.js
angular.module('OntarioDarts').controller('EventCtrl', function ($scope) {
    $scope.Events = [
        {
            'Id': 1,
            'Name': '12th Annual Frank Hanlon Tournament',
            'Date': 20150117,
            'Time': 1000,
            'Image': 'images/Events/FrankHanlon20150128.jpg',
            'Flyer': ''
        },
        {
            'Id': 2,
            'Name': '1st Annual Ken Cadieux Memorial Christmas Tournament',
            'Date': 20141227,
            'Time': 1000,
            'Image': 'images/Events/KenCadieux20141227.jpg',
            'Flyer': ''

        },
        {
            'Id': 3,
            'Name': '8th Annual Presidents Cup Tournament',
            'Date': 20150313,
            'Time': 2000,
            'Image': 'images/Events/PresidentsCup20150314.jpg',
            'Flyer': ''
        }
    ];
    $scope.ImageSettings = [{ 'Height': 200, 'Width': 155 }];
});

// Source: app/Modules/Leagues/LeagueController.js
angular.module('OntarioDarts').controller('LeagueCtrl', function ($scope) {
    $scope.Leagues = [
        { 'Id': 1, 'Name': 'Dixie Summer Dart League' },
        { 'Id': 2, 'Name': 'Etobicoke Pub Dart League'  },
        { 'Id': 3, 'Name': 'Region of Peel Dart League'}
    ];
});

// Source: app/Modules/Schedules/ScheduleController.js
angular.module('OntarioDarts').controller('ScheduleCtrl', function ($scope) {
    $scope.Schedules = [
        { "Id": 1, "Name": "November 1, 2014" },
        { "Id": 2, "Name": "November 5, 2014" }
    ];
});

// Source: app/Modules/Teams/TeamController.js
angular.module('OntarioDarts').controller('TeamCtrl', function ($scope) {
    $scope.Teams = [
        { 'Id': 1, 'Name': 'Team 1' },
        { 'Id': 2, 'Name': 'Team 2' }
    ];
});

//# sourceMappingURL=OntarioDarts.js.map

Plunker

Answer 1

I just found out in plunker that file name is script.js instead of scripts.js. that is referenced wrongly in html.

Please consider this when you minify

Following is the safest way to write for minification

angular.module('OntarioDarts').controller('EventCtrl', ['$scope', function ($scope) {
   //controller code goes here
}]);

you have to use array notation for your controller function to understand $scope.

['$scope', function ($scope) {
   //controller code goes here
}]