Угловой контроллер не работает с узлом экспресс

Question

Поэтому я создал угловое приложение (версия 1.5.7) и хотел развернуть его на Heroku.

Мне пришлось реализовать Node и использовать express для обслуживания основного файла index.html для heroku, чтобы он создавался, поскольку он не принимает простые угловые приложения. Однако, когда я сделал это, оба моих контроллера сломались. Мой контроллер контактной формы не рендерил мои сообщения ng, а мой контроллер нижнего колонтитула просто не отображался вообще.

и в консоли я получаю ошибку, которая гласит: "[ng:areq] Аргумент 'contactCtrl' не является функцией, получил неопределенный"

Вы можете проверить живую сборку здесь - https://fathomless-scrubland-50887.herokuapp.com/ и мой github для этого проекта здесь - https://github.com/StephenGrable1/AngularJS-Single-Page

Вот мой экспресс-файл server.js

var express = require('express');
var app = express();

var port = process.env.PORT || 8080;

app.use(express.static(__dirname));

app.get('/', function(req, res) {

    res.sendfile('index.html', {root: __dirname })
});

app.listen(port, function() {
  console.log('Our app is running on port ' + port);
});

Это два контроллера, которые хорошо работают, прежде чем я реализовал узел и экспресс.

footer.js

angular
    .module('Single-Page-App')
    .directive('appFooter', function () {
        return {
            restrict: 'E',
            template: '© Name {{ getYearCtrl.date | date:"yyyy" }}',
            controller: function(){
                this.date = Date.now();
            },
            controllerAs:'getYearCtrl'
        };
    });

contactCtrl.js

angular
.module('Single-Page-App')
.controller('contactCtrl', ['$scope', '$http', function($scope, $http){
        $scope.contact = {name : '', email : '', subject : '', message : ''};


        $scope.submitForm = function() {
            var config = {
                method: 'POST',
                url : '../php/process-form.php',
                data : {
                    'name' : $scope.contact.name,
                    'email': $scope.contact.email,
                    'subject': $scope.contact.subject,
                    'message' : $scope.contact.message
                }
            };
            var request = $http(config);
            request.then(function (response){

                if(typeof(response.data) == 'string') {
                    // make all error messages blank when
                    // php return a string (which is the success message)
                    // which means there are no error messages being sent from php
                    $scope.nameError = "";
                    $scope.messageError = "";
                    $scope.subjectError = "";
                    $scope.emailError = "";

                    // put the success string from php into
                    // the successMsg so it can be accessed in the view
                    $scope.successMsg = response.data;

                    // clear all form values
                    // and set the inputs to prisitine and untouched
                    // so that angular will not display any error messages
                    // once a user submits the form successfully

                    $scope.contact = {};
                    $scope.contactForm.$setPristine();
                    $scope.contactForm.$setUntouched();

                    console.log($scope.successMsg);
                    console.log("not an object");
                } else {
                    if(typeof(response.data) == 'object') {
                    // if php sends an object
                    // (which contains all the error messages present)
                    // populate variables with error messages

                    $scope.nameError = response.data['name-error'];
                    $scope.messageError = response.data['message-error'];
                    $scope.subjectError = response.data['subject-error'];
                    $scope.emailError = response.data['email-error'];

                    //clear the success message if errors come back from php
                    $scope.successMsg = "";

                    console.log("it is an object");
                    }
                }


            }, function (error){
                $scope.msg = error.data;
                console.log($scope.msg);

        });
    }
}]);

Я не уверен, что нарушает функциональность моих контроллеров...

Изменить: и это мой файл main.js с маршрутами

var app = angular.module('Single-Page-App', ['ui.router', 'ngMessages']);

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state("home", {
        url:"/home",
        views: {
            "main@": {
                templateUrl: "partials/home.html"
            }
        }
    })
    .state("listen", {
        url:"/listen",
        views: {
            "main@": {
                templateUrl: "partials/listen.html"
            }
        }
    })
    .state("watchHere", {
        url:"/watch",
        views: {
            "main@": {
                templateUrl: "partials/watch.html"
            }
        }
    })
    .state("contact", {
        url:"/contact",
        views: {
            "main@": {
                templateUrl: "partials/contact.html"
            }
        }
    })
}])

angular.bootstrap(document, ['Single-Page-App']);

Answer 1

Определите contactCtrl с помощью

angular.module('Single-Page-App')
.controller('contactCtrl ',...[])